Независимый слайдер с помощью конструктора

Question

Пишу простенький слайдер, линейный код написал, теперь, перед добавлением функционала решил сделать его независимым, т.е добавить возможность иметь несколько независимых слайдеров на странице + хотелось бы передавать параметры SlidesToShow и SlidesToScroll в каждый слайдер, я так понимаю, для этого мне нужен конструктор, но по идеи, сначала я должен сделать его независимым.

Подскажите, пожалуйста, с чего начать и куда копать).

Я пытался qeurySelector изменить на querySelectorAll и запихнуть slider с btnPrev/Next в forEach с параметрами (item, index), но не работает ожидаемым образом.

document.addEventListener("DOMContentLoaded", function(event) {

  const slidesToShow = 3;
  const sliderToScroll = 3;
  let position = 0;
  const slider = document.querySelector('.slider');
  const sliderWrapper = document.querySelector('.slider-wrapper');
  const btnPrev = document.querySelector('.btn-prev');
  const btnNext = document.querySelector('.btn-next');
  const items = document.querySelectorAll('.slider-slide');
  const itemWidth = slider.clientWidth / slidesToShow;
  const itemsLength = items.length;
  const movePosition = sliderToScroll * itemWidth;

  const infinity = false;
  const itemMargin = 0;

  //Set the width for the slide

  items.forEach((item) => {
    item.style.minWidth = `${itemWidth}px`
  })

  // btns
  btnNext.addEventListener('click', function() {
    const itemsLeft = itemsLength - (Math.abs(position) + slidesToShow * itemWidth) / itemWidth;
    if (itemsLeft >= sliderToScroll) {
      position -= movePosition;
    } else {
      position -= itemsLeft * itemWidth;
    }

    setPosition()
    checkBtns()
  })

  btnPrev.addEventListener('click', function() {
    const itemsLeft = Math.abs(position) / itemWidth;
    if (itemsLeft >= sliderToScroll) {
      position += movePosition;
    } else {
      position += itemsLeft * itemWidth;
    }
    setPosition()
    checkBtns()
  })

  // sliderWrapper translate
  const setPosition = function() {
    sliderWrapper.style.transform = `translateX(${position}px)`;
  }

  //btns conditions
  const checkBtns = () => {
    btnPrev.disabled = position === 0;
    btnNext.disabled = position <= -(itemsLength - slidesToShow) * itemWidth
  }

  checkBtns()

});

.intro {
  width: 600px;
  margin: 30px auto;
}

.slider {
  background-color: pink;
  overflow: hidden;
}

.slider-wrapper {
  display: flex;
  background-color: pink;
  transition: transform .2s linear;
}

.slider-slide {
  display: flex;
  background-color: yellow;
  height: 100px;
  align-items: center;
  justify-content: center;
}

.slider-slide:nth-child(3n + 1) {
  background-color: red;
}

.slider-slide:nth-child(3n + 2) {
  background-color: green;
}

.slider-slide:nth-child(3n + 3) {
  background-color: orange;
}

<div class="intro">
  <div class="slider">
    <div class="slider-wrapper">
      <div class="slider-slide">1</div>
      <div class="slider-slide">2</div>
      <div class="slider-slide">3</div>
      <div class="slider-slide">4</div>
      <div class="slider-slide">5</div>
      <div class="slider-slide">6</div>
      <div class="slider-slide">7</div>
      <div class="slider-slide">8</div>
      <div class="slider-slide">9</div>
    </div>
  </div>
  <div class="btns">
    <button class="btn-prev">Назад</button>
    <button class="btn-next">Вперед</button>
  </div>
</div>

Answer 1

Я не занимался оптимизацией, просто немного переделал ваш код чтобы работало несколько слейдеров.

class MySlider {

  position = 0;
  infinity = false;
  itemMargin = 0;

