ansaurus

Question

Help with auto-rotating infinite jquery carousel. Can not get carousel to loop infinitely instead of 'rewind'.

Answer 1

+3 A:

The problem with your carousel is that the block of images remains one giant block, so when you get to the end, you must slide all the way back to the first image to loop, and this is what causes that "rewind" look.

What I would do instead is:

Load each image into an array
Remove all but the first image from the gallery.
Add the next image (in an array next with looping is number % length)
Animate slider to show next image
Reset CSS and remove the now invisible first image
Rinse and repeat.

Below is an example implementation with a recursive function.

I create a slider function that makes use of jQuery's .animate(). In the call back of .animate() I call the slider function again after a brief pause casued by setTimeout().

The example below is quite simple, you can adjust it easily to for example show the slivers of the previous and next image and other things.... This is just to illustrate a simple implementation of an infinite slide with a limited number of images.

I added in a simple implementation of how to show a changing caption under the gallery. The information for the caption is taken from the images HTML codes. This caption could also be placed under each image and slid along with the image.

jsFiddle example

$(function() {          
    var showing = 0;    // which image is showing
    var imgs = [];      // array to hold images HTML
      // Put image elements into an array
    imgs = $("#gallery img").toArray();
    var numberOf = imgs.length;    
      // Remove all but first image from DOM
    $("#slider").html("");
    $("#slider").html(imgs[0]);    
      // Add title text div
    $("#gallery").after('<a id="title"/>');
      // The recursive slider function
    var nextImage = function() {
          // Add next image (only use increment once!)
        $("#slider").append(imgs[++showing % numberOf]);
          // Show image title
        $("#title").html($(imgs[showing % numberOf]).attr("title"));
          // Link to original
        $("#title").attr("href", $(imgs[showing % numberOf]).attr("src"));
          // Animate the slider
        $("#slider").animate({
            left: '-=200'
        }, 2000, function() {            
              // Remove image to the left
            $("#slider img:first").remove();            
              // Reset CSS
            $("#slider").css("left", "0px");            
              // Call animationg function again
            setTimeout(function() {nextImage(); }, 1000);
        });  
    }        
    nextImage();  // Call next image for the first time         
});

The static HTML would consist of:

<div id="gallery">
    <div id="slider">
        ... the images here ...
    </div>
</div>

PS: to see the conveyor belt effect at work look at this.

jQuery and JS methods and properties used:

Peter Ajtai 2010-09-17 22:25:18

+1 for a wiki-worthy answer. Documentation and everything provided XD.

Moses 2010-09-17 23:05:26

Answer 2

+1 A:

Peter Ajtai has a nice summary of one method, but I have another one which only requires adding a few lines to your script.

Basically it clones the first image, text and pager link and adds it to the end. When the animation ends on the last image (which is now actually the first), the left positioning of the window is reset to zero and the animation resumes. I tried to add comments with [NEW] so you can more easily find the changes. And, I made a demo so hopefully it will be clear.

$(document).ready(function() {
 $(".paging").show();
 $(".paging a:first").addClass("active");

 var imageWidth = $(".window").width();
 // [NEW] add one, since we are adding the first image to the end
 var imageSum = $(".image_reel img").size() + 1; 
 var imageReelWidth = imageWidth * imageSum;

 // [NEW] included modifying width of botTextBox 
 $(".image_reel, .botTextBox").css({'width' : imageReelWidth });

 // [NEW] clone first image & text and add it to the end, include dummy paging
 $(".image_reel li:first").clone().appendTo( $(".image_reel") );
 $(".botText a:first").clone().appendTo( $(".botText") );
 $(".paging").append('<a href="#" rel="' + imageSum + '"></a>'); // don't include the number in the link

 rotate = function(){
  var triggerID = $active.attr("rel") - 1; //Get number of times to slide
  var image_reelPosition = triggerID * imageWidth; //Determines the distance the image reel needs to slide

  $(".paging a").removeClass('active'); //Remove all active class
  $active.addClass('active'); //Add active class (the $active is declared in the rotateSwitch function)

  // [NEW] Slider Animation
  $(".image_reel, .botText").animate({
   left: -image_reelPosition
  }, 750, function(){
   // [NEW] callback function (called when animation is done)
   if (triggerID == imageSum - 1) {
    // if we're back to the first image, reset the window position
    $(".image_reel, .botText").css('left',0);
   }
  });
 };

 //Rotation  and Timing Event
 rotateSwitch = function(){
  play = setInterval(function(){ //Set timer - this will repeat itself every X seconds
   $active = $('.paging a.active').next(); //Move to the next paging
   if ( $active.length === 0) { // If paging reaches the end...
    // [NEW] go back to second image (the first is now the last)        
    $active = $('.paging a:eq(1)');
   }
   rotate(); //Trigger the paging and slider function
  }, 1500); //Timer speed in milliseconds (7 seconds)
 };

 rotateSwitch(); //Run function on launch

 //On Hover
 $(".image_reel a").hover(function(){
  clearInterval(play); //Stop the rotation
 }, function(){
  rotateSwitch(); //Resume rotation timer
 }); 

 //On Click
 $(".paging a").click(function() {
  $active = $(this); //Activate the clicked paging
  //Reset Timer
  clearInterval(play); //Stop the rotation
  rotate(); //Trigger rotation immediately
  rotateSwitch(); // Resume rotation timer
  return false; //Prevent browser jump to link anchor
 });

});

Oh and one last thing... I added the missing <p> in front of the Phillies botText

fudgey 2010-09-18 00:16:29

This worked perfectly, thank you very much! I really appreciate the help

garr1s0n 2010-09-20 14:39:09

ansaurus

tags:

views:

answers:

Help with auto-rotating infinite jquery carousel. Can not get carousel to loop infinitely instead of 'rewind'.

jsFiddle example

jQuery and JS methods and properties used:

related questions