96 lines
2.7 KiB
TypeScript
96 lines
2.7 KiB
TypeScript
"use client";
|
|
import { useState } from "react";
|
|
|
|
import { Swiper, SwiperSlide } from "swiper/react";
|
|
import { product } from "../data";
|
|
|
|
import "swiper/css";
|
|
import "swiper/css/free-mode";
|
|
import "swiper/css/navigation";
|
|
import "swiper/css/thumbs";
|
|
|
|
import Image from "next/image";
|
|
import { FreeMode, Navigation, Thumbs } from "swiper/modules";
|
|
import { Swiper as SwiperType } from "swiper/types";
|
|
|
|
const ThumbSliderCom = ({ product }: { product: product }) => {
|
|
|
|
const images = [
|
|
"/images/e-commerce/product-card/classical-black-tshirt.png",
|
|
"/images/e-commerce/product-card/black-t-shirt.png",
|
|
"/images/e-commerce/product-card/check-shirt.png",
|
|
"/images/e-commerce/product-card/gray-jumper.png",
|
|
"/images/e-commerce/product-card/gray-t-shirt.png",
|
|
"/images/e-commerce/product-card/pink-blazer.png",
|
|
"/images/e-commerce/product-card/red-t-shirt.png",
|
|
"/images/e-commerce/product-card/yellow-frok.png",
|
|
"/images/e-commerce/product-card/yellow-jumper.png",
|
|
]
|
|
|
|
const [thumbsSwiper, setThumbsSwiper] = useState<SwiperType | null>(null);
|
|
|
|
|
|
return (
|
|
<>
|
|
<Swiper
|
|
loop={true}
|
|
spaceBetween={10}
|
|
navigation={false}
|
|
thumbs={{ swiper: thumbsSwiper }}
|
|
modules={[FreeMode, Navigation, Thumbs]}
|
|
className="mySwiper2"
|
|
>
|
|
{images.map((image, i) => {
|
|
return (
|
|
<SwiperSlide
|
|
key={i}
|
|
className="w-full bg-default-200 dark:bg-default-900 rounded-md p-12"
|
|
>
|
|
<Image
|
|
width={500}
|
|
height={400}
|
|
className="h-[350px] w-full object-contain transition-all duration-300 group-hover:scale-105"
|
|
src={image}
|
|
alt="."
|
|
/>
|
|
|
|
</SwiperSlide>
|
|
);
|
|
})}
|
|
</Swiper>
|
|
|
|
<div className="flex mt-6 gap-3 ">
|
|
<Swiper
|
|
onSwiper={setThumbsSwiper}
|
|
loop={true}
|
|
spaceBetween={10}
|
|
slidesPerView={4}
|
|
freeMode={true}
|
|
watchSlidesProgress={true}
|
|
modules={[FreeMode, Navigation, Thumbs]}
|
|
className="mySwiper"
|
|
>
|
|
{images.map((image, j) => {
|
|
return (
|
|
<SwiperSlide
|
|
key={`second_slider_${j}`}
|
|
className="h-[90px] w-[90px] py-3.5 px-[17px] bg-default-200 dark:bg-default-900 rounded cursor-pointer"
|
|
>
|
|
<Image
|
|
width={100}
|
|
height={150}
|
|
className="h-20 w-full object-contain"
|
|
src={image}
|
|
alt="."
|
|
/>
|
|
</SwiperSlide>
|
|
);
|
|
})}
|
|
</Swiper>
|
|
</div>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default ThumbSliderCom;
|