Implementing Image Carousel in NextJS

Abijith26 — Sat, 30 Mar 2024 10:33:41 +0000

File: page.tsx

import React from "react";
import FeaturedScreen from "./components/FeaturedScreen/FeaturedScreen";
import Header from "./components/Header/Header";

export default function Home() {
  return (
    <main>
      <Header />
      <FeaturedScreen />
    </main>
  );
}

File: FeaturedContent.js

const ImageDetails = [
  {
    id: 1,
    movieName: "KAHAANI",
    language: "Hindi",
    img: "/IC-1.jpg",
  },
  {
    id: 2,
    movieName: "URI",
    language: "Hindi",
    img: "/IC-2.jpg",
  },
  {
    id: 3,
    movieName: "SPIDERMAN - NO WAY HOME",
    language: "English",
    img: "/IC-3.jpg",
  },
];

export { ImageDetails };

File: FeaturedScreen.tsx

import { Carousel } from "react-responsive-carousel";
import "react-responsive-carousel/lib/styles/carousel.min.css"; // requires a loader
import { ImageDetails } from "../../../public/FeaturedContent.js";
// Source for Image and its information

export default function FeaturedScreen() {
  return (
    <div>
      <Carousel autoPlay>
        {ImageDetails.map((movie) => (
          <div key={movie.id}>
            <img src={movie.img} alt="carouselImage-1" />
          </div>
        ))}
      </Carousel>
    </div>
  );
}

I am trying to implement a image carousel. but i am getting this error.
can anyone help me with this?

DEV Community: Abijith26

Implementing Image Carousel in NextJS