Base - Voir le template
Titre du slider
<div class="slider-items"
x-data="sliderItems()"
>
<div class="flex justify-between items-start 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 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">
<svg class="icon w-2.5 -scale-x-100" 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>
</button>
<button x-ref="nextButton" @click="next()" class="px-5 text-text-light opacity-70 hover:opacity-100 transition duration-300" title="Suivant">
<svg class="icon w-2.5" 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>
</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>
Without enough item for slide desktop - Voir le template
Titre du slider
<div class="slider-items"
x-data="sliderItems()"
>
<div class="flex justify-between items-start 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 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">
<svg class="icon w-2.5 -scale-x-100" 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>
</button>
<button x-ref="nextButton" @click="next()" class="px-5 text-text-light opacity-70 hover:opacity-100 transition duration-300">
<svg class="icon w-2.5" 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>
</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>
</div>
</div>
Tiny Slider - Voir le template