RSCJS - React Spring Carousel JS

Use spring carousel

Example 1

To start using the carousel, you can do the following:

1import { useSpringCarousel } from 'react-spring-carousel-js'
2
3const Component = () => {
4  const { carouselFragment } = useSpringCarousel({
5    items: [
6      {
7        id: 'item-1',
8        renderItem: <div>My item 1</div>,
9      },
10      {
11        id: 'item-2',
12        renderItem: <div>My item 2</div>,
13      }
14    ]
15  })
16
17  return (
18    <div css={css'
19      padding: 1.6rem;
20      border-radius: 8px;
21      box-shadow: 0 1.9px 19.2px -12px rgba(0, 0, 0, 0.105),
22        0 8px 30px -10px rgba(0, 0, 0, 0.21);
23    '}>
24      {carouselFragment}
25    </div>
26  )
27}
28

And this is the result:

Item 1
Item 2

Yes, it doesn't look great at all, but it's just a start. Let's try to add some styles and to compose a bit our carousel:

Example 2

1import { useSpringCarousel } from 'react-spring-carousel-js'
2
3const Component = () => {
4  const { carouselFragment } = useSpringCarousel({
5    withThumbs: false,
6    items: [
7      {
8        id: "CarouselItem-1",
9        renderItem: <CarouselItem background="#2c3e50">Carousel Item 1</CarouselItem>,
10      },
11      {
12        id: "CarouselItem-2",
13        renderItem: <CarouselItem background="#c0392b">Carousel Item 2</CarouselItem>,
14      },
15      {
16        id: "CarouselItem-3",
17        renderItem: <CarouselItem background="#8e44ad">Carousel Item 3</CarouselItem>,
18      },
19      {
20        id: "CarouselItem-4",
21        renderItem: <CarouselItem background="#f39c12">Carousel Item 4</CarouselItem>,
22      },
23    ],
24  });
25
26  return (
27    <PlaygroundWrapper>{carouselFragment}</PlaygroundWrapper>
28  );
29}
30

Please fel free to grab and play with it.

Carousel Item 1
Carousel Item 2
Carousel Item 3
Carousel Item 4

Note: keep in mind that the carousel will always fill the available space of the wrapper that you'll provide. For the examples, i'll always use a wrapper with 500px height and all the childs will fill that space.

prevInstallationnextWith nav buttons