loop carousel jquery

carousel, infinite, jquery, loops

Solution

Instead of toggling your images that will make the code unreadable and full of z-index changes, just `animate` the `scrollTop` of the container element

- Animate the scrollTop and inside a callback, redo the loop function and:

- reset the scrollTop to 0 and

- remove the first element, appending it `after` the the last one

var $slideShow = $('#slideshow');

function loop() {
  $slideShow.stop().animate({
    scrollTop: 200
  }, 800, 'linear', function() {
    $(this).scrollTop(0).find('div:last').after($('div:first', this));
    loop(); // Recursion
  });
}

loop(); // Start

#slideshow {
  width: 200px;
  height: 200px;
  position: relative;
  overflow: hidden;
}

#slideshow img {
  display: block;
}

<div id="slideshow">
  <div><img src="http://placehold.it/200x200/cf5&text=1" alt=""></div>
  <div><img src="http://placehold.it/200x200/f0f&text=2" alt=""></div>
  <div><img src="http://placehold.it/200x200/444&text=3" alt=""></div>
  <div><img src="http://placehold.it/200x200/f70&text=4" alt=""></div>
</div>

<script src="https://code.jquery.com/jquery-3.1.0.js"></script>

Problem

Possible Duplicate: my carousel does not work am a bit puzzled! i got this carousel am creating and i desire that it loops. everything else works out fine, but, when the last image has slid up i want the first one to do the same after it, then the second...infinitely. i have tried many things like appending the first image to the last. i have also tried showing back the images after the last(this one tries but gives an undesirable effect). i need to be shown what tweaks i need to make. thanks big time! ``` var images = $("#slideShow div"); var index = 0; for (i = 0; i < images.length; i++) { $(images[i]).addClass("image-" + i); } setInterval(function() { $(".image-" + (index)).slideUp(1000); if (index < images.length - 1) { index += 1; } else { index = 0; } }, 500); #slideShow { height:20em; width:80%; float:right; } #slideShow div{ line-height:20em; float:right; } #slideShow img{ vertical-align:middle; border:solid 5px #A5A5A5; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; } <div id="slideShow"> <?php $dir = "carousel"; $dh = opendir($dir); while($slide = readdir($dh)){ $items[] = $slide; } for($i=0; $i<sizeof($items); $i++){ if($items[$i] != "." && $items[$i] != ".."){ $imagePath = $dir."/".$items[$i]; $image = "<div>"."<img src = \"".$imagePath."\""." />"."</div>"; echo $image; } } closedir($dh); ?> </div> ```

Original source