Help solve 2 problems:
I have more slides than buttons and I need it so that when I click on the last button, the 5th slide, the 6th ... and to the last one is shown.
And I have a lot of identical sliders on the page, what to do so that it is not compatible with other sliders.
https://jsfiddle.net/ramax12/wbgL0kxn/7/
'use strict'; var slides = document.querySelectorAll('.slider .slider__item'); var toggles = document.querySelectorAll('.slider .slider__toggle'); var currentSlide = 0; var touchstartX = 0; var touchstartY = 0; var touchendX = 0; var touchendY = 0; slides[currentSlide].classList.add('slider__item--showing'); var previousSlide = function () { goToSlide(currentSlide - 1); } var nextSlide = function () { goToSlide(currentSlide + 1); } var goToSlide = function (n) { [].forEach.call(slides, function (containerItem) { containerItem.classList.remove('slider__item--showing'); }); [].forEach.call(toggles, function (containerToggle) { containerToggle.classList.remove('slider__toggle--active'); }); currentSlide = (n + slides.length) % slides.length; if (n == toggles.length - 1 && slides.length > toggles.length) { // slides[currentSlide].classList.add('slider__item--showing'); toggles[currentSlide - 1].classList.add('slider__toggle--active'); } else { slides[currentSlide].classList.add('slider__item--showing'); toggles[currentSlide].classList.add('slider__toggle--active'); } }; toggles = [].slice.apply(toggles); toggles.forEach(function (toggle, i) { toggle.addEventListener('click', function() { goToSlide(i); }); }); [].forEach.call(slides, function (containerItem) { containerItem.addEventListener('touchstart', function(evt) { touchstartX = evt.changedTouches[0].screenX; touchstartY = evt.changedTouches[0].screenY; }, false); containerItem.addEventListener('touchend', function(evt) { touchendX = evt.changedTouches[0].screenX; touchendY = evt.changedTouches[0].screenY; if (touchendX < touchstartX) { nextSlide(); } if (touchendX > touchstartX) { previousSlide(); } }, false); }); 