Widget : Slider Item

Nav rapide
White background Grey background Blue background Blue with faded items Services

White

White background - Voir le template
  • template
<div class="widget widget-slider-items bg-white py-11 md:py-20">

    <div class="slider-items"

         x-data="sliderItems()"

    >

        <div class="flex items-start justify-between mb-9 md:mb-11 px-5 md:px-20">

            <div class="text-3xl md:text-4.5xl md:leading-13 font-bold tracking-tightened">Titre du <br>slider</div>

            <div class="flex gap-2" :class="{'hidden': !isSlider}">

                <button x-ref="prevButton" @click="prev()" class="px-5 text-text-light opacity-70 hover:opacity-100 transition duration-300" title="Précédent">

                    <?= icon('chevron-right', 'w-2.5 -scale-x-100'); ?>

                </button>

                <button x-ref="nextButton" @click="next()" class="px-5 text-text-light opacity-70 hover:opacity-100 transition duration-300" title="Suivant">

                    <?= icon('chevron-right', 'w-2.5'); ?>

                </button>

            </div>

        </div>

        <div class="slider-items__container relative">

            <div @scroll="scroll()" x-ref="slider" class="slider-items__wrapper flex overflow-scroll md:overflow-hidden snap-x hide-scrollbar scroll-smooth px-5 md:px-20">

                <div class="shrink-0 snap-start pl-4">

                    <div class="w-[219px] md:w-[307px] rounded-button overflow-hidden hover:shadow-item-product transition duration-300">

                        <a href="#">

                            <div class="relative overflow-hidden h-[213px] md:h-[250px]">

                                <img src="https://i.picsum.photos/id/320/307/250.jpg?hmac=8KGklBfHvbwwSBhrsBwPll5n-rkvyaVg8C-UKTLu6iw" alt=""

                                     class="absolute top-0 left-1/2 -translate-x-1/2 h-full w-full object-cover">

                            </div>

                            <div class="flex justify-between items-center bg-ui-light py-1.5 px-3.75 md:p-5 text-text-light font-bold tracking-tightened">

                                <span>208</span>

                                <svg class="icon w-2 text-primary-accent" width="8" height="14" viewBox="0 0 8 14" fill="none" xmlns="http://www.w3.org/2000/svg">

                                    <path d="M-8.74228e-08 2L5 7L-5.24537e-07 12L0.999999 14L8 7L1 4.37114e-08L-8.74228e-08 2Z" fill="currentColor"/>

                                </svg>

                            </div>

                        </a>

                    </div>

                </div>

                <div class="shrink-0 snap-start pl-4">

                    <div class="w-[219px] md:w-[307px] rounded-button overflow-hidden hover:shadow-item-product transition duration-300">

                        <a href="#">

                            <div class="relative overflow-hidden h-[213px] md:h-[250px]">

                                <img src="https://i.picsum.photos/id/1/307/250.jpg?hmac=OJzYtXGd1Jgqb3xzDL85PClNsI8XWxgEsyYHqRoaFpw" alt=""

                                     class="absolute top-0 left-1/2 -translate-x-1/2 h-full w-full object-cover">

                            </div>

                            <div class="flex justify-between items-center bg-ui-light py-1.5 px-3.75 md:p-5 text-text-light font-bold tracking-tightened">

                                <span>208</span>

                                <svg class="icon w-2 text-primary-accent" width="8" height="14" viewBox="0 0 8 14" fill="none" xmlns="http://www.w3.org/2000/svg">

                                    <path d="M-8.74228e-08 2L5 7L-5.24537e-07 12L0.999999 14L8 7L1 4.37114e-08L-8.74228e-08 2Z" fill="currentColor"/>

                                </svg>

                            </div>

                        </a>

                    </div>

                </div>

                <div class="shrink-0 snap-start pl-4">

                    <div class="w-[219px] md:w-[307px] rounded-button overflow-hidden hover:shadow-item-product transition duration-300">

                        <a href="#">

                            <div class="relative overflow-hidden h-[213px] md:h-[250px]">

                                <img src="https://i.picsum.photos/id/69/307/250.jpg?hmac=3kjI9iyf_cr7YwGgIPKZpobror3yVyC6EucU4PPhyyY" alt=""

                                     class="absolute top-0 left-1/2 -translate-x-1/2 h-full w-full object-cover">

                            </div>

                            <div class="flex justify-between items-center bg-ui-light py-1.5 px-3.75 md:p-5 text-text-light font-bold tracking-tightened">

                                <span>208</span>

                                <svg class="icon w-2 text-primary-accent" width="8" height="14" viewBox="0 0 8 14" fill="none" xmlns="http://www.w3.org/2000/svg">

                                    <path d="M-8.74228e-08 2L5 7L-5.24537e-07 12L0.999999 14L8 7L1 4.37114e-08L-8.74228e-08 2Z" fill="currentColor"/>

                                </svg>

                            </div>

                        </a>

                    </div>

                </div>

                <div class="shrink-0 snap-start pl-4">

                    <div class="w-[219px] md:w-[307px] rounded-button overflow-hidden hover:shadow-item-product transition duration-300">

                        <a href="#">

                            <div class="relative overflow-hidden h-[213px] md:h-[250px]">

                                <img src="https://i.picsum.photos/id/1077/307/250.jpg?hmac=17g05PWTXTP5yr5mHDPK8owp_f8feN_D9CsKzZ5_1Tk" alt=""

                                     class="absolute top-0 left-1/2 -translate-x-1/2 h-full w-full object-cover">

                            </div>

                            <div class="flex justify-between items-center bg-ui-light py-1.5 px-3.75 md:p-5 text-text-light font-bold tracking-tightened">

                                <span>208</span>

                                <svg class="icon w-2 text-primary-accent" width="8" height="14" viewBox="0 0 8 14" fill="none" xmlns="http://www.w3.org/2000/svg">

                                    <path d="M-8.74228e-08 2L5 7L-5.24537e-07 12L0.999999 14L8 7L1 4.37114e-08L-8.74228e-08 2Z" fill="currentColor"/>

                                </svg>

                            </div>

                        </a>

                    </div>

                </div>

                <div class="shrink-0 snap-start pl-4">

                    <div class="w-[219px] md:w-[307px] rounded-button overflow-hidden hover:shadow-item-product transition duration-300">

                        <a href="#">

                            <div class="relative overflow-hidden h-[213px] md:h-[250px]">

                                <img src="https://i.picsum.photos/id/456/307/250.jpg?hmac=OBbehRzCypfIXzfrxDFcglO1HrrNztb5qcvFC2QLz1c" alt=""

                                     class="absolute top-0 left-1/2 -translate-x-1/2 h-full w-full object-cover">

                            </div>

                            <div class="flex justify-between items-center bg-ui-light py-1.5 px-3.75 md:p-5 text-text-light font-bold tracking-tightened">

                                <span>208</span>

                                <svg class="icon w-2 text-primary-accent" width="8" height="14" viewBox="0 0 8 14" fill="none" xmlns="http://www.w3.org/2000/svg">

                                    <path d="M-8.74228e-08 2L5 7L-5.24537e-07 12L0.999999 14L8 7L1 4.37114e-08L-8.74228e-08 2Z" fill="currentColor"/>

                                </svg>

                            </div>

                        </a>

                    </div>

                </div>

                <div class="shrink-0 snap-start pl-4">

                    <div class="w-[219px] md:w-[307px] rounded-button overflow-hidden hover:shadow-item-product transition duration-300">

                        <a href="#">

                            <div class="relative overflow-hidden h-[213px] md:h-[250px]">

                                <img src="https://i.picsum.photos/id/10/307/250.jpg?hmac=WdhgdwihCPnMvxv0icLdByR3-LiAtANeHlXBrakdzOI" alt=""

                                     class="absolute top-0 left-1/2 -translate-x-1/2 h-full w-full object-cover">

                            </div>

                            <div class="flex justify-between items-center bg-ui-light py-1.5 px-3.75 md:p-5 text-text-light font-bold tracking-tightened">

                                <span>208</span>

                                <svg class="icon w-2 text-primary-accent" width="8" height="14" viewBox="0 0 8 14" fill="none" xmlns="http://www.w3.org/2000/svg">

                                    <path d="M-8.74228e-08 2L5 7L-5.24537e-07 12L0.999999 14L8 7L1 4.37114e-08L-8.74228e-08 2Z" fill="currentColor"/>

                                </svg>

                            </div>

                        </a>

                    </div>

                </div>

            </div>

        </div>

    </div>

