86 lines
4.1 KiB
JavaScript
86 lines
4.1 KiB
JavaScript
'use client'
|
|
import React from 'react';
|
|
import Link from "next/link"
|
|
import { Autoplay, Navigation, Pagination } from "swiper/modules"
|
|
import { Swiper, SwiperSlide } from "swiper/react"
|
|
|
|
const swiperOptions = {
|
|
modules: [Autoplay, Pagination, Navigation],
|
|
slidesPerView: 1,
|
|
spaceBetween: 0,
|
|
autoplay: {
|
|
delay: 7000,
|
|
disableOnInteraction: false,
|
|
},
|
|
loop: true,
|
|
|
|
// Navigation
|
|
navigation: {
|
|
nextEl: '.h1n',
|
|
prevEl: '.h1p',
|
|
},
|
|
|
|
// Pagination
|
|
pagination: {
|
|
el: '.swiper-pagination',
|
|
clickable: true,
|
|
},
|
|
|
|
|
|
|
|
}
|
|
|
|
export default function Banner() {
|
|
return (
|
|
<section className="banner-style-two p_relative">
|
|
<Swiper {...swiperOptions} className="banner-carousel owl-theme owl-carousel owl-nav-none owl-dots-none">
|
|
<SwiperSlide className="slide-item">
|
|
<div className="bg-layer" style={{ backgroundImage: 'url(assets/images/banner/banner-1.jpg)' }}></div>
|
|
<figure className="image-layer"><img src="assets/images/banner/banner-img-2.png" alt="" /></figure>
|
|
<div className="auto-container">
|
|
<div className="content-box">
|
|
<span className="upper-text">The Art of Healthcare Starts Right Now</span>
|
|
<h2>We offer <span>complete</span> Healthcare services.</h2>
|
|
<p>It is not only the medicine that cures and recovers your health earlier, it is the Healthcare team who loves the art of treatment with love.</p>
|
|
<div className="btn-box">
|
|
<Link href="index-2" className="theme-btn btn-one"><span>Explore Our Service</span></Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</SwiperSlide>
|
|
{/* Repeat the above structure for each slide-item as needed */}
|
|
<SwiperSlide className="slide-item">
|
|
<div className="bg-layer" style={{ backgroundImage: 'url(assets/images/banner/banner-1.jpg)' }}></div>
|
|
<figure className="image-layer"><img src="assets/images/banner/banner-img-2.png" alt="" /></figure>
|
|
<div className="auto-container">
|
|
<div className="content-box">
|
|
<span className="upper-text">The Art of Healthcare Starts Right Now</span>
|
|
<h2>We offer <span>complete</span> Healthcare services.</h2>
|
|
<p>It is not only the medicine that cures and recovers your health earlier, it is the Healthcare team who loves the art of treatment with love.</p>
|
|
<div className="btn-box">
|
|
<Link href="index-2" className="theme-btn btn-one"><span>Explore Our Service</span></Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</SwiperSlide>
|
|
{/* Repeat the above structure for each slide-item as needed */}
|
|
<SwiperSlide className="slide-item">
|
|
<div className="bg-layer" style={{ backgroundImage: 'url(assets/images/banner/banner-1.jpg)' }}></div>
|
|
<figure className="image-layer"><img src="assets/images/banner/banner-img-2.png" alt="" /></figure>
|
|
<div className="auto-container">
|
|
<div className="content-box">
|
|
<span className="upper-text">The Art of Healthcare Starts Right Now</span>
|
|
<h2>We offer <span>complete</span> Healthcare services.</h2>
|
|
<p>It is not only the medicine that cures and recovers your health earlier, it is the Healthcare team who loves the art of treatment with love.</p>
|
|
<div className="btn-box">
|
|
<Link href="index-2" className="theme-btn btn-one"><span>Explore Our Service</span></Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</SwiperSlide>
|
|
</Swiper>
|
|
</section>
|
|
);
|
|
};
|
|
|