какую библиотеку carousel выбрать (react ts yarn)

Хочу использовать какую нибудь библиотеку для создания компонента, какую библиотеку тут лучше использовать ?

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


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

Автор решения: De.Minov

Выделю двух "кандидатов":

Swiper - "тяжёлый" слайдер, но с кучей функционала, в условиях React'а его тяжесть не будет заметной, т.к. всё разбито на модули.
Для реализации слайдера из примера потребуется использовать модуль Navigation и Pagination Fraction.

Keen-slider - лёгкий, но за это лёгкость "нужно платить", не деньгами, а силами, т.к. дополнительный функционал реализуется вручную.
Вот пример реализации Navigation, а вот Pagination Fraction реализации нет.

Благо реализация простая:
По ссылки с Navigation на реализацию для React+TS, у вас будет всё необходимое:

// Тут будет индекс активного слайда
const [currentSlide, setCurrentSlide] = useState(0); 
const [loaded, setLoaded] = useState(false);
// А отсюда, точнее из instanceRef, получим кол-во слайдов
const [sliderRef, instanceRef] = useKeenSlider<HTMLDivElement>({ ... }); 

return (
  ...
  { (loaded && instanceRef.current) && (
    <div className="pagination-fraction">
      { currentSlide + 1 }
      of
      { instanceRef.current.track.details.slides.length }
    </div>
  ) }
  ...
)
→ Ссылка