</div>

Grey

Grey background - Voir le template
  • template
<div class="widget widget-slider-items bg-ui-light py-11 md:py-20">

    <div class="slider-items"

         x-data="sliderItems()"

    >

        <div class="flex items-start justify-between mb-9 md:mb-11 px-5 md:px-20">

            <div class="text-3xl md:text-4.5xl md:leading-13 font-bold tracking-tightened">Titre du <br>slider</div>

            <div class="flex gap-2" :class="{'hidden': !isSlider}">

                <button x-ref="prevButton" @click="prev()" class="px-5 text-text-light opacity-70 hover:opacity-100 transition duration-300" title="Précédent">

                    <?= icon('chevron-right', 'w-2.5 -scale-x-100'); ?>

                </button>

                <button x-ref="nextButton" @click="next()" class="px-5 text-text-light opacity-70 hover:opacity-100 transition duration-300" title="Suivant">

                    <?= icon('chevron-right', 'w-2.5'); ?>

                </button>

            </div>

        </div>

        <div class="slider-items__container relative">

            <div @scroll="scroll()" x-ref="slider" class="slider-items__wrapper flex overflow-scroll md:overflow-hidden snap-x hide-scrollbar scroll-smooth px-5 md:px-20">

                <div class="shrink-0 snap-start pl-4">

                    <div class="w-[219px] md:w-[307px] rounded-button overflow-hidden hover:shadow-item-product transition duration-300">

                        <a href="#">

                            <div class="relative overflow-hidden h-[213px] md:h-[250px]">

                                <img src="https://i.picsum.photos/id/320/307/250.jpg?hmac=8KGklBfHvbwwSBhrsBwPll5n-rkvyaVg8C-UKTLu6iw" alt=""

                                     class="absolute top-0 left-1/2 -translate-x-1/2 h-full w-full object-cover">

                            </div>

                            <div class="flex justify-between items-center bg-white py-1.5 px-3.75 md:p-5 text-text-light font-bold tracking-tightened">

                                <span>208</span>

                                <svg class="icon w-2 text-primary-accent" width="8" height="14" viewBox="0 0 8 14" fill="none" xmlns="http://www.w3.org/2000/svg">

                                    <path d="M-8.74228e-08 2L5 7L-5.24537e-07 12L0.999999 14L8 7L1 4.37114e-08L-8.74228e-08 2Z" fill="currentColor"/>

                                </svg>

                            </div>

                        </a>

                    </div>

                </div>

                <div class="shrink-0 snap-start pl-4">

                    <div class="w-[219px] md:w-[307px] rounded-button overflow-hidden hover:shadow-item-product transition duration-300">

                        <a href="#">

                            <div class="relative overflow-hidden h-[213px] md:h-[250px]">

                                <img src="https://i.picsum.photos/id/1/307/250.jpg?hmac=OJzYtXGd1Jgqb3xzDL85PClNsI8XWxgEsyYHqRoaFpw" alt=""

                                     class="absolute top-0 left-1/2 -translate-x-1/2 h-full w-full object-cover">

                            </div>

                            <div class="flex justify-between items-center bg-white py-1.5 px-3.75 md:p-5 text-text-light font-bold tracking-tightened">

                                <span>208</span>

                                <svg class="icon w-2 text-primary-accent" width="8" height="14" viewBox="0 0 8 14" fill="none" xmlns="http://www.w3.org/2000/svg">

                                    <path d="M-8.74228e-08 2L5 7L-5.24537e-07 12L0.999999 14L8 7L1 4.37114e-08L-8.74228e-08 2Z" fill="currentColor"/>

                                </svg>

                            </div>

                        </a>

                    </div>

                </div>

                <div class="shrink-0 snap-start pl-4">

                    <div class="w-[219px] md:w-[307px] rounded-button overflow-hidden hover:shadow-item-product transition duration-300">

                        <a href="#">

                            <div class="relative overflow-hidden h-[213px] md:h-[250px]">

                                <img src="https://i.picsum.photos/id/69/307/250.jpg?hmac=3kjI9iyf_cr7YwGgIPKZpobror3yVyC6EucU4PPhyyY" alt=""

                                     class="absolute top-0 left-1/2 -translate-x-1/2 h-full w-full object-cover">

                            </div>

                            <div class="flex justify-between items-center bg-white py-1.5 px-3.75 md:p-5 text-text-light font-bold tracking-tightened">

                                <span>208</span>

                                <svg class="icon w-2 text-primary-accent" width="8" height="14" viewBox="0 0 8 14" fill="none" xmlns="http://www.w3.org/2000/svg">

                                    <path d="M-8.74228e-08 2L5 7L-5.24537e-07 12L0.999999 14L8 7L1 4.37114e-08L-8.74228e-08 2Z" fill="currentColor"/>

                                </svg>

                            </div>

                        </a>

                    </div>

                </div>

                <div class="shrink-0 snap-start pl-4">

                    <div class="w-[219px] md:w-[307px] rounded-button overflow-hidden hover:shadow-item-product transition duration-300">

                        <a href="#">

                            <div class="relative overflow-hidden h-[213px] md:h-[250px]">

                                <img src="https://i.picsum.photos/id/1077/307/250.jpg?hmac=17g05PWTXTP5yr5mHDPK8owp_f8feN_D9CsKzZ5_1Tk" alt=""

                                     class="absolute top-0 left-1/2 -translate-x-1/2 h-full w-full object-cover">

                            </div>

                            <div class="flex justify-between items-center bg-white py-1.5 px-3.75 md:p-5 text-text-light font-bold tracking-tightened">

                                <span>208</span>

                                <svg class="icon w-2 text-primary-accent" width="8" height="14" viewBox="0 0 8 14" fill="none" xmlns="http://www.w3.org/2000/svg">

                                    <path d="M-8.74228e-08 2L5 7L-5.24537e-07 12L0.999999 14L8 7L1 4.37114e-08L-8.74228e-08 2Z" fill="currentColor"/>

                                </svg>

                            </div>

                        </a>

                    </div>

                </div>

                <div class="shrink-0 snap-start pl-4">

                    <div class="w-[219px] md:w-[307px] rounded-button overflow-hidden hover:shadow-item-product transition duration-300">

                        <a href="#">

                            <div class="relative overflow-hidden h-[213px] md:h-[250px]">

                                <img src="https://i.picsum.photos/id/456/307/250.jpg?hmac=OBbehRzCypfIXzfrxDFcglO1HrrNztb5qcvFC2QLz1c" alt=""

                                     class="absolute top-0 left-1/2 -translate-x-1/2 h-full w-full object-cover">

                            </div>

                            <div class="flex justify-between items-center bg-white py-1.5 px-3.75 md:p-5 text-text-light font-bold tracking-tightened">

                                <span>208</span>

                                <svg class="icon w-2 text-primary-accent" width="8" height="14" viewBox="0 0 8 14" fill="none" xmlns="http://www.w3.org/2000/svg">

                                    <path d="M-8.74228e-08 2L5 7L-5.24537e-07 12L0.999999 14L8 7L1 4.37114e-08L-8.74228e-08 2Z" fill="currentColor"/>

                                </svg>

                            </div>

                        </a>

                    </div>

                </div>

                <div class="shrink-0 snap-start pl-4">

                    <div class="w-[219px] md:w-[307px] rounded-button overflow-hidden hover:shadow-item-product transition duration-300">

                        <a href="#">

                            <div class="relative overflow-hidden h-[213px] md:h-[250px]">

                                <img src="https://i.picsum.photos/id/10/307/250.jpg?hmac=WdhgdwihCPnMvxv0icLdByR3-LiAtANeHlXBrakdzOI" alt=""

                                     class="absolute top-0 left-1/2 -translate-x-1/2 h-full w-full object-cover">

                            </div>

                            <div class="flex justify-between items-center bg-white py-1.5 px-3.75 md:p-5 text-text-light font-bold tracking-tightened">

                                <span>208</span>

                                <svg class="icon w-2 text-primary-accent" width="8" height="14" viewBox="0 0 8 14" fill="none" xmlns="http://www.w3.org/2000/svg">

                                    <path d="M-8.74228e-08 2L5 7L-5.24537e-07 12L0.999999 14L8 7L1 4.37114e-08L-8.74228e-08 2Z" fill="currentColor"/>

                                </svg>

                            </div>

                        </a>

                    </div>

                </div>

            </div>

        </div>

    </div>

