Я использую npm пакет pure-react-carousel
следующим образом:
<CarouselProvider
lockOnWindowScroll={true}
naturalSlideWidth={200}
naturalSlideHeight={125}
totalSlides={2}>
<Slider>
<Slide index={0}>...</Slide>
<Slide index={1}>...</Slide>
</Slider>
<div className="dotDiv">
<Dot slide={0} className="dotCust"> ⬤ </Dot>
<Dot slide={1} className="dotCust"> ⬤ </Dot>
</div>
</CarouselProvider>
Очень просто c два слайда с точками в качестве направляющих.
У меня нет смог выяснить две вещи из документов.
а) Как я могу заблокировать прокрутку браузера , если человек прокручивает карусель на мобильном телефоне. Это отличается от lockOnWindowScroll
, который не позволяет прокручивать карусель, когда браузер выполняет прокрутку, но не мешает пользователю физически прокручивать браузер, даже если они не сделали полный переход слайдов.
б) Поскольку у меня есть только два слайда, я не хочу давать возможность соскользнуть с краев. Это означает, что если вы находитесь под номером 2, анимация слайдов для движения вправо отсутствует (отключите это); есть только анимация слайдов для перемещения влево до номера 1. И аналогично для номера 1 для номера два.
Спасибо