Помогите решить 2 проблемы:
У меня слайдов больше чем кнопок и нужно чтобы при нажатии на последнюю кнопку показывался 5ый слайд, 6ой ...и до последнего.
И у меня на странице много одинаковых слайдеров, что сделать чтобы не было совместимо с другими слайдерами.
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);
});
Сборка персонального компьютера от Artline: умный выбор для современных пользователей