</div>

Blue

Blue background - Voir le template
Titre du slider
Sous titre du slider
208
208
208
208
208
208
  • template
<div class="widget widget-slider-items bg-primary py-11 md:py-20">

    <div class="slider-items"

         x-data="sliderItems()"

    >

        <div class="flex items-start justify-between mb-9 md:mb-11 px-5 md:px-20 text-white">

            <div>

                <div class="text-3xl md:text-4.5xl md:leading-13 font-bold tracking-tightened">Titre du slider</div>

                <div class="tracking-tightened font-medium font-base">Sous titre du slider</div>

            </div>

            <div class="flex gap-2" :class="{'hidden': !isSlider}">

                <button x-ref="prevButton" @click="prev()" class="px-5 text-white opacity-60 hover:opacity-100 transition duration-300" title="Précédent">

                    <?= icon('chevron-right', 'w-2.5 -scale-x-100'); ?>

                </button>

                <button x-ref="nextButton" @click="next()" class="px-5 text-white opacity-60 hover:opacity-100 transition duration-300" title="Suivant">

                    <?= icon('chevron-right', 'w-2.5'); ?>

                </button>

            </div>

        </div>

        <div class="slider-items__container relative">

            <div @scroll="scroll()" x-ref="slider" class="slider-items__wrapper flex overflow-scroll md:overflow-hidden snap-x hide-scrollbar scroll-smooth px-5 md:px-20">

                <div class="shrink-0 snap-start pl-4">

                    <div class="w-[219px] md:w-[307px] rounded-button overflow-hidden hover:shadow-item-product transition duration-300">

                        <a href="#">

                            <div class="relative overflow-hidden h-[213px] md:h-[250px]">

                                <img src="https://i.picsum.photos/id/320/307/250.jpg?hmac=8KGklBfHvbwwSBhrsBwPll5n-rkvyaVg8C-UKTLu6iw" alt=""

                                     class="absolute top-0 left-1/2 -translate-x-1/2 h-full w-full object-cover">

                            </div>

                            <div class="flex justify-between items-center bg-ui-light py-1.5 px-3.75 md:p-5 text-text-light font-bold tracking-tightened">

                                <span>208</span>

                                <svg class="icon w-2 text-primary-accent" width="8" height="14" viewBox="0 0 8 14" fill="none" xmlns="http://www.w3.org/2000/svg">

                                    <path d="M-8.74228e-08 2L5 7L-5.24537e-07 12L0.999999 14L8 7L1 4.37114e-08L-8.74228e-08 2Z" fill="currentColor"/>

                                </svg>

                            </div>

                        </a>

                    </div>

                </div>

                <div class="shrink-0 snap-start pl-4">

                    <div class="w-[219px] md:w-[307px] rounded-button overflow-hidden hover:shadow-item-product transition duration-300">

                        <a href="#">

                            <div class="relative overflow-hidden h-[213px] md:h-[250px]">

                                <img src="https://i.picsum.photos/id/1/307/250.jpg?hmac=OJzYtXGd1Jgqb3xzDL85PClNsI8XWxgEsyYHqRoaFpw" alt=""

                                     class="absolute top-0 left-1/2 -translate-x-1/2 h-full w-full object-cover">

                            </div>

                            <div class="flex justify-between items-center bg-ui-light py-1.5 px-3.75 md:p-5 text-text-light font-bold tracking-tightened">

                                <span>208</span>

                                <svg class="icon w-2 text-primary-accent" width="8" height="14" viewBox="0 0 8 14" fill="none" xmlns="http://www.w3.org/2000/svg">

                                    <path d="M-8.74228e-08 2L5 7L-5.24537e-07 12L0.999999 14L8 7L1 4.37114e-08L-8.74228e-08 2Z" fill="currentColor"/>

                                </svg>

                            </div>

                        </a>

                    </div>

                </div>

                <div class="shrink-0 snap-start pl-4">

                    <div class="w-[219px] md:w-[307px] rounded-button overflow-hidden hover:shadow-item-product transition duration-300">

                        <a href="#">

                            <div class="relative overflow-hidden h-[213px] md:h-[250px]">

                                <img src="https://i.picsum.photos/id/69/307/250.jpg?hmac=3kjI9iyf_cr7YwGgIPKZpobror3yVyC6EucU4PPhyyY" alt=""

                                     class="absolute top-0 left-1/2 -translate-x-1/2 h-full w-full object-cover">

                            </div>

                            <div class="flex justify-between items-center bg-ui-light py-1.5 px-3.75 md:p-5 text-text-light font-bold tracking-tightened">

                                <span>208</span>

                                <svg class="icon w-2 text-primary-accent" width="8" height="14" viewBox="0 0 8 14" fill="none" xmlns="http://www.w3.org/2000/svg">

                                    <path d="M-8.74228e-08 2L5 7L-5.24537e-07 12L0.999999 14L8 7L1 4.37114e-08L-8.74228e-08 2Z" fill="currentColor"/>

                                </svg>

                            </div>

                        </a>

                    </div>

                </div>

                <div class="shrink-0 snap-start pl-4">

                    <div class="w-[219px] md:w-[307px] rounded-button overflow-hidden hover:shadow-item-product transition duration-300">

                        <a href="#">

                            <div class="relative overflow-hidden h-[213px] md:h-[250px]">

                                <img src="https://i.picsum.photos/id/1077/307/250.jpg?hmac=17g05PWTXTP5yr5mHDPK8owp_f8feN_D9CsKzZ5_1Tk" alt=""

                                     class="absolute top-0 left-1/2 -translate-x-1/2 h-full w-full object-cover">

                            </div>

                            <div class="flex justify-between items-center bg-ui-light py-1.5 px-3.75 md:p-5 text-text-light font-bold tracking-tightened">

                                <span>208</span>

                                <svg class="icon w-2 text-primary-accent" width="8" height="14" viewBox="0 0 8 14" fill="none" xmlns="http://www.w3.org/2000/svg">

                                    <path d="M-8.74228e-08 2L5 7L-5.24537e-07 12L0.999999 14L8 7L1 4.37114e-08L-8.74228e-08 2Z" fill="currentColor"/>

                                </svg>

                            </div>

                        </a>

                    </div>

                </div>

                <div class="shrink-0 snap-start pl-4">

                    <div class="w-[219px] md:w-[307px] rounded-button overflow-hidden hover:shadow-item-product transition duration-300">

                        <a href="#">

                            <div class="relative overflow-hidden h-[213px] md:h-[250px]">

                                <img src="https://i.picsum.photos/id/456/307/250.jpg?hmac=OBbehRzCypfIXzfrxDFcglO1HrrNztb5qcvFC2QLz1c" alt=""

                                     class="absolute top-0 left-1/2 -translate-x-1/2 h-full w-full object-cover">

                            </div>

                            <div class="flex justify-between items-center bg-ui-light py-1.5 px-3.75 md:p-5 text-text-light font-bold tracking-tightened">

                                <span>208</span>

                                <svg class="icon w-2 text-primary-accent" width="8" height="14" viewBox="0 0 8 14" fill="none" xmlns="http://www.w3.org/2000/svg">

                                    <path d="M-8.74228e-08 2L5 7L-5.24537e-07 12L0.999999 14L8 7L1 4.37114e-08L-8.74228e-08 2Z" fill="currentColor"/>

                                </svg>

                            </div>

                        </a>

                    </div>

                </div>

                <div class="shrink-0 snap-start pl-4">

                    <div class="w-[219px] md:w-[307px] rounded-button overflow-hidden hover:shadow-item-product transition duration-300">

                        <a href="#">

                            <div class="relative overflow-hidden h-[213px] md:h-[250px]">

                                <img src="https://i.picsum.photos/id/10/307/250.jpg?hmac=WdhgdwihCPnMvxv0icLdByR3-LiAtANeHlXBrakdzOI" alt=""

                                     class="absolute top-0 left-1/2 -translate-x-1/2 h-full w-full object-cover">

                            </div>

                            <div class="flex justify-between items-center bg-ui-light py-1.5 px-3.75 md:p-5 text-text-light font-bold tracking-tightened">

                                <span>208</span>

                                <svg class="icon w-2 text-primary-accent" width="8" height="14" viewBox="0 0 8 14" fill="none" xmlns="http://www.w3.org/2000/svg">

                                    <path d="M-8.74228e-08 2L5 7L-5.24537e-07 12L0.999999 14L8 7L1 4.37114e-08L-8.74228e-08 2Z" fill="currentColor"/>

                                </svg>

                            </div>

                        </a>

                    </div>

                </div>

            </div>

        </div>

    </div>

