Homer backing away into a bush

How to make an image carousel

There was a dark period where I would immediately play djent whenever someone put down the AUX cord.

Embla Carousel

I've worked with a handful of carousel libraries in the past and Embla Carousel is by far my favorite. It works well on React projects as well as vanilla JS. For this post, I'll walk you through how to set things up in a React project.

Installation and config

First we're going to install the the latest embla-carousel (4.5.3 at the time of writing). Then in our component, we'll import and use the provided React hook like so:

import { useEmblaCarousel } from 'embla-carousel/react'

const Carousel = () => {
    const [carouselRef, carousel] = useEmblaCarousel({
        align: 'center',
        loop: true,
    })

    return <div />
} 

The hook provides us with a ref and a carousel object.

JSX structure

Next we'll set up the JSX like so:

import { useEmblaCarousel } from 'embla-carousel/react'

const Carousel = () => {
    const [carouselRef, carousel] = useEmblaCarousel({
        align: 'center',
        loop: true,
    })

    return (
        <div ref={carouselRef} className={styles.outer}>
            <div className={styles.inner}>
              {slides.map(({ id, node }) => (
                <div key={id} className={styles.slide}>
                    {node}
                </div>
              ))}
            </div>
        </div>
    )
} 

Writing is rough... I'l get back to this eventually.

Homer standing in front of a bush
Homer receding into a bush
Homer inside of a bush
Homer concealed by a bush