Widget Carousel

<div class="container-cms py-14 lg:py-20">

    <div class="carousel-items" x-data="carouselSlider()">

        <div class="overflow-hidden relative flex items-center gap-6">

            <button x-ref="prevButton" @click="prev()" class="lg:flex hidden hover:bg-ui bg-white border-1 border-ui rounded-full w-14 h-14 shrink-0 items-center justify-center 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>

            <div x-ref="carousel" @scroll="scroll()" class="carousel-items__carousel flex overflow-scroll scroll-smooth hide-scrollbar gap-1.5 snap-x">

                <img data-key="0" src="https://picsum.photos/1000/500" class="snap-center shrink-0 w-full lg:w-1/2"/>

                <img data-key="1" src="https://picsum.photos/1000/500" class="snap-center shrink-0 w-full lg:w-1/2"/>

                <img data-key="2" src="https://picsum.photos/1000/500" class="snap-center shrink-0 w-full lg:w-1/2"/>

            </div>

            <button x-ref="nextButton" @click="next()" class="lg:flex hidden hover:bg-ui bg-white border-1 border-ui rounded-full w-14 h-14 shrink-0 items-center justify-center text-text-light opacity-70 hover:opacity-100 transition duration-300" title="Suivant">

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

            </button>

        </div>

        <div x-ref="controller" class="lg:hidden carousel-items__controller pt-7.5 flex justify-center gap-7.5">

            <div @click="setActive(0)" class="carousel-items__controller__item current"></div>

            <div @click="setActive(1)" class="carousel-items__controller__item"></div>

            <div @click="setActive(2)" class="carousel-items__controller__item"></div>

        </div>

    </div>

</div>