</div>

Blue with faded items

Blue with faded items - Voir le template
Vos avis sur la concession
Prénom N.
Ville
Rapide, efficace et agréable, Hector a été notre interlocuteur unique tout au long de notre expérience, ça facilite vraiment les choses.
Prénom N.
Ville
Rapide, efficace et agréable, Hector a été notre interlocuteur unique tout au long de notre expérience, ça facilite vraiment les choses.
Prénom N.
Ville
Rapide, efficace et agréable, Hector a été notre interlocuteur unique tout au long de notre expérience, ça facilite vraiment les choses.
Prénom N.
Ville
Rapide, efficace et agréable, Hector a été notre interlocuteur unique tout au long de notre expérience, ça facilite vraiment les choses.
Prénom N.
Ville
Rapide, efficace et agréable, Hector a été notre interlocuteur unique tout au long de notre expérience, ça facilite vraiment les choses.
Prénom N.
Ville
Rapide, efficace et agréable, Hector a été notre interlocuteur unique tout au long de notre expérience, ça facilite vraiment les choses.
Prénom N.
Ville
Rapide, efficace et agréable, Hector a été notre interlocuteur unique tout au long de notre expérience, ça facilite vraiment les choses.
Prénom N.
Ville
Rapide, efficace et agréable, Hector a été notre interlocuteur unique tout au long de notre expérience, ça facilite vraiment les choses.
Prénom N.
Ville
Rapide, efficace et agréable, Hector a été notre interlocuteur unique tout au long de notre expérience, ça facilite vraiment les choses.
Prénom N.
Ville
Rapide, efficace et agréable, Hector a été notre interlocuteur unique tout au long de notre expérience, ça facilite vraiment les choses.
Prénom N.
Ville
Rapide, efficace et agréable, Hector a été notre interlocuteur unique tout au long de notre expérience, ça facilite vraiment les choses.
Prénom N.
Ville
Rapide, efficace et agréable, Hector a été notre interlocuteur unique tout au long de notre expérience, ça facilite vraiment les choses.
Prénom N.
Ville
Rapide, efficace et agréable, Hector a été notre interlocuteur unique tout au long de notre expérience, ça facilite vraiment les choses.
  • template
