How to Create an Autoplay or Infinite Carousel in Next.js using Embla Carousel and Tailwind CSS

Introduction

Carousels are popular interactive components in web design, commonly used to display multiple items in a limited space. In this article, we'll explore how to create an autoplay or infinite carousel in a Next.js project, using the Embla Carousel library for its simplicity and flexibility, and Tailwind CSS for quick and responsive styling.

Setting up the Next.js Environment

1. First, create a new Next.js project:

   1npx create-next-app@latest my-nextjs-carousel
   2cd my-nextjs-carousel
   3

2. Install Embla Carousel and Tailwind CSS:

   1npm install embla-carousel react-embla-carousel
   2npm install -D tailwindcss postcss autoprefixer
   3npx tailwindcss init -p
   4

Integrating Embla Carousel

3. Create a Carousel.js component:

   1import { useEmblaCarousel } from 'embla-carousel/react';
   2
   3const Carousel = ({ children }) => {
   4  const [emblaRef, emblaApi] = useEmblaCarousel({ loop: true });
   5
   6  return (
   7    <div className="embla" ref={emblaRef}>
   8      <div className="embla__container">
   9        {children.map((child, index) => (
   10          <div className="embla__slide" key={index}>
   11            {child}
   12          </div>
   13        ))}
   14      </div>
   15    </div>
   16  );
   17};
   18export default Carousel;
   19

Styling with Tailwind CSS

4. Add Tailwind classes in your global CSS file (styles/globals.css):

   1.embla {
   2  overflow: hidden;
   3}
   4.embla__container {
   5  display: flex;
   6}
   7.embla__slide {
   8  position: relative;
   9  flex: 0 0 100%;
   10  padding: 1rem;
   11}
   12

Implementing the Carousel in your Component

5. Use the Carousel component in any Next.js page or component:

   1import Carousel from '../components/Carousel';
   2
   3const Home = () => {
   4  return (
   5    <Carousel>
   6      <img src="/image1.jpg" alt="Image 1" />
   7      <img src="/image2.jpg" alt="Image 2" />
   8      <img src="/image3.jpg" alt="Image 3" />
   9    </Carousel>
   10  );
   11};
   12export default Home;
   13

Conclusion

With these steps, you can easily integrate an autoplay or infinite carousel into your Next.js project, using Embla Carousel for carousel logic and Tailwind CSS for quick and responsive styling. This combination offers great flexibility and efficiency, allowing you to create elegant and functional carousels with ease.