104 lines
4.1 KiB
JavaScript
104 lines
4.1 KiB
JavaScript
|
||
'use client'
|
||
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: 2500,
|
||
disableOnInteraction: false,
|
||
},
|
||
loop: true,
|
||
|
||
// Navigation
|
||
navigation: {
|
||
nextEl: '.h1n',
|
||
prevEl: '.h1p',
|
||
},
|
||
|
||
// Pagination
|
||
pagination: {
|
||
el: '.swiper-pagination',
|
||
clickable: true,
|
||
},
|
||
}
|
||
|
||
|
||
export default function Banner() {
|
||
return (
|
||
<>
|
||
|
||
|
||
{/* Banner Section */}
|
||
<section className="banner-section-three">
|
||
<Swiper {...swiperOptions} className="main-slider-carousel ">
|
||
|
||
{/* Slide */}
|
||
<SwiperSlide>
|
||
<div className="slide" style={{ backgroundImage: 'url(assets/images/main-slider/1.jpg)' }} >
|
||
<div className="auto-container">
|
||
{/* Content Column */}
|
||
<div className="content-box">
|
||
<div className="box-inner">
|
||
<div className="category">smoothie</div>
|
||
<h3><Link href="news-detail">Broad bean and goats’ cheese bruschetta</Link></h3>
|
||
<ul className="post-info">
|
||
<li>May 21, 2021</li>
|
||
<li>2 Comments</li>
|
||
<li><Link href="news-detail">Share</Link></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</SwiperSlide>
|
||
{/* Slide */}
|
||
<SwiperSlide>
|
||
<div className="slide" style={{ backgroundImage: 'url(assets/images/main-slider/2.jpg)' }} >
|
||
<div className="auto-container">
|
||
{/* Content Column */}
|
||
<div className="content-box">
|
||
<div className="box-inner">
|
||
<div className="category">smoothie</div>
|
||
<h3><Link href="news-detail">Broad bean and goats’ cheese bruschetta</Link></h3>
|
||
<ul className="post-info">
|
||
<li>May 21, 2021</li>
|
||
<li>2 Comments</li>
|
||
<li><Link href="news-detail">Share</Link></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</SwiperSlide>
|
||
{/* Slide */}
|
||
<SwiperSlide>
|
||
<div className="slide" style={{ backgroundImage: 'url(assets/images/main-slider/3.jpg)' }} >
|
||
<div className="auto-container">
|
||
{/* Content Column */}
|
||
<div className="content-box">
|
||
<div className="box-inner">
|
||
<div className="category">smoothie</div>
|
||
<h3><Link href="news-detail">Broad bean and goats’ cheese bruschetta</Link></h3>
|
||
<ul className="post-info">
|
||
<li>May 21, 2021</li>
|
||
<li>2 Comments</li>
|
||
<li><Link href="news-detail">Share</Link></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</SwiperSlide>
|
||
</Swiper>
|
||
</section>
|
||
{/* End Banner Section */}
|
||
|
||
</>
|
||
)
|
||
}
|