<div class="widget widget-slider-items bg-primary py-11 md:py-20">

    <div class="slider-items"

         x-data="sliderItems()"

         @resize.window="resize()"

         data-faded

    >

        <div class="flex items-center justify-between mb-9 md:mb-11 px-5 md:px-20 text-white">

            <div>

                <div class="text-3xl md:text-4.5xl md:leading-13 font-bold tracking-tightened">Vos avis sur la concession</div>

            </div>

            <div class="flex gap-2" :class="{'hidden': !isSlider}">

                <button x-ref="prevButton" @click="prev()" class="px-5 text-white opacity-60 hover:opacity-100 transition duration-300" title="Précédent">

                    <?= icon('chevron-right', 'w-3.25 -scale-x-100'); ?>

                </button>

                <button x-ref="nextButton" @click="next()" class="px-5 text-white opacity-60 hover:opacity-100 transition duration-300" title="Suivant">

                    <?= icon('chevron-right', 'w-3.25'); ?>

                </button>

            </div>

        </div>

        <div class="slider-items__container relative">

            <div @scroll="scroll()" x-ref="slider" id="slider" class="slider-items__wrapper flex overflow-scroll md:overflow-hidden snap-x hide-scrollbar scroll-smooth px-5 md:px-20">

                <div class="shrink-0 snap-start pl-4 transition-all duration-300">

                    <?php include renderTemplate('molecule/tiles/slider/tile-review'); ?>

                </div>

                <div class="shrink-0 snap-start pl-4 transition-all duration-300">

                    <?php include renderTemplate('molecule/tiles/slider/tile-review'); ?>

                </div>

                <div class="shrink-0 snap-start pl-4 transition-all duration-300">

                    <?php include renderTemplate('molecule/tiles/slider/tile-review'); ?>

                </div>

                <div class="shrink-0 snap-start pl-4 transition-all duration-300">

                    <?php include renderTemplate('molecule/tiles/slider/tile-review'); ?>

                </div>

                <div class="shrink-0 snap-start pl-4 transition-all duration-300">

                    <?php include renderTemplate('molecule/tiles/slider/tile-review'); ?>

                </div>

                <div class="shrink-0 snap-start pl-4 transition-all duration-300">

                    <?php include renderTemplate('molecule/tiles/slider/tile-review'); ?>

                </div>

                <div class="shrink-0 snap-start pl-4 transition-all duration-300">

                    <?php include renderTemplate('molecule/tiles/slider/tile-review'); ?>

                </div>

                <div class="shrink-0 snap-start pl-4 transition-all duration-300">

                    <?php include renderTemplate('molecule/tiles/slider/tile-review'); ?>

                </div>

                <div class="shrink-0 snap-start pl-4 transition-all duration-300">

                    <?php include renderTemplate('molecule/tiles/slider/tile-review'); ?>

                </div>

                <div class="shrink-0 snap-start pl-4 transition-all duration-300">

                    <?php include renderTemplate('molecule/tiles/slider/tile-review'); ?>

                </div>

                <div class="shrink-0 snap-start pl-4 transition-all duration-300">

                    <?php include renderTemplate('molecule/tiles/slider/tile-review'); ?>

                </div>

                <div class="shrink-0 snap-start pl-4 transition-all duration-300">

                    <?php include renderTemplate('molecule/tiles/slider/tile-review'); ?>

                </div>

                <div class="shrink-0 snap-start pl-4 transition-all duration-300">

                    <?php include renderTemplate('molecule/tiles/slider/tile-review'); ?>

                </div>

            </div>

        </div>

        <div class="px-5 md:px-20 mt-7.5 md:mt-14">

            <button class="btn btn-secondary-white">Laisser un commentaire</button>

        </div>

    </div>