  constructor(selector, options = {}) {
    this.slidesToShow = options.slidesToShow || 3;
    this.sliderToScroll = options.sliderToScroll || 3;
    this.main = document.querySelector(selector);
    this.slider = this.main.querySelector('.slider');
    this.sliderWrapper = this.main.querySelector('.slider-wrapper');
    this.btnPrev = this.main.querySelector('.btn-prev');
    this.btnNext = this.main.querySelector('.btn-next');
    this.items = this.main.querySelectorAll('.slider-slide');
    this.itemWidth = this.slider.clientWidth / this.slidesToShow;
    this.itemsLength = this.items.length;
    this.movePosition = this.sliderToScroll * this.itemWidth;

    this.items.forEach((item) => {
      item.style.minWidth = `${this.itemWidth}px`
    })

    this.btnNext.addEventListener('click', this.onNextClick.bind(this));
    this.btnPrev.addEventListener('click', this.onPrevClick.bind(this));
    this.checkBtns();
  }

  checkBtns = function() {
    this.btnPrev.disabled = this.position === 0;
    this.btnNext.disabled = this.position <= -(this.itemsLength - this.slidesToShow) * this.itemWidth;
  }

  setPosition = function() {
    this.sliderWrapper.style.transform = `translateX(${this.position}px)`;
  }

  onPrevClick = function() {
    const itemsLeft = Math.abs(this.position) / this.itemWidth;
    if (itemsLeft >= this.sliderToScroll) {
      this.position += this.movePosition;
    } else {
      this.position += this.itemsLeft * this.itemWidth;
    }
    this.setPosition();
    this.checkBtns();
  }

  onNextClick = function() {
    const itemsLeft = this.itemsLength - (Math.abs(this.position) + this.slidesToShow * this.itemWidth) / this.itemWidth;
    if (itemsLeft >= this.sliderToScroll) {
      this.position -= this.movePosition;
    } else {
      this.position -= this.itemsLeft * this.itemWidth;
    }

    this.setPosition();
    this.checkBtns();
  }

}

document.addEventListener("DOMContentLoaded", function(event) {
  new MySlider('.intro', {
    slidesToShow: 3,
    sliderToScroll: 3
  });
  new MySlider('.intro1');
  new MySlider('.intro2');
});

.slider {
  width: 600px;
  margin: 30px auto;
  background-color: pink;
  overflow: hidden;
}

.slider-wrapper {
  display: flex;
  background-color: pink;
  transition: transform .2s linear;
}

.slider-slide {
  display: flex;
  background-color: yellow;
  height: 100px;
  align-items: center;
  justify-content: center;
}

.slider-slide:nth-child(3n + 1) {
  background-color: red;
}

.slider-slide:nth-child(3n + 2) {
  background-color: green;
}

.slider-slide:nth-child(3n + 3) {
  background-color: orange;
}

<div class="intro">
  <div class="slider">
    <div class="slider-wrapper">
      <div class="slider-slide">1</div>
      <div class="slider-slide">2</div>
      <div class="slider-slide">3</div>
      <div class="slider-slide">4</div>
      <div class="slider-slide">5</div>
      <div class="slider-slide">6</div>
      <div class="slider-slide">7</div>
      <div class="slider-slide">8</div>
      <div class="slider-slide">9</div>
    </div>
  </div>
  <div class="btns">
    <button class="btn-prev">Назад</button>
    <button class="btn-next">Вперед</button>
  </div>
</div>

<div class="intro1">
  <div class="slider">
    <div class="slider-wrapper">
      <div class="slider-slide">1</div>
      <div class="slider-slide">2</div>
      <div class="slider-slide">3</div>
      <div class="slider-slide">4</div>
      <div class="slider-slide">5</div>
      <div class="slider-slide">6</div>
      <div class="slider-slide">7</div>
      <div class="slider-slide">8</div>
      <div class="slider-slide">9</div>
    </div>
  </div>
  <div class="btns">
    <button class="btn-prev">Назад</button>
    <button class="btn-next">Вперед</button>
  </div>
</div>

<div class="intro2">
  <div class="slider">
    <div class="slider-wrapper">
      <div class="slider-slide">1</div>
      <div class="slider-slide">2</div>
      <div class="slider-slide">3</div>
      <div class="slider-slide">4</div>
      <div class="slider-slide">5</div>
      <div class="slider-slide">6</div>
      <div class="slider-slide">7</div>
      <div class="slider-slide">8</div>
      <div class="slider-slide">9</div>
    </div>
  </div>
  <div class="btns">
    <button class="btn-prev">Назад</button>
    <button class="btn-next">Вперед</button>
  </div>
</div>

БЛОГ НА HUSL

Независимый слайдер с помощью конструктора

Ответы (1 шт):