import React from "react"; import { Swiper, SwiperSlide } from "swiper/react"; import { motion } from "framer-motion"; import { fadeIn, zoomIn, slideFromLeft, slideFromRight } from "../animationvariants.js"; import { Pagination, Navigation, Autoplay } from "swiper/modules"; // Import Swiper styles import "swiper/css"; import "swiper/css/pagination"; import "swiper/css/navigation"; import Image from "next/image.js"; const Banner = () => { return ( <> <section className="home-banner"> <div> <Swiper slidesPerView={1} autoplay={{ delay: 9000, disableOnInteraction: false }} spaceBetween={10} navigation={true} pagination={{ clickable: true }} // breakpoints={{ // 640: { // slidesPerView: 2, // spaceBetween: 20 // }, // 768: { // slidesPerView: 4, // spaceBetween: 40 // }, // 1024: { // slidesPerView: 5, // spaceBetween: 50 // } // }} modules={[Pagination, Navigation, Autoplay]} className="mySwiper01" > <SwiperSlide> <div className="slider-item slider-item-01"> <div className="home-banner-bg"> <span className="image-container hide-on-mobile"> <Image layout="fill" className="image img-fluid" alt="" src="/images/home-banner/01.jpg" /> </span> <span className="image-container hide-on-desktop"> <Image layout="fill" className="image img-fluid" alt="" src="/images/home-banner/01-m.jpg" /> </span> </div> <div className="d-table"> <div className="d-table-cell"> <div className="container"> <motion.div variants={slideFromRight(0.4)} initial={"hidden"} whileInView={"show"} viewport={{ once: false, amount: 0.2 }}> <div className="row"> <div className="col-md-6"> <div className="slider-text"> <div className="banner-title"> <div className="banner-txt"> <h1>Lorem ipsum dolor sit amet</h1> <div className="title">WELCOME TO THE WORLD OF TRAVEL</div> <div className="disc"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud. </div> </div> </div> <div className="common-btn"> <a className="btn btn-primary" href="/allergic-rhinitis"> Explore Now </a> </div> </div> </div> </div> </motion.div> </div> </div> </div> </div> </SwiperSlide> <SwiperSlide> <div className="slider-item slider-item-02"> <div className="home-banner-bg"> <span className="image-container hide-on-mobile"> <Image layout="fill" className="image img-fluid" alt="" src="/images/home-banner/02.jpg" /> </span> <span className="image-container hide-on-desktop"> <Image layout="fill" className="image img-fluid" alt="" src="/images/home-banner/02.jpg" /> </span> </div> <div className="d-table"> <div className="d-table-cell"> <div className="container"> <motion.div variants={slideFromRight(0.4)} initial={"hidden"} whileInView={"show"} viewport={{ once: false, amount: 0.2 }}> <div className="row"> <div className="col-md-6"> <div className="slider-text"> <div className="banner-title"> <div className="banner-txt"> <h1>Lorem ipsum dolor sit amet</h1> <div className="title">WELCOME TO THE WORLD OF TRAVEL</div> <div className="disc"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud. </div> </div> </div> <div className="common-btn"> <a className="btn btn-primary" href="/allergic-rhinitis"> Explore Now </a> </div> </div> </div> </div> </motion.div> </div> </div> </div> </div> </SwiperSlide> <SwiperSlide> <div className="slider-item slider-item-03"> <div className="home-banner-bg"> <span className="image-container hide-on-mobile"> <Image layout="fill" className="image img-fluid" alt="" src="/images/home-banner/03.jpg" /> </span> <span className="image-container hide-on-desktop"> <Image layout="fill" className="image img-fluid" alt="" src="/images/home-banner/03.jpg" /> </span> </div> <div className="d-table"> <div className="d-table-cell"> <div className="container"> <motion.div variants={slideFromRight(0.4)} initial={"hidden"} whileInView={"show"} viewport={{ once: false, amount: 0.2 }}> <div className="row"> <div className="col-md-6"> <div className="slider-text"> <div className="banner-title"> <div className="banner-txt"> <h1>Lorem ipsum dolor sit amet</h1> <div className="title">WELCOME TO THE WORLD OF TRAVEL</div> <div className="disc"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud. </div> </div> </div> <div className="common-btn"> <a className="btn btn-primary" href="/allergic-rhinitis"> Explore Now </a> </div> </div> </div> </div> </motion.div> </div> </div> </div> </div> </SwiperSlide> <SwiperSlide> <div className="slider-item slider-item-04"> <div className="home-banner-bg"> <span className="image-container hide-on-mobile"> <Image layout="fill" className="image img-fluid" alt="" src="/images/home-banner/04.jpg" /> </span> <span className="image-container hide-on-desktop"> <Image layout="fill" className="image img-fluid" alt="" src="/images/home-banner/04.jpg" /> </span> </div> <div className="d-table"> <div className="d-table-cell"> <div className="container"> <motion.div variants={slideFromRight(0.4)} initial={"hidden"} whileInView={"show"} viewport={{ once: false, amount: 0.2 }}> <div className="row"> <div className="col-md-6"> <div className="slider-text"> <div className="banner-title"> <div className="banner-txt"> <h1>Lorem ipsum dolor sit amet</h1> <div className="title">WELCOME TO THE WORLD OF TRAVEL</div> <div className="disc"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud. </div> </div> </div> <div className="common-btn"> <a className="btn btn-primary" href="/allergic-rhinitis"> Explore Now </a> </div> </div> </div> </div> </motion.div> </div> </div> </div> </div> </SwiperSlide> </Swiper> </div> </section> </> ); }; export default Banner;