Пара вопросов о слайдере

197
01 января 2019, 12:30

Помогите решить 2 проблемы:

  1. У меня слайдов больше чем кнопок и нужно чтобы при нажатии на последнюю кнопку показывался 5ый слайд, 6ой ...и до последнего.

  2. И у меня на странице много одинаковых слайдеров, что сделать чтобы не было совместимо с другими слайдерами.

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);
  });
READ ALSO
Некорректные пропорции фигур в CreateJS

Некорректные пропорции фигур в CreateJS

Есть проблема с пропорциями фигур при их создании посредством CreateJSНиже приведён JS-код:

211