133 lines
6.7 KiB
JavaScript
133 lines
6.7 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: '.owl-next',
|
|
prevEl: '.owl-prev',
|
|
},
|
|
|
|
// Pagination
|
|
pagination: {
|
|
// el: '.swiper-pagination',
|
|
clickable: true,
|
|
},
|
|
}
|
|
export default function Slider1() {
|
|
return (
|
|
<>
|
|
<section className="slider style_one">
|
|
<Swiper {...swiperOptions} className="owl_nav_block owl_dots_none theme_carousel">
|
|
<SwiperSlide className="slide-item-content">
|
|
<div className="image-layer" style={{ backgroundImage: 'url(assets/images/slider/banner-1-1.jpg)' }}>
|
|
</div>
|
|
<div className="slide-item content_left">
|
|
<div className="auto-container">
|
|
<div className="row align-items-center">
|
|
<div className="col-md-7">
|
|
<div className="slider_content">
|
|
<div className="bg_image animate_up">
|
|
<img src="/assets/images/slider/shape-1.png" className="img-fluid" alt="ptimage" />
|
|
</div>
|
|
<h6 className="animate_up">
|
|
<img src="/assets/images/slider/Icon-white.png" className="img-fluid" alt="icon" /> Best For Insurance
|
|
</h6>
|
|
<h1 className="animate_left">Insurance<br />
|
|
For Better<br />
|
|
World </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-1-2.jpg)' }}>
|
|
</div>
|
|
<div className="slide-item content_left">
|
|
<div className="auto-container">
|
|
<div className="row align-items-center">
|
|
<div className="col-md-6">
|
|
<div className="slider_content">
|
|
<div className="bg_image animate_down">
|
|
<img src="/assets/images/slider/shape-1.png" className="img-fluid" alt="ptimage" />
|
|
</div>
|
|
<h6 className="animate_up">
|
|
<img src="/assets/images/slider/Icon-white.png" className="img-fluid" alt="icon" /> Best For Insurance
|
|
</h6>
|
|
<h1 className="animate_left">Insurance<br />
|
|
Generation<br />
|
|
To lead </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-1-3.jpg)' }}>
|
|
</div>
|
|
<div className="slide-item content_left">
|
|
<div className="auto-container">
|
|
<div className="row align-items-center">
|
|
<div className="col-md-6">
|
|
<div className="slider_content">
|
|
<div className="bg_image">
|
|
<img src=" assets/images/slider/shape-1.png" className="img-fluid" alt="ptimage" />
|
|
</div>
|
|
<h6 className="animate_up">
|
|
<img src="/assets/images/slider/Icon-white.png" className="img-fluid" alt="icon" /> Best For Insurance
|
|
</h6>
|
|
<h1 className="animate_left"> Life Happy<br />
|
|
Insurance <br />
|
|
Policy </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>
|
|
|
|
|
|
|
|
|
|
|
|
</Swiper>
|
|
<div className="swiper-pagination" />
|
|
<div className="owl-nav">
|
|
<button type="button" role="presentation" className="owl-prev">
|
|
<i className="fi-rs-arrow-small-left" />
|
|
</button>
|
|
<button type="button" role="presentation" className="owl-next">
|
|
<i className="fi-rs-arrow-small-right" />
|
|
</button>
|
|
</div>
|
|
</section>
|
|
</>
|
|
)
|
|
}
|