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?
Top comments (0)