RCarousel

Пример

Для кастомных стилей делаем отдельный файл: import sliderStyles from './slider.scss'; Названия классов в этом scss-файле должны совпадать с оригинальными: .root, .inner, .item, .pagination, .paginationItem, .paginationItemActive, .buttonPrev, .buttonNext

<RCarousel
  classNames={sliderStyles}
  gap={20}
  pagination
  prevNext
>
  <article><p>test title</p></article>
  <article><p>test title 2</p></article>
  <article><p>test title 3</p></article>
</RCarousel>

FAQ

В: Как сделать чтобы был только 1 слайд на экран?
О: Это можно сделать стилями для .item:

.item {
  width: 100vw;
  display: flex;
  flex-shrink: 0;
  margin-left: 0 !important;
}

В: Как кастомизировать next\prev кнопки?
О: Это можно сделать стилями для .buttonNext, .buttonPrev:

.buttonPrev {
  left: 16px;

  &:after {
    content: '\2039';
  }
}

.buttonNext {
  right: 16px;

  &:after {
    content: '\203A';
  }
}

API

gap - отступ между слайдами (default: 0)
pagination - пагинация (default: false)
prevNext - кнопки "вперед/назад" (default: false)
stopPropagation - запрет всплытия событий (вложенные слайдеры, default: false)
onInit - коллбек, вызывается после завершения инициализации слайдера (default: emptyFunction)
onSwiped - коллбек, вызывается после переключения слайда (default: emptyFunction)
onClick - коллбек, вызывается после клика по слайду (default: emptyFunction)
loop - бесконечная карусель (default: false)
currentIndex - индекс активного слайда (default: 0)
disableCheckpoints - отключение эффекта "притягивания" к ближайшему слайду (default: false)
isMobile - включение тач-ивентов для мобилы (default: false)
isRelatedInnerSlider - является ли слайдер взаимосвязанным с внешним (т.е. при перетягивании крайних слайдов внутреннего, нужно ли перетягивать внешний) (default: false)
classNames - набор стилей для кастомизации: (default: объект со всеми ключами, значение которых '')

• .root - враппер
• .inner - контейнер для слайдов
• .item - элемент слайдера
• .pagination - контейнер пагинации
• .paginationItem - элемент пагинатора
• .paginationItemActive - активный элемент пагинатора
• .buttonNext - кнопка "следующий слайд"
• .buttonPrev - кнопка "предыдущий слайд"