Davron/ignum
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

text updated

Browse Source
This commit is contained in:
nabijonovdavronbek619@gmail.com
2026-02-19 11:11:26 +05:00
parent 9608ed23ac
commit afae7da68c
10 changed files with 103 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
components/pages/products/slug/slider.tsx
View File

@@ -8,12 +8,14 @@ import "swiper/css/navigation";
import "swiper/css/pagination";
import "swiper/css/thumbs";
import Image from "next/image";
import { useTranslations } from "next-intl";
const navigationPrevEl = ".custom-swiper-prev";
const navigationNextEl = ".custom-swiper-next";
export function SliderComp({ imgs }: { imgs: string[] }) {
const [thumbsSwiper, setThumbsSwiper] = useState<SwiperType | null>(null);
const t = useTranslations();
// Agar rasm bo'lmasa
if (!imgs || imgs.length === 0) {
@@ -33,7 +35,7 @@ export function SliderComp({ imgs }: { imgs: string[] }) {
d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"
/>
</svg>
<p className="text-gray-500">Rasm mavjud emas</p>
<p className="text-gray-500">{t("image_not_found")}</p>
</div>
</div>
);
@@ -45,7 +47,10 @@ export function SliderComp({ imgs }: { imgs: string[] }) {
<div className="relative group">
<Swiper
modules={[Navigation, Pagination, Thumbs]}
thumbs={{ swiper: thumbsSwiper && !thumbsSwiper.destroyed ? thumbsSwiper : null }}
thumbs={{
swiper:
thumbsSwiper && !thumbsSwiper.destroyed ? thumbsSwiper : null,
}}
navigation={{
prevEl: navigationPrevEl,
nextEl: navigationNextEl,
@@ -79,21 +84,41 @@ export function SliderComp({ imgs }: { imgs: string[] }) {
<button
className={`${navigationPrevEl.replace(
".",
""
"",
)} absolute z-10 top-1/2 -translate-y-1/2 left-2 md:left-4 rounded-lg w-10 h-10 md:w-12 md:h-12 bg-red-700/90 hover:bg-red-800 text-white flex items-center justify-center transition opacity-0 group-hover:opacity-100 shadow-lg`}
>
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
<svg
className="w-6 h-6"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M15 19l-7-7 7-7"
/>
</svg>
</button>
<button
className={`${navigationNextEl.replace(
".",
""
"",
)} absolute z-10 top-1/2 -translate-y-1/2 right-2 md:right-4 rounded-lg w-10 h-10 md:w-12 md:h-12 bg-red-700/90 hover:bg-red-800 text-white flex items-center justify-center transition opacity-0 group-hover:opacity-100 shadow-lg`}
>
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
<svg
className="w-6 h-6"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M9 5l7 7-7 7"
/>
</svg>
</button>
</>
@@ -130,4 +155,4 @@ export function SliderComp({ imgs }: { imgs: string[] }) {
)}
</div>
);
}
}