CODEWITHSUNDEEP
javascriptjqueryhtmlcss
David Aguirre
David Aguirre

Reputation: 1410

Jquery list in slideshow that connects first and last list element to create a carousel?

I have three list elements that should slide in and out of the container when you click the left or right arrows. I would like these list elements to wrap so that when you get to the last list element, you go back to the first list element. Basically a carousel effect. I do not want to use a plugin.

This code will slide the elements. However, the list does not wrap onto itself. The fiddle is here ... http://jsfiddle.net/defmetalhead/A23g9/9/

$('#rightArrow').on('click', function () {
  var end = $(".upComingTiles li").length;
  $(".upComingTiles li").animate({ 'left': '-=310px' }, 1000)
});

This code works the way I want it too, however the list will only shift one list element at a time. Here is the fiddle ... http://jsfiddle.net/defmetalhead/3YM8G/

$('#rightArrow').on('click', function () {
  var end = $(".upComingTiles li").length;
  $(".upComingTiles").animate({ 'left': '-=310px' }, 'slow', function () {
    $(".upComingTiles li:first").insertAfter(".upComingTiles li:last")
  });
});

Upvotes: 0

Views: 181

Answers (1)

Poornima
Poornima

Reputation: 928

You can use li:lt(3) to select the first three LIs and insert them after the last LI.

$(".upComingTiles li:lt(3)").insertAfter(".upComingTiles li:last")

Here's a link to the fiddle.

http://api.jquery.com/lt-selector/

Upvotes: 1

Related Questions