какую библиотеку carousel выбрать (react ts yarn)
Хочу использовать какую нибудь библиотеку для создания компонента, какую библиотеку тут лучше использовать ?
Ответы (1 шт):
Выделю двух "кандидатов":
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>
) }
...
)