Есть ли какая-либо поддержка библиотеки React Carousel, позволяющая загружать больше (получать новые элементы с сервера), когда пользователи переходят к последнему элементу?

Question

У меня есть проект React с каруселью на домашней странице (Использование библиотеки @ brainhubeu / реагировать на карусель).

Количество элементов, поставляемых на карусель, ограничено (10 элементов) в следующем коде:

<Carousel
  arrows
  slidesPerPage={4}
  slidesPerScroll={1}
  autoPlay={1611000}
  infinite={false}
  clickToChange
  centered
  arrowLeft={<FaAngleDoubleLeft className="custom-carousel-control" />}
  arrowRight={<FaAngleDoubleRight className="custom-carousel-control" />}
  addArrowClickHandler
>
  {items}
</Carousel>;

Теперь я хочу загружать больше элементов всякий раз, когда пользователи нажимают или прокручивают до конца карусели ( новые данные будут получены с сервера).

Я пробовал, но не могу найти библиотеку карусели, которая поддерживает / имеет событие, когда пользователь нажимает / прокручивает до конца карусели.

Есть ли какая-либо поддержка библиотеки каруселей, или я должен создать ее вручную?

Answer 1

Я наконец нашел и отвечу. В библиотеке brainhubeu/react-carousel есть событие onChange, но оно вызывается только тогда, когда я передаю ему реквизиты value (это означает, что я должен контролировать значение карусели вручную).

Основываясь на этом значении и точках останова карусели, я могу рассчитать и проверить, чтобы пользователи нажимали / перемещались к последнему элементу карусели, а затем загружали больше элементов с сервера.

let maxVisibleSlide = totalSlide - sliderPerPage + slideOffset;
if (targetSlide >= maxVisibleSlide) {
    // Do load more stuff here
}

Когда

1. sliderPerPage рассчитывается по ширине экрана и точкам прерывания карусели
2. totalSlide - это общее отображение элементов в карусели
3. slideOffset равно 2, по умолчанию в библиотеке каруселей
4. targetSlide, если значение, предоставленное событием onChange (означает элемент карусели, который хотят видеть пользователи)

Извините за мой Engli sh, но надеюсь, что это кому-нибудь поможет!