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 loaderimport { ImageDetails } from "../../../public/FeaturedContent.js";// Source for Image and its informationexport 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)
Subscribe
For further actions, you may consider blocking this person and/orreporting abuse
