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

Updated

Browse Source
This commit is contained in:
marzban-dev
2025-03-04 20:40:55 +03:30
parent 47a3e10980
commit 85bfaea401
1 changed files with 26 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/components/global/product-detail/ProductsSlider.vue
+26 -9
View File
@@ -30,12 +30,13 @@ await suspense();
const onSwiper = (swiper: SwiperClass) => {
swiper_instance.value = swiper;
};
</script>
<template>
<section class="w-full flex flex-col gap-[4rem] px-0 py-[5rem] container">
<div class="w-full flex justify-between items-center">
<span class="text-black typo-h-4">
<section class="w-full flex flex-col gap-10 md:gap-[4rem] py-[5rem] lg:container">
<div class="w-full flex justify-between items-center max-lg:container">
<span class="text-black typo-h-6 md:typo-h-5 lg:typo-h-4">
{{ title }}
</span>
<div class="flex-center gap-[.5rem]">
@@ -47,16 +48,16 @@ const onSwiper = (swiper: SwiperClass) => {
? 'border-slate-200 cursor-not-allowed'
: 'border-black cursor-pointer'
"
class="size-[2.75rem] rounded-full border-[1.5px] click-effect flex-center"
class="size-[30px] md:size-[35px] lg:size-[2.75rem] rounded-full border-[1.5px] click-effect flex-center"
>
<Icon
name="ci:chevron-right"
class="size-5 lg:size-6"
:class="
swiper_instance?.isBeginning
? '**:stroke-slate-200'
: '**:stroke-black'
"
size="24"
/>
</button>
<button
@@ -67,24 +68,40 @@ const onSwiper = (swiper: SwiperClass) => {
? 'border-slate-200 cursor-not-allowed'
: 'border-black cursor-pointer'
"
class="size-[2.75rem] rounded-full border-[1.5px] click-effect flex-center"
class="size-[30px] md:size-[35px] lg:size-[2.75rem] rounded-full border-[1.5px] click-effect flex-center"
>
<Icon
name="ci:chevron-left"
class="size-5 lg:size-6"
:class="
swiper_instance?.isEnd
? '**:stroke-slate-200'
: '**:stroke-black'
"
size="24"
/>
</button>
</div>
</div>
<div class="w-full">
<Swiper :slides-per-view="3" :space-between="24" @swiper="onSwiper">
<Swiper
:slides-per-view="1.5"
:loop="true"
:centered-slides="true"
:space-between="24"
@swiper="onSwiper"
:breakpoints="{
640: {
centeredSlides: true,
slidesPerView : 2.5
},
1024 : {
centeredSlides: false,
slidesPerView : 3
}
}"
>
<SwiperSlide
v-for="product in homeData!.products"
v-for="product in [...homeData!.products,...homeData!.products]"
:key="product.id"
>
<ProductCard