SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Member
    Join Date
    Dec 2009
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Help With My Infinite Carousel

    I want the next and previous buttons on my carousel to work when I hover over them. The way it works now is that the function only fires once each time I hover over one of the buttons.

    Any suggestions?

    *****

    <script type="text/javascript">
    jQuery(document).ready(function(){
    jQuery('#slider-stage').carousel('#previous', '#next');
    jQuery('#viewport').carousel('#simplePrevious', '#simpleNext');
    });
    </script>

    *****

    jQuery.fn.carousel = function(previous, next, options){
    var sliderList = jQuery(this).children()[0];

    if (sliderList) {
    var increment = jQuery(sliderList).children().outerWidth("true"),
    elmnts = jQuery(sliderList).children(),
    numElmts = elmnts.length,
    sizeFirstElmnt = increment,
    shownInViewport = Math.round(jQuery(this).width() / sizeFirstElmnt),
    firstElementOnViewPort = 1,
    isAnimating = false;

    for (i = 0; i < shownInViewport; i++) {
    jQuery(sliderList).css('width',(numElmts+shownInViewport)*increment + increment + "px");
    jQuery(sliderList).append(jQuery(elmnts[i]).clone());
    }

    jQuery(previous).hover(function(event){
    if (!isAnimating) {
    if (firstElementOnViewPort == 1) {
    jQuery(sliderList).css('left', "-" + numElmts * sizeFirstElmnt + "px");
    firstElementOnViewPort = numElmts;
    }
    else {
    firstElementOnViewPort--;
    }

    jQuery(sliderList).animate({
    left: "+=" + increment,
    y: 0,
    queue: true
    }, "swing", function(){isAnimating = false;});
    isAnimating = true;
    }

    });

    jQuery(next).hover(function(event){
    if (!isAnimating) {
    if (firstElementOnViewPort > numElmts) {
    firstElementOnViewPort = 2;
    jQuery(sliderList).css('left', "0px");
    }
    else {
    firstElementOnViewPort++;
    }
    jQuery(sliderList).animate({
    left: "-=" + increment,
    y: 0,
    queue: true
    }, "swing", function(){isAnimating = false;});
    isAnimating = true;
    }
    });
    }
    };

  2. #2
    SitePoint Member
    Join Date
    Apr 2009
    Location
    London, UK
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I want the next and previous buttons on my carousel to work when I hover over them. The way it works now is that the function only fires once each time I hover over one of the buttons.
    Do you want the carousel to infinitely loop on button hover?
    Simply gorgeous: Zoom | Magnify | Enlarge | Slideshow


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •