import dynamic from "next/dynamic"; import Image from "next/image"; import React from "react"; import { Button } from "react-bootstrap"; const OwlCarousel = dynamic(() => import("react-owl-carousel"), { ssr: false }); const LetDiscover = () => { const letDiscoverData = [ { image: "/images/discover/01.png", title: "All" }, { image: "/images/discover/02.png", title: "Art & History" }, { image: "/images/discover/03.png", title: "Experiential Dining " }, { image: "/images/discover/04.png", title: "Family" }, { image: "/images/discover/05.png", title: "Fitness" }, { image: "/images/discover/06.png", title: "Performing Arts" }, { image: "/images/discover/01.png", title: "Pop Ups" }, { image: "/images/discover/02.png", title: "Tour" }, { image: "/images/discover/03.png", title: "Classes" }, { image: "/images/discover/04.png", title: "Wellness" }, ]; const letDiscover = { responsive: { 0: { items: 2, margin: 20 }, 450: { items: 3 }, 600: { items: 5 }, 1000: { items: 6 } } }; return ( <> <section className="let-discover-session"> <div className="container"> <div className="row"> <div className="col-12"> <div className="head-btn"> <div className="head01"> <div className="title">Let’s </div> <h2>Discover</h2> </div> <div className="view-all-btn"> <Button variant="primary">View All</Button> </div> </div> </div> </div> <div className="row"> <div className="col-12"> <div className="let-discover-carousal carousal-c"> <OwlCarousel className="owl-theme owl-custom01" margin={50} items={6} dots={false} nav={true} responsive={letDiscover.responsive} autoplay={false} autoplayTimeout={5000} center={false} loop={false} touchDrag={true} > {letDiscoverData && letDiscoverData.map((data, index) => { return ( <div className="item"> <a href=""> <span className="image-container"> <Image layout="fill" alt="" className="image img-fluid" src={data.image} /> </span> <div className="title">{data.title}</div> </a> </div> ); })} </OwlCarousel> </div> </div> </div> </div> </section> </> ); }; export default LetDiscover;