148 lines
7.6 KiB
JavaScript
148 lines
7.6 KiB
JavaScript
import Link from "next/link"
|
||
import { Autoplay, Navigation, Pagination } from "swiper"
|
||
import { Swiper, SwiperSlide } from "swiper/react"
|
||
|
||
const swiperOptions = {
|
||
modules: [Autoplay, Pagination, Navigation],
|
||
slidesPerView: 1,
|
||
spaceBetween: 0,
|
||
autoplay: {
|
||
delay: 2500,
|
||
disableOnInteraction: false,
|
||
},
|
||
loop: true,
|
||
|
||
// Navigation
|
||
navigation: {
|
||
nextEl: '.slick-next',
|
||
prevEl: '.slick-prev',
|
||
},
|
||
|
||
// Pagination
|
||
pagination: {
|
||
el: '.swiper-pagination',
|
||
clickable: true,
|
||
},
|
||
}
|
||
export default function Slider4() {
|
||
return (
|
||
<>
|
||
<div className="slider style_five">
|
||
<Swiper {...swiperOptions} className="tab_content_slick">
|
||
<SwiperSlide className="slide-item-content">
|
||
<div className="image-layer" style={{ backgroundImage: 'url(assets/images/slider/banner-5-1.jpg)' }} />
|
||
<div className="slide-item content_left">
|
||
<div className="auto-container">
|
||
<div className="row align-items-center">
|
||
<div className="col-md-12 text-center">
|
||
<div className="slider_content">
|
||
<h6 className="animate_up">
|
||
Welcome To Vankine
|
||
</h6>
|
||
<h1 className="animate_left">A Moments Of Caring <br />
|
||
Your Dream Home </h1>
|
||
<div className="button_all animate_down">
|
||
<Link href="#" className="theme_btn color_white animated">Read
|
||
More</Link>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</SwiperSlide>
|
||
<SwiperSlide className="slide-item-content">
|
||
<div className="image-layer" style={{ backgroundImage: 'url(assets/images/slider/banner-5-2.jpg)' }} />
|
||
<div className="slide-item content_left">
|
||
<div className="auto-container">
|
||
<div className="row align-items-center">
|
||
<div className="col-md-12 text-center">
|
||
<div className="slider_content">
|
||
<h6 className="animate_up">
|
||
Better Insurance
|
||
</h6>
|
||
<h1 className="animate_left"> Find Health Coverage <br />
|
||
that's Right for you </h1>
|
||
<div className="button_all animate_down">
|
||
<Link href="#" className="theme_btn color_white animated">Read
|
||
More</Link>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</SwiperSlide>
|
||
<SwiperSlide className="slide-item-content">
|
||
<div className="image-layer" style={{ backgroundImage: 'url(assets/images/slider/banner-5-3.jpg)' }} />
|
||
<div className="slide-item content_left">
|
||
<div className="auto-container">
|
||
<div className="row align-items-center">
|
||
<div className="col-md-12 text-center">
|
||
<div className="slider_content">
|
||
<h6 className="animate_up">
|
||
Better Insurance
|
||
</h6>
|
||
<h1 className="animate_left"> Don’t Call it a Dream,<br />
|
||
Call it a Plan. </h1>
|
||
<div className="button_all animate_down">
|
||
<Link href="#" className="theme_btn color_white animated">Read
|
||
More</Link>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</SwiperSlide>
|
||
<SwiperSlide className="slide-item-content">
|
||
<div className="image-layer" style={{ backgroundImage: 'url(assets/images/slider/banner-5-4.jpg)' }} />
|
||
<div className="slide-item content_left">
|
||
<div className="auto-container">
|
||
<div className="row align-items-center">
|
||
<div className="col-md-12 text-center">
|
||
<div className="slider_content">
|
||
<h6 className="animate_up">
|
||
Better Insurance
|
||
</h6>
|
||
<h1 className="animate_left"> Build Amazing Life <br />
|
||
With Insurance </h1>
|
||
<div className="button_all animate_down">
|
||
<Link href="#" className="theme_btn color_white animated">Read
|
||
More</Link>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</SwiperSlide>
|
||
<div>
|
||
<button type="button" className="slick-prev slick-arrow" style={{}}><span className="fi-rs-arrow-small-left" /></button>
|
||
<button type="button" className="slick-next slick-arrow" style={{}}><span className="fi-rs-arrow-small-right" /></button>
|
||
</div>
|
||
</Swiper>
|
||
{/* <div className="tab_postion_absolute">
|
||
<div className="container">
|
||
<div className="slider tab_slick">
|
||
<div className="title">
|
||
<h3>House Insurance</h3>
|
||
</div>
|
||
<div className="title">
|
||
<h3>Medical Insurance</h3>
|
||
</div>
|
||
<div className="title">
|
||
<h3>Travel Insurance</h3>
|
||
</div>
|
||
<div className="title">
|
||
<h3>Life Insurance</h3>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div> */}
|
||
</div>
|
||
|
||
</>
|
||
)
|
||
}
|