Как сделать переключение слайда по шагу в карусели?

Question

[fillpower]

Реализовал динамический вывод количества карточек в карусели. Теперь хотелось бы сделать скролл по определенному шагу, например 2, непонятно как это сделать. Сейчас у меня карточки переключаются по 1.

Вот что я сделал:
https://codesandbox.io/s/crazy-leakey-iucrt

Comments

[Nikolay Matyushkin]

Как насчёт этой библиотеки?

Что касается вашего вопроса, то очевидно, что в методах prevSlide и nextSlide нужно изменить расчёты так, чтобы листалось не по 1 слайду, а по 2.

Что-то типа:

prevSlide = () => {
    if (this.state.currentImageIndex > 0) {
      this.setState({ currentImageIndex: this.state.currentImageIndex - 2});
    }
  };

  nextSlide = () => {
    if (this.state.currentImageIndex < this.state.images.length - 2) {
      this.setState({ currentImageIndex: this.state.currentImageIndex + 2});
    }
  };

[fillpower]

Devilz_1, Да, но отображаться всегда должно столько сколько было передано в пропсах slidesToShow.

Answer 1

[0xD34F]

nextSlide = ({ target: { dataset: { step } } }) => {
  this.setState(({ images: { length }, currentImageIndex: i }) => ({
    currentImageIndex: Math.max(0, Math.min(length - this.props.slidesToShow, i + +step)),
  }));
};

<button onClick={this.nextSlide} data-step="-1">PREV</button>
<button onClick={this.nextSlide} data-step="+2">NEXT</button>

Comments

[fillpower]

Спасибо, вроде бы то что нужно. Сейчас потестирую еще.