heymlz/hossein-por-shop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

added buttons

Browse Source
This commit is contained in:
Mamalizz
2024-12-15 22:47:27 +03:30
parent c751cfc581
commit 4b14e9ec31
1 changed files with 38 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/components/global/product-detail/RelatedProducts.vue
+38 -21
View File
@@ -13,51 +13,68 @@ type Props = {
defineProps<Props>();
// state
const swiper_instance = ref<SwiperClass | null>(null);
// methods
const onSwiper = (swiper: SwiperClass) => {
console.log(swiper);
};
const onSlideChange = () => {
console.log("slide change");
swiper_instance.value = swiper;
};
</script>
<template>
<div class="w-full flex flex-col gap-[4rem] py-[5rem]">
<div class="w-full flex flex-col gap-[4rem] py-[5rem] container">
<div class="w-full flex justify-between items-center">
<span class="text-black typo-h-3">
{{ title }}
</span>
<div class="flex-center gap-[.5rem]">
<button
class="size-[2.75rem] rounded-full border-[1.5px] cursor-pointer border-black flex-center"
@click="swiper_instance?.slidePrev()"
:disabled="swiper_instance?.isBeginning"
:class="
swiper_instance?.isBeginning
? 'border-slate-200 cursor-not-allowed'
: 'border-black cursor-pointer'
"
class="size-[2.75rem] rounded-full border-[1.5px] click-effect flex-center"
>
<Icon
name="ci:chevron-left"
class="**:stroke-black"
name="ci:chevron-right"
:class="
swiper_instance?.isBeginning
? '**:stroke-slate-200'
: '**:stroke-black'
"
size="24"
/>
</button>
<button
class="size-[2.75rem] rounded-full border-[1.5px] cursor-pointer border-black flex-center"
@click="swiper_instance?.slideNext()"
:disabled="swiper_instance?.isEnd"
:class="
swiper_instance?.isEnd
? 'border-slate-200 cursor-not-allowed'
: 'border-black cursor-pointer'
"
class="size-[2.75rem] rounded-full border-[1.5px] click-effect flex-center"
>
<Icon
name="ci:chevron-right"
class="**:stroke-black"
name="ci:chevron-left"
:class="
swiper_instance?.isEnd
? '**:stroke-slate-200'
: '**:stroke-black'
"
size="24"
/>
</button>
</div>
<span class="text-black typo-h-3">
{{ title }}
</span>
</div>
<div class="w-full">
<Swiper
dir="rtl"
:slides-per-view="3"
:space-between="24"
@swiper="onSwiper"
@slideChange="onSlideChange"
>
<Swiper :slides-per-view="3" :space-between="24" @swiper="onSwiper">
<SwiperSlide v-for="i in 4" :key="i">
<ProductCard
brand="Samsung"