Вложенные интерактивные компоненты response-id-swiper - PullRequest
Новая
       24

Вложенные интерактивные компоненты response-id-swiper

0 голосов
/ 28 октября 2019

Я пытаюсь создать слайдер на сайте электронной коммерции. Я хочу добавить некоторые компоненты карты внутри слайдера. Эти компоненты являются интерактивными с возможностью добавления товара в корзину. Но поскольку swiper клонирует свои слайды - часть слайдов не работает так, как я хочу.

Я создал пример с простым вложенным компонентом. 

const Counter = props => {
  const [val, setVal] = React.useState(0);

  return <div>
    <button onClick={e => setVal(val + 1)}>+</button>
    <span>{val}</span>
    <button onClick={e => setVal(val - 1)}>-</button>
  </div>
}

const Swiper = ReactIdSwiper.default;

const params = {
  loop: true,
  slidesPerView: 3,
  spaceBetween: 50
}

ReactDOM.render(<Swiper {... params}>
      {[1,2].map(slide => <div key={slide} class="swiper-slide">Slide {slide} <Counter/></div>)}
    </Swiper>, document.getElementById('app'));

В этом примере 1-й и 2-й счетчики работают, но 3-й (дубликат 1-го) - просто статический фрагмент HTML.

Возможно ли создать слайдер с вложенными компонентами, используя swiper (он уже используется на сайте)? Если нет, есть ли ползунки для работы?

...