A carousel with zooming active slide using react-spring-carousel
Tags: react, carousel, reactspring, reactspringcarousel
Published: 2022-12-11 05:11:13

Hello there,

If you are a frontend developer, carousel is unavoidable. You must have faced with it at least once for sure :D So do I.

But thanks God, it is now absolutely effortless to create a carousel from many libraries such as [Swiper](https://swiperjs.com/), [Slick](https://kenwheeler.github.io/slick/), [Owl Carousel](https://owlcarousel2.github.io/OwlCarousel2/),...

Currently i just discover a new one, which is [React Spring Carousel](https://react-spring-carousel.emilianobucci.com/) created by **Emiliano Bucci.**

The final result:

![React spring carousel zooming center](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m0r3y5ri2so8kpxgwzx5.gif)

### 1. Introduction

I can not agree more with the author's motivation, which you will probably have struggles with customizing the animations, logic or the behaviors of the carousel,.. However, the [React Spring Carousel](https://react-spring-carousel.emilianobucci.com/) can help tackle it :) 

> React Spring Carousel is intuitive, simple and efficient.



### 2. Carousel types

The author offers 2 options for creating a carousel which are:

**useSpringCarousel**
> With this carousel you'll be able to cover most of your UI needs. You'll be able to create stunning carousels!

**useTransitionCarousel**
> With this hook, you'll be able to create beautiful slideshows. This solution is more specific, but not less important!


I will go for the first one **useSpringCarousel** in this blog.


### 3. Let's get started coding

In this example i also use [Tailwind](https://tailwindcss.com/) for styling, if you are not familiar with it, you should have a look to check it out.

First, i create a simple mock item list:

```
const mockItems = [
        {
            id: 'item-1',
            title: 'slide 1'
        },
        {
            id: 'item-2',
            title: 'slide 2'
        },
        {
            id: 'item-3',
            title: 'slide 3'
        }
    ]
```

After that i am using `useSpringCarousel` hook to create a simple UI slide

```
const {
        carouselFragment,
    } = useSpringCarousel({
        items: mockItems.map((item) => {
            return {
                ...item,
                renderItem: (
                    <div
                        className={`grid aspect-[2] w-full place-items-center text-2xl text-white bg-violet-500`}>
                        {item.title}
                    </div>
                )
            }
        })
    })
```

Here is what i get:


![slider carousel react spring carousel](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/of6bggrg0k78zire249s.png)

To make the carousel more attractive, i use other options from the library to make it, like adding gap between slides, navigation, looping,..

Here is what the current code looks like:

```
    const {
        carouselFragment,
        slideToPrevItem, // go back to previous slide
        slideToNextItem, // move to next slide
    } = useSpringCarousel({
        itemsPerSlide: 3, // number of slides per view
        withLoop: true, // will loop
        initialStartingPosition: 'center', // the active slide will be at the center
        gutter: 24, // to add the space between slides
        items: mockItems.map((item) => {
            return {
                ...item,
                renderItem: (
                    <div
                        className={`grid aspect-[2] w-full place-items-center text-2xl text-white bg-violet-500`}>
                        {item.title}
                    </div>
                )
            }
        })
    })
```

And also, we want the navigation to work, we need to add it to the markup, (for the SVG, i just quickly copy it from [Hero Icons](https://heroicons.com/)):

```
 <div className="py-20 relative">
            <button onClick={slideToPrevItem} className="absolute top-1/2 -translate-y-1/2 -translate-x-full left-[10%]">
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth="1.5" stroke="currentColor" className="w-6 h-6">
                    <path strokeLinecap="round" strokeLinejoin="round" d="M15.75 19.5L8.25 12l7.5-7.5" />
                </svg>
            </button>
            <div className="mx-auto w-[80%] overflow-x-clip py-[4%] relative">
                {carouselFragment}
            </div>
            <button onClick={slideToNextItem} className="absolute top-1/2 -translate-y-1/2 translate-x-full right-[10%]">
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth="1.5" stroke="currentColor" className="w-6 h-6">
                    <path strokeLinecap="round" strokeLinejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
                </svg>
            </button>
        </div>
```

Next, for the zooming center slide, i create a state to watch the current active slide:

```
    const [currentSlide, setCurrentSlide] = useState(mockItems[0].id)
```

After that, i am gonna use another hook 
 called `useListenToCustomEvent` destructured from `useSpringCarousel` to apply animation when the slide is changed

```
    useListenToCustomEvent((event) => {
        if (event.eventName === 'onSlideStartChange') {
            setCurrentSlide(event?.nextItem?.id)
        }
    })
```

And finally, i add the condition for active slide to the items

```
items: mockItems.map((item) => {
            return {
                ...item,
                renderItem: (
                    <div
                        className={`grid aspect-[2] w-full place-items-center text-2xl text-white transition-all duration-700 ${currentSlide === item.id
                            ? 'z-10 scale-150 bg-yellow-600'
                            : 'bg-violet-500'
                            }`}>
                        {item.title}
                    </div>
                )
            }
        })
```

And BAM, we make it, a very smooth transition, eye-catching and easy to do :D

The whole complete component code is [here](https://github.com/PhanDangKhoa96/react-spring-example/blob/main/src/components/Carousel/react-spring-carousel.jsx).

Also you can check out [the whole document](https://react-spring-carousel.emilianobucci.com/docs) from Emiliano Bucci to create wonderful things. Cheers!