Create a Robust Product Image Gallery in Next.js

Product images are an integral aspect of succeeding in the e-commerce industry. They can make or break sales. The images we use should demonstrate to the user what the product is and aid them in their decision to make a purchase.

An image gallery is a useful tool that displays various product images to help convert potential customers into paying ones.

This article demonstrates how to create an e-commerce product image carousel with Next.js and Swiper.js.

The completed project is on CodeSandbox. Fork it and run the code.

The source code is also available on GitHub.

Knowledge of React, Next.js, and Swiper.js is required to get the most out of this article. We will use Swiper.js to create the image gallery demo.

We create a Next.js project by running the command below in our terminal.

npx create-next-app product-image-gallery

Next, we navigate into the project directory.

cd product-image-gallery

Then, run the command below to install Swiper.js.

npm install swiper.js
Code language: CSS (css)

The product image gallery component will consist of two components, ImageContainer and CarouselThumbs.

• ImageContainer: This shows the image that is currently on display.

• CarouselThumbs: This holds the thumbnails for each image in the product’s carousel. Clicking on any thumbnails will display that image in the image container.

We will use Swiper.js in different components. Let’s export its components and styles from a single file so we can easily integrate them later.

Create a Slider.js file and paste the code below:

import "swiper/css";
import "swiper/css/navigation";
import "swiper/css/pagination";
import "swiper/css/thumbs";
export { Navigation, Thumbs, Pagination } from "swiper";
export { Swiper, SwiperSlide } from "swiper/react";
Code language: JavaScript (javascript)

The image container component receives a gallery array and a thumbsSwiper through props.

The gallery is an array of objects containing the URL of the images and their IDs. Here’s a sample of the object.

{ id: 1, imgUrl: "/images/Bed-1.webp" }
Code language: CSS (css)

Create a ProductImage.js file and paste the code below:

import Image from "next/image";
import { Swiper, SwiperSlide, Navigation, Thumbs } from "./Slider";

export default function ProductImage({ gallery, thumbsSwiper }) {
  return (
    <div className="relative">
      <Swiper
        modules={[Navigation, Thumbs]}
        thumbs={{ swiper: thumbsSwiper }}
        navigation
      >
        {gallery?.map((item) => (
          <SwiperSlide
            key={`product-gallery-${item.id}`}
            className="flex justify-center items-center"
          >
            <Image
              src={item.imgUrl}
              alt={`Product gallery ${item.id}`}
              width={450}
              height={450}
            />
          </SwiperSlide>
        ))}
      </Swiper>
    </div>
  );
}
Code language: JavaScript (javascript)

In the code above, we performed the following:

• Imported the required Swiper.js modules and components: Swiper, SwiperSlide, Navigation, Thumbs.

• Passed the navigation and thumbs modules to the Swiper component. This way, we can use them in the carousel.

• Set the navigation parameter to true to enable navigation arrows for the carousel.

• Mapped through the gallery and set up the image slider using SwiperSlide and Next.js Image component.

CarouselThumbs accepts the gallery array and setThumbsSwiper method through props.

import Image from "next/image";
import { Swiper, SwiperSlide } from "./Slider";

export default function CarouselThumbs({ gallery, setThumbsSwiper }) {
  return (
    <div className="max-w-md mt-5 lg:mt-8 mx-auto relative lg:pb-2">
      <Swiper
        onSwiper={setThumbsSwiper}
        spaceBetween={20}
        slidesPerView={4}
        watchSlidesProgress={true}
        freeMode={true}
        observer={true}
        observeParents={true}
      >
        {gallery?.map((item) => (
          <SwiperSlide
            key={`product-thumb-gallery-${item.id}`}
            className="flex items-center justify-center cursor-pointer rounded overflow-hidden border border-border-200 border-opacity-75 hover:opacity-75"
          >
            <Image
              src={item.imgUrl}
              alt={`Product thumb gallery ${item.id}`}
              width={80}
              height={80}
            />
          </SwiperSlide>
        ))}
      </Swiper>
    </div>
  );
}
Code language: JavaScript (javascript)

In the code above, we performed the following:

• Configure the behavior and appearance of the thumbnails by passing different values to Swiper’s props.

• Map through the gallery and set up each thumbnail using SwiperSlide and Next.js Image component.

• Pass the imgUrl to the Next.js Image component and set its width and height to 80.

The onSwiper event listener keeps track of the current swiper instance and updates the carousel.

Thus far, we’ve created the CarouselThumbs and ProductImage components. Now, let’s bring it all together.

Update the index.js file with the code below:

import { useState } from "react";
import Head from "next/head";
import CarouselThumbs from "@components/CarouselThumbs";
import ProductImage from "@components/ProductImage";

const gallery = [
  { id: 1, imgUrl: "/images/Bed-1.webp" },
  { id: 2, imgUrl: "/images/Bed-2.webp" },
  { id: 3, imgUrl: "/images/Bed-3.webp" },
  { id: 4, imgUrl: "/images/Oak.webp" },
];

export default function Home() {
  const [thumbsSwiper, setThumbsSwiper] = useState(null);
  
  return (
    <div>
      <Head>
        <title>Product Image Gallery</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>
      
      <ProductImagegallery={gallery} thumbsSwiper={thumbsSwiper} />
      <CarouselThumbs gallery={gallery} setThumbsSwiper={setThumbsSwiper} />
    </div>
  );
}
Code language: JavaScript (javascript)

In the code above, we did the following:

• Created the gallery array.

• Initiated the thumbsSwiper state.

• Passed gallery and thumbsSwiper to the ProductImage component.

• Passed gallery and setThumbsSwiper to the CarouselThumbs component. ## Conclusion

In this article, we learned how to build an e-commerce product image carousel with Next.js and Swiper.js.

Swiper React Docs