</div>

Services

Services - Voir le template
Tous les services de
Peugeot Auch
  • template
<div class="widget widget-slider-items bg-white py-11 md:py-20">

    <div class="slider-items"

         x-data="sliderItemsDoubleRow()"

         @resize.window="resize()"

    >

        <div class="flex items-start justify-between mb-9 md:mb-11 px-5 md:px-20">

            <div class="text-3xl md:text-4.5xl md:leading-13 font-bold tracking-tightened">Tous les services de<br>Peugeot Auch</div>

            <div class="flex gap-2" :class="{'hidden': !isSlider}">

                <button x-ref="prevButton" @click="prev()" class="px-5 text-text-light opacity-70 hover:opacity-100 transition duration-300" title="Précédent">

                    <?= icon('chevron-right', 'w-2.5 -scale-x-100'); ?>

                </button>

                <button x-ref="nextButton" @click="next()" class="px-5 text-text-light opacity-70 hover:opacity-100 transition duration-300" title="Suivant">

                    <?= icon('chevron-right', 'w-2.5'); ?>

                </button>

            </div>

        </div>

        <div class="slider-items__container relative">

            <div @scroll="scroll()" x-ref="slider" class="slider-items__wrapper flex overflow-scroll md:overflow-hidden snap-x hide-scrollbar scroll-smooth px-5 md:px-20">

                <template x-for="i in 10" x-if="!isMobile" class="hidden">

                    <div data-row class="shrink-0 snap-start pl-4 flex md:flex-col gap-3.75">

                        <div data-item>

                            <?php include renderTemplate('molecule/tiles/slider/tile-service', 'blue'); ?>

                        </div>

                        <div data-item>

                            <?php include renderTemplate('molecule/tiles/slider/tile-service', 'blue'); ?>

                        </div>

                    </div>

                </template>

            </div>

        </div>

    </div>

</div>