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

Update categories slider slides count problem

Browse Source
This commit is contained in:
marzban-dev
2026-02-22 01:07:57 +03:30
parent 1344b39e56
commit c5d0d1b1cb
3 changed files with 16 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/components/global/product-detail/ProductsSlider.vue
+4 -4
View File
@@ -27,12 +27,12 @@ const onSwiper = (swiper: SwiperClass) => {
</script>
<template>
<section class="w-full flex flex-col gap-10 md:gap-[4rem] lg:container">
<section class="w-full flex flex-col gap-10 md:gap-16 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]">
<div class="flex-center gap-2">
<button
@click="swiper_instance?.slidePrev()"
:disabled="swiper_instance?.isBeginning"
@@ -41,7 +41,7 @@ const onSwiper = (swiper: SwiperClass) => {
? 'border-slate-200 cursor-not-allowed'
: 'border-black cursor-pointer'
"
class="size-[30px] md:size-[35px] lg:size-[2.75rem] rounded-full border-[1.5px] click-effect flex-center"
class="size-[30px] md:size-[35px] lg:size-11 rounded-full border-[1.5px] click-effect flex-center"
>
<Icon
name="ci:chevron-right"
@@ -55,7 +55,7 @@ const onSwiper = (swiper: SwiperClass) => {
:class="
swiper_instance?.isEnd ? 'border-slate-200 cursor-not-allowed' : 'border-black cursor-pointer'
"
class="size-[30px] md:size-[35px] lg:size-[2.75rem] rounded-full border-[1.5px] click-effect flex-center"
class="size-[30px] md:size-[35px] lg:size-11 rounded-full border-[1.5px] click-effect flex-center"
>
<Icon
name="ci:chevron-left"
frontend/components/home/Categories.vue
+7 -1
View File
@@ -16,6 +16,12 @@ const activeIndex = ref(0);
const slideElement = ref<HTMLDivElement | null>(null);
const { width: slideWidth } = useElementSize(slideElement);
// computed
const slides = computed(() => {
return [...homeData.value!.main_categories, ...homeData.value!.main_categories];
});
// methods
const onSwiper = (swiper: SwiperClass) => {
@@ -101,7 +107,7 @@ const onSlideChange = (swiper: SwiperClass) => {
>
<SwiperSlide
ref="slideElement"
v-for="(slide, index) in homeData!.main_categories"
v-for="(slide, index) in slides"
:key="slide.id"
>
<CategoryCard
frontend/pages/index.vue
+2 -2
View File
@@ -23,10 +23,10 @@ if (response.isError) {
<template>
<div class="w-full">
<!-- <LoadingOverlay /> -->
<Hero class="mb-20 max-md:mt-[80px]" />
<Hero class="mb-20 max-md:mt-20" />
<Preview />
<ProductsShowcase class="lg:mb-12" />
<div class="py-[5rem]">
<div class="py-20">
<ProductsSlider
title="محصولات پرفروش"
:products="homeData!.products"