CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Joey Cavazos
Joey Cavazos

Reputation: 59

jquery slider doesn't continue after i get to the last one

I am sure I am missing something simple and just need a new pair of eyes. The problem I am having is with continuing back to the first div with the class of 'slide' once i get to the last one., it should go back to the first element but its not. I just need fresh eyes on this one I can't figure out what the problem is thanks in advance for any help. Here is the function i created, I don't want to post all the html so I cam adding a codepen link.

 $('.arrow-next').click(function() {
   var currentSlide = $('.active-slide');
   var nextSlide = currentSlide.next();
   var currentDot = $('.active-dot');
   var nextDot = currentDot.next();

   if(nextSlide.length === 0) {
     nextSlide = $('.slide').first();
     nextDot = $('.dot').first();
   }
   currentSlide.fadeOut(600).removeClass('active-slide');
   nextSlide.fadeIn(600).addClass('active-slide');
   currentDot.removeClass('active-dot');
   nextDot.addClass('active-dot');
 });

Here is my codepen link: http://codepen.io/cavascript/pen/GoQdoJ

Upvotes: 3

Views: 53

Answers (1)

Tᴀʀᴇǫ Mᴀʜᴍᴏᴏᴅ
Tᴀʀᴇǫ Mᴀʜᴍᴏᴏᴅ

Reputation: 4216

Looks like you have other element after the last slide. Just filter nextSlide with class slide. And same for the nextDot

var nextSlide = currentSlide.next('.slide');
var nextDot = currentDot.next('.dot');

Upvotes: 1

Related Questions