RSCJS - React Spring Carousel JS

With nav buttons

Example 1

Let's add now some navigation buttons:

1import { useSpringCarousel } from 'react-spring-carousel-js'
2
3const Component = () => {
4  const {
5    carouselFragment,
6    slideToPrevItem,
7    slideToNextItem,
8  } = useSpringCarousel({
9    items: [
10      {
11        id: "CarouselItem-1",
12        renderItem: <CarouselItem background="#2c3e50">Carousel Item 1</CarouselItem>,
13      },
14      {
15        id: "CarouselItem-2",
16        renderItem: <CarouselItem background="#c0392b">Carousel Item 2</CarouselItem>,
17      },
18      {
19        id: "CarouselItem-3",
20        renderItem: <CarouselItem background="#8e44ad">Carousel Item 3</CarouselItem>,
21      },
22      {
23        id: "CarouselItem-4",
24        renderItem: <CarouselItem background="#f39c12">Carousel Item 4</CarouselItem>,
25      },
26    ],
27  });
28
29  return (
30    <CarouselWrapper>
31      <ArrowButton type="prev" onClick={slideToPrevItem} />
32      {carouselFragment}
33      <ArrowButton type="next" onClick={slideToNextItem} />
34    </CarouselWrapper>
35  );
36}
37
Carousel Item 1
Carousel Item 2
Carousel Item 3
Carousel Item 4

As you can see, we first destructure the slideToPrevItem and slideToNextItem methods that we use to trigger the carousel navigation, and then we add our custom components without the need of override anything inside the carousel component. Simple to read and simple to use.

prevBasic examplenextWith loop