0

Как сделать, чтобы на одной странице можно было использовать несколько инстансов класса Slider и они не конфликтовали друг с другом

class Slider {
  constructor(count, page, pageActive, pagerItem, pagerItemActive, timer) {
    this.count = count;
    this.page = page;
    this.pageActive = pageActive;
    this.pagerItem = pagerItem;
    this.pagerItemActive = pagerItemActive;
    this.timer = timer;
  }

  slide(index = this.count) {
    if (this.timer) clearTimeout(this.timer);

    const nextIndex = index % this.count;

    this.pagerItem.forEach(el => el.classList.remove(this.pagerItemActive));
    this.page.forEach(el => el.classList.remove(this.pageActive));

    this.pagerItem[nextIndex].classList.add(this.pagerItemActive);
    this.page[nextIndex].classList.add(this.pageActive);

    this.timer = setTimeout(() => {
      this.slide(index + 1);
    }, 6000);
  }

  nextSlide() {
    let index = this.page.findIndex(el => el.className.includes(this.pageActive));
    index = index + 1 === this.count ? -1 : index;
    this.slide(++index);
  }

  prevSlide() {
    let index = this.page.findIndex(el => el.className.includes(this.pageActive));
    index = index <= 0 ? this.count : index;
    this.slide(--index);
  }
}

const slider__page = [...document.querySelectorAll('.slider__page')];
const page_active = 'slider__page_active';
const slider__pagerItem = [...document.querySelectorAll('.slider__pager-item')];
const pagerItem = '.on-page__pager-item';
const pagerItem_active = 'on-page__pager-item_active';
const slider__btnPrev = '.slider__btn-prev';
const slider__btnNext = '.slider__btn-next';

const sliderNew = new Slider($(slider__pagerItem).length, slider__page, page_active, slider__pagerItem, pagerItem_active);

sliderNew.slide();

$(pagerItem).on('change', function() {
  if ($(this).hasClass(sliderNew.pagerItemActive)) {
    $(this).addClass(pagerItem_active);
  } else {
    $(this).removeClass(pagerItem_active);
  }
});

$(slider__pagerItem).on('click', function() {
  sliderNew.slide($(this).index());
});

$(slider__btnPrev).on('click', () => {
  sliderNew.prevSlide();
});

$(slider__btnNext).on('click', () => {
  sliderNew.nextSlide();
});
.on-page__pager {
  margin-bottom: 30px;
}

.slider__btn-prev,
.slider__btn-next {
  display: inline-block;
  cursor: pointer;
  margin: 0 20px;
}

.on-page__pager-item {
  margin: 6px 0 0;
  display: inline-block;
  height: 54px;
  width: 54px;
  line-height: 50px;
  text-align: center;
  cursor: pointer;
}

.on-page__pager-item_active {
  color: red;
  border: 1px solid #131111;
}

.slider__page {
  display: none;
}

.slider__page_active {
  display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="slider">
  <div class="on-page__pager slider__pager">
    <div class="slider__btn-prev">PREV</div>
    <span class="on-page__pager-item slider__pager-item">01</span>
    <span class="on-page__pager-item slider__pager-item">02</span>
    <span class="on-page__pager-item slider__pager-item">03</span>
    <div class="slider__btn-next">NEXT</div>
  </div>
  <div class="on-page__slider__page slider__page">
    <img src="https://picsum.photos/id/237/400/300" alt="">
  </div>
  <div class="slider__page">
    <img src="https://picsum.photos/id/1018/400/300" alt="">
  </div>
  <div class="slider__page">
    <img src="https://picsum.photos/id/1003/400/300" alt="">
  </div>
</div>

1 ответ 1

0

Можно сделать для каждого слайдера уникальный id и по нему определять все необходимые компоненты слайдера.

class Slider {
  constructor(sliderElement) {
    this._element = sliderElement;

    this.page = sliderElement.find('.slider__page').get();
    this.pageActive = 'slider__page_active';
    this.pagerItem = sliderElement.find('.slider__pager-item').get();
    this.pagerItemActive = 'on-page__pager-item_active';
    this.count = sliderElement.find('.on-page__pager-item').length;

    this.btnPrev = sliderElement.find('.slider__btn-prev');
    this.btnNext = sliderElement.find('.slider__btn-next');

    this.timer = 0;
    
    this._init();
  }

  slide(index = this.count) {
    if (this.timer) clearTimeout(this.timer);

    const nextIndex = index % this.count;

    this.pagerItem.forEach(el => el.classList.remove(this.pagerItemActive));
    this.page.forEach(el => el.classList.remove(this.pageActive));

    this.pagerItem[nextIndex].classList.add(this.pagerItemActive);
    this.page[nextIndex].classList.add(this.pageActive);

    this.timer = setTimeout(() => {
      this.slide(index + 1);
    }, 6000);
  }
  
   _init() {
    const self = this;
    this._element.find('.slider__pager-item').on('click', function() {
      self.slide($(this).index("span"));
    });

    $(this.btnPrev).on('click', () => {
      this.prevSlide();
    });

    $(this.btnNext).on('click', () => {
      this.nextSlide();
    });
    
    this.slide();
  }

  nextSlide() {
    let index = this.page.findIndex(el => el.className.includes(this.pageActive));
    index = index + 1 === this.count ? -1 : index;
    this.slide(++index);
  }

  prevSlide() {
    let index = this.page.findIndex(el => el.className.includes(this.pageActive));
    index = index <= 0 ? this.count : index;
    this.slide(--index);
  }
}

const slider2 = new Slider($('#slider--1'));
const slider1 = new Slider($('#slider--2'));
.on-page__pager {
  margin-bottom: 30px;
}

.slider__btn-prev,
.slider__btn-next {
  display: inline-block;
  cursor: pointer;
  margin: 0 20px;
}

.on-page__pager-item {
  margin: 6px 0 0;
  display: inline-block;
  height: 54px;
  width: 54px;
  line-height: 50px;
  text-align: center;
  cursor: pointer;
}

.on-page__pager-item_active {
  color: red;
  border: 1px solid #131111;
}

.slider__page {
  display: none;
}

.slider__page_active {
  display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="slider" id="slider--1">
  <div class="on-page__pager slider__pager">
    <div class="slider__btn-prev">PREV</div>
    <span class="on-page__pager-item slider__pager-item">01</span>
    <span class="on-page__pager-item slider__pager-item">02</span>
    <span class="on-page__pager-item slider__pager-item">03</span>
    <div class="slider__btn-next">NEXT</div>
  </div>
  <div class="on-page__slider__page slider__page">
    <img src="https://picsum.photos/id/237/340/300" alt="">
  </div>
  <div class="slider__page">
    <img src="https://picsum.photos/id/1018/340/300" alt="">
  </div>
  <div class="slider__page">
    <img src="https://picsum.photos/id/1003/340/300" alt="">
  </div>
</div>

<div class="slider" id="slider--2">
  <div class="on-page__pager slider__pager">
    <div class="slider__btn-prev">PREV</div>
    <span class="on-page__pager-item slider__pager-item">01</span>
    <span class="on-page__pager-item slider__pager-item">02</span>
    <span class="on-page__pager-item slider__pager-item">03</span>
    <div class="slider__btn-next">NEXT</div>
  </div>
  <div class="on-page__slider__page slider__page">
    <img src="https://picsum.photos/id/247/340/300" alt="">
  </div>
  <div class="slider__page">
    <img src="https://picsum.photos/id/1010/340/300" alt="">
  </div>
  <div class="slider__page">
    <img src="https://picsum.photos/id/1002/340/300" alt="">
  </div>
</div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.