109 lines
3.4 KiB
JavaScript
109 lines
3.4 KiB
JavaScript
"use client";
|
|
|
|
import Image from "next/image";
|
|
import { useState } from "react";
|
|
import { Gallery, Item } from "react-photoswipe-gallery";
|
|
import { Thumbs } from "swiper/modules";
|
|
import { Swiper, SwiperSlide } from "swiper/react";
|
|
|
|
const images = [
|
|
{
|
|
src: "/assets/img/photos/shs1.jpg",
|
|
srcSet: "/assets/img/photos/shs1@2x.jpg 2x",
|
|
},
|
|
{
|
|
src: "/assets/img/photos/shs2.jpg",
|
|
srcSet: "/assets/img/photos/shs2@2x.jpg 2x",
|
|
},
|
|
{
|
|
src: "/assets/img/photos/shs3.jpg",
|
|
srcSet: "/assets/img/photos/shs3@2x.jpg 2x",
|
|
},
|
|
{
|
|
src: "/assets/img/photos/shs4.jpg",
|
|
srcSet: "/assets/img/photos/shs4@2x.jpg 2x",
|
|
},
|
|
];
|
|
|
|
export default function Slider({ firstImage = "/assets/img/photos/shs1.jpg" }) {
|
|
images[0].src = firstImage;
|
|
const [thumbSwiper, setThumbSwiper] = useState(null);
|
|
return (
|
|
<Gallery>
|
|
<div
|
|
className="swiper-container swiper-thumbs-container"
|
|
data-margin="10"
|
|
data-dots="false"
|
|
data-nav="true"
|
|
data-thumbs="true"
|
|
>
|
|
<Swiper
|
|
modules={[Thumbs]}
|
|
thumbs={{ swiper: thumbSwiper }}
|
|
spaceBetween={10}
|
|
className="swiper"
|
|
>
|
|
{images.map((image, index) => (
|
|
<SwiperSlide className="swiper-slide group" key={index}>
|
|
<Item
|
|
original={image.src}
|
|
thumbnail={image.src}
|
|
width="610"
|
|
height="655"
|
|
>
|
|
{({ ref, open }) => (
|
|
<figure className="rounded-[0.4rem]">
|
|
<Image
|
|
ref={ref}
|
|
className="rounded-[0.4rem]"
|
|
srcSet={image.srcSet}
|
|
alt="image"
|
|
src={image.src}
|
|
width="610"
|
|
height="655"
|
|
/>
|
|
<a
|
|
className="item-link absolute w-[2.2rem] h-[2.2rem] !leading-[2.2rem] z-[1] transition-all duration-[0.3s] ease-in-out opacity-0 !text-[#343f52] shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.02)] text-[1rem] flex items-center justify-center rounded-[100%] right-0 bottom-4 bg-[rgba(255,255,255,.7)] hover:bg-[rgba(255,255,255,.9)] hover:!text-[#343f52] group-hover:opacity-100 group-hover:right-[1rem]"
|
|
onClick={open}
|
|
data-gallery="product-group"
|
|
>
|
|
<i className="uil uil-focus-add before:content-['\eb22']"></i>
|
|
</a>
|
|
</figure>
|
|
)}
|
|
</Item>
|
|
</SwiperSlide>
|
|
))}
|
|
|
|
{/* <!--/.swiper-wrapper --> */}
|
|
</Swiper>
|
|
{/* <!-- /.swiper --> */}
|
|
|
|
<Swiper
|
|
className="swiper swiper-thumbs"
|
|
slidesPerView={5}
|
|
spaceBetween={10}
|
|
modules={[Thumbs]}
|
|
onSwiper={setThumbSwiper}
|
|
>
|
|
{images.map((image, index) => (
|
|
<SwiperSlide key={index} className="swiper-slide">
|
|
<Image
|
|
srcSet={image.srcSet}
|
|
className="rounded-[.4rem]"
|
|
alt="image"
|
|
src={image.src}
|
|
width="114"
|
|
height="120"
|
|
/>
|
|
</SwiperSlide>
|
|
))}
|
|
|
|
{/* <!--/.swiper-wrapper --> */}
|
|
</Swiper>
|
|
{/* <!-- /.swiper --> */}
|
|
</div>{" "}
|
|
</Gallery>
|
|
);
|
|
}
|