Updated
This commit is contained in:
marzban-dev
@@ -45,106 +45,111 @@ const emptySlidesCount = computed(() => {
|
||||
const changeSlide = (id: number) => {
|
||||
emit("update:selectedSlide", id);
|
||||
};
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex flex-col relative gap-6">
|
||||
<div
|
||||
class="bg-white brightness-[97%] w-full relative aspect-square overflow-hidden rounded-[12px] md:rounded-200"
|
||||
>
|
||||
<Transition name="zoom" mode="out-in">
|
||||
<NuxtImg
|
||||
:key="selectedSlideDetail.id"
|
||||
class="size-full absolute object-contain"
|
||||
:src="selectedSlideDetail.image"
|
||||
:alt="selectedSlideDetail.name"
|
||||
/>
|
||||
</Transition>
|
||||
</div>
|
||||
|
||||
<div class="relative w-full">
|
||||
<Swiper
|
||||
:slides-per-view="3"
|
||||
:space-between="20"
|
||||
@swiper="onSwiper"
|
||||
class="w-full"
|
||||
<div class="sticky top-10">
|
||||
<div class="flex flex-col relative gap-6">
|
||||
<div
|
||||
class="bg-white brightness-[97%] w-full relative aspect-square overflow-hidden rounded-[12px] md:rounded-200"
|
||||
>
|
||||
<SwiperSlide
|
||||
class="py-4"
|
||||
v-for="slide in slides"
|
||||
:key="slide.id"
|
||||
<Transition
|
||||
name="zoom"
|
||||
mode="out-in"
|
||||
>
|
||||
<div
|
||||
@click="changeSlide(slide.id)"
|
||||
:class="
|
||||
selectedSlide === slide.id
|
||||
? '!border-black'
|
||||
: 'border-transparent'
|
||||
"
|
||||
class="active:scale-95 hover:border-slate-200 transition-all cursor-pointer brightness-[97%] bg-white aspect-square border-2 rounded-[12px] md:rounded-200 w-full overflow-hidden relative"
|
||||
<NuxtImg
|
||||
:key="selectedSlideDetail.id"
|
||||
class="size-full absolute object-contain"
|
||||
:src="selectedSlideDetail.image"
|
||||
:alt="selectedSlideDetail.name"
|
||||
/>
|
||||
</Transition>
|
||||
</div>
|
||||
|
||||
<div class="relative w-full">
|
||||
<Swiper
|
||||
:slides-per-view="3"
|
||||
:space-between="20"
|
||||
@swiper="onSwiper"
|
||||
class="w-full"
|
||||
>
|
||||
<SwiperSlide
|
||||
class="py-4"
|
||||
v-for="slide in slides"
|
||||
:key="slide.id"
|
||||
>
|
||||
<NuxtImg
|
||||
class="absolute object-cover size-full"
|
||||
:src="slide.image"
|
||||
:alt="String(slide.id)"
|
||||
/>
|
||||
</div>
|
||||
</SwiperSlide>
|
||||
<SwiperSlide
|
||||
v-if="emptySlidesCount > 0"
|
||||
v-for="slide in emptySlidesCount"
|
||||
:key="slide"
|
||||
class="py-4"
|
||||
<div
|
||||
@click="changeSlide(slide.id)"
|
||||
:class="selectedSlide === slide.id ? '!border-black' : 'border-transparent'"
|
||||
class="active:scale-95 hover:border-slate-200 transition-all cursor-pointer brightness-[97%] bg-white aspect-square border-2 rounded-[12px] md:rounded-200 w-full overflow-hidden relative"
|
||||
>
|
||||
<NuxtImg
|
||||
class="absolute object-cover size-full"
|
||||
:src="slide.image"
|
||||
:alt="String(slide.id)"
|
||||
/>
|
||||
</div>
|
||||
</SwiperSlide>
|
||||
<SwiperSlide
|
||||
v-if="emptySlidesCount > 0"
|
||||
v-for="slide in emptySlidesCount"
|
||||
:key="slide"
|
||||
class="py-4"
|
||||
>
|
||||
<div
|
||||
class="brightness-[97%] flex-center bg-white aspect-square rounded-[12px] md:rounded-200 w-full"
|
||||
>
|
||||
<Icon
|
||||
name="ci:image-slash"
|
||||
class="size-[40px] sm:size-[60px] **:fill-black/20"
|
||||
/>
|
||||
</div>
|
||||
</SwiperSlide>
|
||||
</Swiper>
|
||||
|
||||
<div
|
||||
v-if="slides.length > 3"
|
||||
@click="swiper_instance?.slidePrev()"
|
||||
class="absolute z-20 -right-4 shadow-lg cursor-pointer shadow-black/10 bottom-[50%] translate-y-1/2 bg-white rounded-full size-10 xs:size-11.5 flex justify-center items-center"
|
||||
>
|
||||
<div class="brightness-[97%] flex-center bg-white aspect-square rounded-[12px] md:rounded-200 w-full">
|
||||
<Icon name="ci:image-slash" class="size-[40px] sm:size-[60px] **:fill-black/20" />
|
||||
</div>
|
||||
</SwiperSlide>
|
||||
</Swiper>
|
||||
<Icon
|
||||
name="ci:arrow-right"
|
||||
class="**:stroke-black size-5 xs:size-6"
|
||||
:class="swiper_instance?.isBeginning ? '**:stroke-black/30' : ''"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-if="slides.length > 3"
|
||||
@click="swiper_instance?.slidePrev()"
|
||||
class="absolute z-20 -right-4 shadow-lg cursor-pointer shadow-black/10 bottom-[50%] translate-y-1/2 bg-white rounded-full size-10 xs:size-11.5 flex justify-center items-center"
|
||||
>
|
||||
<Icon
|
||||
name="ci:arrow-right"
|
||||
class="**:stroke-black size-5 xs:size-6"
|
||||
:class="swiper_instance?.isBeginning ? '**:stroke-black/30' : ''"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-if="slides.length > 3"
|
||||
@click="swiper_instance?.slideNext()"
|
||||
class="absolute z-20 -left-4 shadow-lg cursor-pointer shadow-black/10 bottom-[50%] translate-y-1/2 bg-white rounded-full size-10 xs:size-11.5 flex justify-center items-center"
|
||||
>
|
||||
<Icon
|
||||
name="ci:arrow-left"
|
||||
class="**:stroke-black size-5 xs:size-6"
|
||||
:class="swiper_instance?.isEnd ? '**:stroke-black/30' : ''"
|
||||
/>
|
||||
<div
|
||||
v-if="slides.length > 3"
|
||||
@click="swiper_instance?.slideNext()"
|
||||
class="absolute z-20 -left-4 shadow-lg cursor-pointer shadow-black/10 bottom-[50%] translate-y-1/2 bg-white rounded-full size-10 xs:size-11.5 flex justify-center items-center"
|
||||
>
|
||||
<Icon
|
||||
name="ci:arrow-left"
|
||||
class="**:stroke-black size-5 xs:size-6"
|
||||
:class="swiper_instance?.isEnd ? '**:stroke-black/30' : ''"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="grid grid-cols-3 gap-6">-->
|
||||
<!-- <div-->
|
||||
<!-- @click="changeSlide(slide.id)"-->
|
||||
<!-- v-for="slide in slides"-->
|
||||
<!-- :class="-->
|
||||
<!-- selectedSlide === slide.id-->
|
||||
<!-- ? '!ring-black'-->
|
||||
<!-- : 'ring-transparent'-->
|
||||
<!-- "-->
|
||||
<!-- class="active:scale-95 hover:ring-slate-200 transition-all cursor-pointer brightness-[97%] bg-white aspect-square ring-2 ring-offset-4 rounded-[12px] md:rounded-200 w-full overflow-hidden relative"-->
|
||||
<!-- :key="slide.id"-->
|
||||
<!-- >-->
|
||||
<!-- <img-->
|
||||
<!-- class="absolute object-cover size-full"-->
|
||||
<!-- :src="slide.image"-->
|
||||
<!-- :alt="String(slide.id)"-->
|
||||
<!-- />-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
</div>
|
||||
<!-- <div class="grid grid-cols-3 gap-6">-->
|
||||
<!-- <div-->
|
||||
<!-- @click="changeSlide(slide.id)"-->
|
||||
<!-- v-for="slide in slides"-->
|
||||
<!-- :class="-->
|
||||
<!-- selectedSlide === slide.id-->
|
||||
<!-- ? '!ring-black'-->
|
||||
<!-- : 'ring-transparent'-->
|
||||
<!-- "-->
|
||||
<!-- class="active:scale-95 hover:ring-slate-200 transition-all cursor-pointer brightness-[97%] bg-white aspect-square ring-2 ring-offset-4 rounded-[12px] md:rounded-200 w-full overflow-hidden relative"-->
|
||||
<!-- :key="slide.id"-->
|
||||
<!-- >-->
|
||||
<!-- <img-->
|
||||
<!-- class="absolute object-cover size-full"-->
|
||||
<!-- :src="slide.image"-->
|
||||
<!-- :alt="String(slide.id)"-->
|
||||
<!-- />-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
Reference in New Issue
Block a user