256 lines
13 KiB
JavaScript
256 lines
13 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: 5,
|
|
spaceBetween: 0,
|
|
// autoplay: {
|
|
// delay: 2500,
|
|
// disableOnInteraction: false,
|
|
// },
|
|
loop: true,
|
|
|
|
// Navigation
|
|
navigation: {
|
|
nextEl: '.h1n',
|
|
prevEl: '.h1p',
|
|
},
|
|
|
|
// Pagination
|
|
pagination: {
|
|
el: '.swiper-pagination',
|
|
clickable: true,
|
|
},
|
|
|
|
breakpoints: {
|
|
320: {
|
|
slidesPerView: 1,
|
|
// spaceBetween: 30,
|
|
},
|
|
575: {
|
|
slidesPerView: 1,
|
|
// spaceBetween: 30,
|
|
},
|
|
767: {
|
|
slidesPerView: 2,
|
|
// spaceBetween: 30,
|
|
},
|
|
991: {
|
|
slidesPerView: 3,
|
|
// spaceBetween: 30,
|
|
},
|
|
1199: {
|
|
slidesPerView: 3,
|
|
// spaceBetween: 30,
|
|
},
|
|
1350: {
|
|
slidesPerView: 5,
|
|
// spaceBetween: 30,
|
|
},
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
export default function Gallery() {
|
|
|
|
return (
|
|
<>
|
|
{/* Gallery Section */}
|
|
<section className="gallery-section">
|
|
<div className="outer-container">
|
|
<Swiper {...swiperOptions} className="gallery-carousel ">
|
|
|
|
{/* Gallery Block */}
|
|
<SwiperSlide>
|
|
<div className="gallery-block">
|
|
<div className="inner-box">
|
|
<figure className="image-box">
|
|
<img src="/assets/images/gallery/1.jpg" alt="Delicious street food served at Sixty5 Street Brampton1" loading="lazy"/>
|
|
{/* Overlay Box */}
|
|
<div className="overlay-box">
|
|
<div className="overlay-inner">
|
|
<div className="content">
|
|
<Link href="/assets/images/gallery/1.jpg" alt="Delicious street food served at Sixty5 Street Brampton2" data-fancybox="gallery" data-caption="" className="icon flaticon-plus"></Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</figure>
|
|
</div>
|
|
</div>
|
|
</SwiperSlide>
|
|
{/* Gallery Block */}
|
|
<SwiperSlide>
|
|
<div className="gallery-block">
|
|
<div className="inner-box">
|
|
<figure className="image-box">
|
|
<img src="/assets/images/gallery/2.jpg" alt="Sixty5 Street restaurant interior Brampton Ontario" loading="lazy"/>
|
|
{/* Overlay Box */}
|
|
<div className="overlay-box">
|
|
<div className="overlay-inner">
|
|
<div className="content">
|
|
<Link href="/assets/images/gallery/2.jpg" alt="Sixty5 Street restaurant interior Brampton Ontario1" data-fancybox="gallery" data-caption="" className="icon flaticon-plus"></Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</figure>
|
|
</div>
|
|
</div>
|
|
</SwiperSlide>
|
|
{/* Gallery Block */}
|
|
<SwiperSlide>
|
|
<div className="gallery-block">
|
|
<div className="inner-box">
|
|
<figure className="image-box">
|
|
<img src="/assets/images/gallery/3.jpg" alt="Customer dining experience at Sixty5 Street Brampton" loading="lazy"/>
|
|
{/* Overlay Box */}
|
|
<div className="overlay-box">
|
|
<div className="overlay-inner">
|
|
<div className="content">
|
|
<Link href="/assets/images/gallery/3.jpg" alt="Customer dining experience at Sixty5 Street Brampton1" data-fancybox="gallery" data-caption="" className="icon flaticon-plus"></Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</figure>
|
|
</div>
|
|
</div>
|
|
</SwiperSlide>
|
|
{/* Gallery Block */}
|
|
<SwiperSlide>
|
|
<div className="gallery-block">
|
|
<div className="inner-box">
|
|
<figure className="image-box">
|
|
<img src="/assets/images/gallery/4.jpg" alt="Signature dishes at Sixty5 Street Brampton restaurant" loading="lazy"/>
|
|
{/* Overlay Box */}
|
|
<div className="overlay-box">
|
|
<div className="overlay-inner">
|
|
<div className="content">
|
|
<Link href="/assets/images/gallery/4.jpg" alt="Signature dishes at Sixty5 Street Brampton restaurant1" data-fancybox="gallery" data-caption="" className="icon flaticon-plus"></Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</figure>
|
|
</div>
|
|
</div>
|
|
</SwiperSlide>
|
|
{/* Gallery Block */}
|
|
<SwiperSlide>
|
|
<div className="gallery-block">
|
|
<div className="inner-box">
|
|
<figure className="image-box">
|
|
<img src="/assets/images/gallery/5.jpg" alt="Sixty5 Street kitchen and staff in Brampton ON" loading="lazy"/>
|
|
{/* Overlay Box */}
|
|
<div className="overlay-box">
|
|
<div className="overlay-inner">
|
|
<div className="content">
|
|
<Link href="/assets/images/gallery/5.jpg" alt="Sixty5 Street kitchen and staff in Brampton ON1" data-fancybox="gallery" data-caption="" className="icon flaticon-plus"></Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</figure>
|
|
</div>
|
|
</div>
|
|
</SwiperSlide>
|
|
{/* Gallery Block */}
|
|
<SwiperSlide>
|
|
<div className="gallery-block">
|
|
<div className="inner-box">
|
|
<figure className="image-box">
|
|
<img src="/assets/images/gallery/1.jpg" alt="Delicious street food served at Sixty5 Street Brampton3" loading="lazy"/>
|
|
{/* Overlay Box */}
|
|
<div className="overlay-box">
|
|
<div className="overlay-inner">
|
|
<div className="content">
|
|
<Link href="/assets/images/gallery/1.jpg" alt="Delicious street food served at Sixty5 Street Brampton4" data-fancybox="gallery" data-caption="" className="icon flaticon-plus"></Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</figure>
|
|
</div>
|
|
</div>
|
|
</SwiperSlide>
|
|
{/* Gallery Block */}
|
|
<SwiperSlide>
|
|
<div className="gallery-block">
|
|
<div className="inner-box">
|
|
<figure className="image-box">
|
|
<img src="/assets/images/gallery/2.jpg" alt="Sixty5 Street restaurant interior Brampton Ontario2" loading="lazy"/>
|
|
{/* Overlay Box */}
|
|
<div className="overlay-box">
|
|
<div className="overlay-inner">
|
|
<div className="content">
|
|
<Link href="/assets/images/gallery/2.jpg" alt="Sixty5 Street restaurant interior Brampton Ontario3" data-fancybox="gallery" data-caption="" className="icon flaticon-plus"></Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</figure>
|
|
</div>
|
|
</div>
|
|
</SwiperSlide>
|
|
{/* Gallery Block */}
|
|
<SwiperSlide>
|
|
<div className="gallery-block">
|
|
<div className="inner-box">
|
|
<figure className="image-box">
|
|
<img src="/assets/images/gallery/3.jpg" alt="Customer dining experience at Sixty5 Street Brampton2" loading="lazy"/>
|
|
{/* Overlay Box */}
|
|
<div className="overlay-box">
|
|
<div className="overlay-inner">
|
|
<div className="content">
|
|
<Link href="/assets/images/gallery/3.jpg" alt="Customer dining experience at Sixty5 Street Brampton3" data-fancybox="gallery" data-caption="" className="icon flaticon-plus"></Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</figure>
|
|
</div>
|
|
</div>
|
|
</SwiperSlide>
|
|
{/* Gallery Block */}
|
|
<SwiperSlide>
|
|
<div className="gallery-block">
|
|
<div className="inner-box">
|
|
<figure className="image-box">
|
|
<img src="/assets/images/gallery/4.jpg" alt="Signature dishes at Sixty5 Street Brampton restaurant2" loading="lazy"/>
|
|
{/* Overlay Box */}
|
|
<div className="overlay-box">
|
|
<div className="overlay-inner">
|
|
<div className="content">
|
|
<Link href="/assets/images/gallery/4.jpg" alt="Signature dishes at Sixty5 Street Brampton restaurant3" data-fancybox="gallery" data-caption="" className="icon flaticon-plus"></Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</figure>
|
|
</div>
|
|
</div>
|
|
</SwiperSlide>
|
|
{/* Gallery Block */}
|
|
<SwiperSlide>
|
|
<div className="gallery-block">
|
|
<div className="inner-box">
|
|
<figure className="image-box">
|
|
<img src="/assets/images/gallery/5.jpg" alt="Sixty5 Street kitchen and staff in Brampton ON2" loading="lazy"/>
|
|
{/* Overlay Box */}
|
|
<div className="overlay-box">
|
|
<div className="overlay-inner">
|
|
<div className="content">
|
|
<Link href="/assets/images/gallery/5.jpg" alt="Sixty5 Street kitchen and staff in Brampton ON3" data-fancybox="gallery" data-caption="" className="icon flaticon-plus"></Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</figure>
|
|
</div>
|
|
</div>
|
|
</SwiperSlide>
|
|
</Swiper>
|
|
</div>
|
|
</section>
|
|
{/* End Gallery Section */}
|
|
</>
|
|
)
|
|
}
|