I am trying to create an infinite slider using jQuery. The active slide will be 2/3 of the screen, the upcoming slide will be 1/3. So, you already see a preview of the next slide.
The slider I created works. When you click next , the slider will be animated to the left.
Trick
In init, I duplicate the first two slides after the last slide. When slideIndex , which monitors the current index, is the number of slides minus 1, it will reset the slider to zero. So you have an endless slider.
Problem
The problem arises when I also want to apply the effect when you are on the first slide, and click earlier. It should basically do the same, but not reset the slider to zero, but to the end of the slides.
var slider = $('.slider'); var slides = slider.find('.slides').children(); var slidesW = slides.width(); root.offset = -Math.abs((root.slideIndex * slides.eq(index).width())); console.log(root.offset); // Update active class slides.removeClass('active'); // slides.eq(index).addClass('active'); // Add class active TweenMax.to(slides.eq(index), 1, { className: 'active', onComplete: function() { if (root.slideIndex >= (root.numOfSlides - 2)) { slider.find('.slides').addClass('no-transition'); slides.removeClass('active'); slides.filter(':first').addClass('active'); root.offset = 0; TweenMax.set(slider.find('.slides'), { x: root.offset, onComplete: function() { root.slideIndex = 0; $('#footer .paging #indicator').find('span').html('01'); return false; } }); } } }); // Remove no-transition class slider.find('.slides').removeClass('no-transition'); // Change position of ul.slides TweenMax.to(slider.find('.slides'), 0.4, { x: root.offset });
Since I have an operator if if (root.slideIndex === (root.numOfSlides - 2)) { , it will always be reset to zero when slideIndex is equal to root.numOfSlides - 2 . So it doesn’t matter if you press the previous or next when slideIndex is in my example on slide 4, it will reset to zero.
I recreate a slider in codefen: https://codepen.io/anon/pen/zEmozr
Hope someone can help me, don’t know how to solve this problem after searching and trying for several days. If something is not clear enough or something else, please let me know. Thanks in advance.