Alain Afflelou Design System

Product Carousel: Default 

<div x-data="initCarouselcarousel1328246011()" x-init="init()" class="relative w-full h-full mx-auto">

    <div class="flex justify-between items-center mb-8 ">
        <h2 class="text-3xl font-semibold ">La collection MAGIC</h2>

        <div class="flex items-center justify-center space-x-4 ">
            <a href="https://www.afflelou.com/" target="_blank" rel="noopenner noreferer" class="hidden sm:inline-flex mx-auto  btn btn-dark-subtle ">
                Voir toute la collection

            </a>

            <div class=" hidden  sm:flex  flex space-x-2">
                <button type="button" class="carousel-button-prev-carousel-1328246011 before:border-none  btn btn-dark-subtle  btn-only-icon">
                    <svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path fill-rule="evenodd" clip-rule="evenodd" d="M9.46967 12.5303C9.17678 12.2374 9.17678 11.7626 9.46967 11.4697L13.4697 7.46967C13.7626 7.17678 14.2374 7.17678 14.5303 7.46967C14.8232 7.76256 14.8232 8.23744 14.5303 8.53033L11.0607 12L14.5303 15.4697C14.8232 15.7626 14.8232 16.2374 14.5303 16.5303C14.2374 16.8232 13.7626 16.8232 13.4697 16.5303L9.46967 12.5303Z" fill="currentColor" />
                    </svg>

                </button>
                <button type="button" class="carousel-button-next-carousel-1328246011 before:border-none  btn btn-dark-subtle  btn-only-icon">
                    <svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path fill-rule="evenodd" clip-rule="evenodd" d="M14.5303 11.4697C14.8232 11.7626 14.8232 12.2374 14.5303 12.5303L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303C9.17678 16.2374 9.17678 15.7626 9.46967 15.4697L12.9393 12L9.46967 8.53033C9.17678 8.23744 9.17678 7.76256 9.46967 7.46967C9.76256 7.17678 10.2374 7.17678 10.5303 7.46967L14.5303 11.4697Z" fill="currentColor" />
                    </svg>

                </button>
            </div>
        </div>
    </div>

    <div x-ref="swiperContainer" id="carousel-1328246011" class="swiper md:h-full">
        <div class="swiper-wrapper ">
            <div class="swiper-slide !transform-none " data-theme="light" data-hash="index-carousel-1328246011-0">

                <div class="flex flex-col space-y-4 ">
                    <a href="#" class="block relative aspect-square overflow-hidden bg-gray-100 rounded-lg group hover:after:!h-0 noAbsolute">
                        <div class="relative w-full h-full">
                            <img src="/img/productsSlider/magicProduct1.png" alt="MAGIC 262" class="w-full h-full object-cover transition-all duration-300 absolute inset-0  group-hover:opacity-0 ">
                            <img src="/img/productsSlider/hoverMagicProduct1.png" alt="MAGIC 262 - Vue alternative" class="w-full h-full object-cover transition-all duration-300 absolute inset-0 opacity-0 group-hover:opacity-100">
                        </div>

                        <div class="absolute bottom-4 right-1/2 flex space-x-4 translate-x-2/4 duration-300 z-20">
                            <button type="button" class="group-hover:!btn-dark-ghost  btn btn-light-ghost btn-size-sm btn-only-icon">
                                <svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path fill-rule="evenodd" clip-rule="evenodd" d="M12.4907 20.5806C12.4538 20.603 12.4158 20.6259 12.3786 20.6477C12.1434 20.785 11.8519 20.7838 11.6176 20.645L11.5062 20.5774C11.4366 20.5345 11.3359 20.4717 11.2087 20.3901C10.9544 20.227 10.5934 19.9884 10.1613 19.6831C9.2984 19.0734 8.14487 18.193 6.98812 17.1121C4.71943 14.9921 2.25 11.9278 2.25 8.51266C2.25 5.58716 4.58441 3.25 7.5 3.25C9.03842 3.25 10.3421 4.16053 11.1962 4.9489C11.5116 5.24006 11.7824 5.53002 12 5.78205C12.2176 5.53002 12.4884 5.24006 12.8038 4.9489C13.6579 4.16053 14.9616 3.25 16.5 3.25C19.4142 3.25 21.75 5.58579 21.75 8.5C21.75 11.9589 19.283 15.0258 17.0112 17.1406C15.8539 18.218 14.6998 19.0918 13.8365 19.6958C13.4042 19.9983 13.043 20.2343 12.7885 20.3956C12.6612 20.4762 12.5604 20.5382 12.4907 20.5806ZM3.75 8.51266C3.75 11.2516 5.78075 13.9309 8.01225 16.0161C9.10559 17.0378 10.2022 17.8753 11.0268 18.458C11.4296 18.7425 11.7658 18.9651 12.0029 19.1175C12.2398 18.9672 12.5751 18.7476 12.9766 18.4667C13.8007 17.8902 14.8966 17.0598 15.9892 16.0427C18.2172 13.9686 20.25 11.2855 20.25 8.5C20.25 6.41421 18.5858 4.75 16.5 4.75C15.5384 4.75 14.5921 5.33947 13.8212 6.0511C13.4488 6.3949 13.1457 6.74102 12.9356 7.00175C12.8311 7.13154 12.7508 7.23868 12.6977 7.31179C12.6712 7.34831 12.6515 7.37623 12.6391 7.39411L12.626 7.41317L12.624 7.41603C12.4849 7.62448 12.2506 7.75 12 7.75C11.7496 7.75 11.5153 7.62451 11.3762 7.41634L11.374 7.41317L11.3609 7.39411C11.3485 7.37623 11.3288 7.34831 11.3023 7.31179C11.2492 7.23868 11.1689 7.13154 11.0644 7.00175C10.8543 6.74102 10.5512 6.3949 10.1788 6.0511C9.72644 5.63355 9.21372 5.25805 8.67296 5.01901C8.29212 4.85066 7.89737 4.75 7.5 4.75C5.41559 4.75 3.75 6.41284 3.75 8.51266Z" fill="currentColor" />
                                </svg>

                            </button>

                            <button type="button" class="group-hover:!btn-dark-ghost  btn btn-light-ghost btn-size-sm btn-only-icon">
                                <svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path fill-rule="evenodd" clip-rule="evenodd" d="M6.5 4.25C3.87665 4.25 1.75 6.37665 1.75 9V15C1.75 17.6234 3.87665 19.75 6.5 19.75H12.5C14.7589 19.75 16.6495 18.1732 17.1312 16.0603L19.8501 17.1478C20.9996 17.6076 22.25 16.7611 22.25 15.523V12V8.47706C22.25 7.239 20.9996 6.39242 19.8501 6.85223L17.1312 7.93976C16.6495 5.82679 14.7589 4.25 12.5 4.25H6.5ZM17.25 9.5078L20.4072 8.24494C20.5714 8.17925 20.75 8.30019 20.75 8.47706V12V15.523C20.75 15.6999 20.5714 15.8208 20.4072 15.7551L17.25 14.4923V9.5078ZM15.75 9.33854V14.6615V15C15.75 16.7949 14.2949 18.25 12.5 18.25H6.5C4.70507 18.25 3.25 16.7949 3.25 15V9C3.25 7.20507 4.70507 5.75 6.5 5.75H12.5C14.2949 5.75 15.75 7.20507 15.75 9V9.33854Z" fill="currentColor" />
                                </svg>

                            </button>
                        </div>
                    </a>

                    <div class="px-2">
                        <p class="text-xxs font-semibold text-neutral-500">ALAIN AFFLELOU</p>

                        <h3 class="font-semibold text-neutral-800 pt-0.5">MAGIC 262</h3>

                        <p class="text-xs text-neutral-500 pt-1">Lunettes de vue MAGIC + 2 clips inclus</p>

                        <p class="text-xs text-neutral-500 pt-2">3 couleurs disponibles</p>

                        <div class="pt-3">
                            <p class="text-[9px] text-neutral-500">PRIX WEB</p>

                            <div class="flex items-center gap-2">
                                <p class="font-semibold text-neutral-800">
                                    199,00 €
                                </p>

                            </div>
                        </div>

                    </div>
                </div>
            </div>
            <div class="swiper-slide !transform-none " data-theme="light" data-hash="index-carousel-1328246011-1">

                <div class="flex flex-col space-y-4 ">
                    <a href="#" class="block relative aspect-square overflow-hidden bg-gray-100 rounded-lg group hover:after:!h-0 noAbsolute">
                        <div class="relative w-full h-full">
                            <img src="/img/productsSlider/magicProduct2.png" alt="Enola" class="w-full h-full object-cover transition-all duration-300 absolute inset-0  group-hover:opacity-0 ">
                            <img src="/img/productsSlider/hoverMagicProduct2.png" alt="Enola - Vue alternative" class="w-full h-full object-cover transition-all duration-300 absolute inset-0 opacity-0 group-hover:opacity-100">
                        </div>

                        <div class="absolute bottom-4 right-1/2 flex space-x-4 translate-x-2/4 duration-300 z-20">
                            <button type="button" class="group-hover:!btn-dark-ghost  btn btn-light-ghost btn-size-sm btn-only-icon">
                                <svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path fill-rule="evenodd" clip-rule="evenodd" d="M12.4907 20.5806C12.4538 20.603 12.4158 20.6259 12.3786 20.6477C12.1434 20.785 11.8519 20.7838 11.6176 20.645L11.5062 20.5774C11.4366 20.5345 11.3359 20.4717 11.2087 20.3901C10.9544 20.227 10.5934 19.9884 10.1613 19.6831C9.2984 19.0734 8.14487 18.193 6.98812 17.1121C4.71943 14.9921 2.25 11.9278 2.25 8.51266C2.25 5.58716 4.58441 3.25 7.5 3.25C9.03842 3.25 10.3421 4.16053 11.1962 4.9489C11.5116 5.24006 11.7824 5.53002 12 5.78205C12.2176 5.53002 12.4884 5.24006 12.8038 4.9489C13.6579 4.16053 14.9616 3.25 16.5 3.25C19.4142 3.25 21.75 5.58579 21.75 8.5C21.75 11.9589 19.283 15.0258 17.0112 17.1406C15.8539 18.218 14.6998 19.0918 13.8365 19.6958C13.4042 19.9983 13.043 20.2343 12.7885 20.3956C12.6612 20.4762 12.5604 20.5382 12.4907 20.5806ZM3.75 8.51266C3.75 11.2516 5.78075 13.9309 8.01225 16.0161C9.10559 17.0378 10.2022 17.8753 11.0268 18.458C11.4296 18.7425 11.7658 18.9651 12.0029 19.1175C12.2398 18.9672 12.5751 18.7476 12.9766 18.4667C13.8007 17.8902 14.8966 17.0598 15.9892 16.0427C18.2172 13.9686 20.25 11.2855 20.25 8.5C20.25 6.41421 18.5858 4.75 16.5 4.75C15.5384 4.75 14.5921 5.33947 13.8212 6.0511C13.4488 6.3949 13.1457 6.74102 12.9356 7.00175C12.8311 7.13154 12.7508 7.23868 12.6977 7.31179C12.6712 7.34831 12.6515 7.37623 12.6391 7.39411L12.626 7.41317L12.624 7.41603C12.4849 7.62448 12.2506 7.75 12 7.75C11.7496 7.75 11.5153 7.62451 11.3762 7.41634L11.374 7.41317L11.3609 7.39411C11.3485 7.37623 11.3288 7.34831 11.3023 7.31179C11.2492 7.23868 11.1689 7.13154 11.0644 7.00175C10.8543 6.74102 10.5512 6.3949 10.1788 6.0511C9.72644 5.63355 9.21372 5.25805 8.67296 5.01901C8.29212 4.85066 7.89737 4.75 7.5 4.75C5.41559 4.75 3.75 6.41284 3.75 8.51266Z" fill="currentColor" />
                                </svg>

                            </button>

                            <button type="button" class="group-hover:!btn-dark-ghost  btn btn-light-ghost btn-size-sm btn-only-icon">
                                <svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path fill-rule="evenodd" clip-rule="evenodd" d="M6.5 4.25C3.87665 4.25 1.75 6.37665 1.75 9V15C1.75 17.6234 3.87665 19.75 6.5 19.75H12.5C14.7589 19.75 16.6495 18.1732 17.1312 16.0603L19.8501 17.1478C20.9996 17.6076 22.25 16.7611 22.25 15.523V12V8.47706C22.25 7.239 20.9996 6.39242 19.8501 6.85223L17.1312 7.93976C16.6495 5.82679 14.7589 4.25 12.5 4.25H6.5ZM17.25 9.5078L20.4072 8.24494C20.5714 8.17925 20.75 8.30019 20.75 8.47706V12V15.523C20.75 15.6999 20.5714 15.8208 20.4072 15.7551L17.25 14.4923V9.5078ZM15.75 9.33854V14.6615V15C15.75 16.7949 14.2949 18.25 12.5 18.25H6.5C4.70507 18.25 3.25 16.7949 3.25 15V9C3.25 7.20507 4.70507 5.75 6.5 5.75H12.5C14.2949 5.75 15.75 7.20507 15.75 9V9.33854Z" fill="currentColor" />
                                </svg>

                            </button>
                        </div>
                    </a>

                    <div class="px-2">
                        <p class="text-xxs font-semibold text-neutral-500">ALAIN AFFLELOU</p>

                        <h3 class="font-semibold text-neutral-800 pt-0.5">Enola</h3>

                        <p class="text-xs text-neutral-500 pt-1">Lunettes de vue MAGIC</p>

                        <p class="text-xs text-neutral-500 pt-2">5 couleurs disponibles</p>

                        <div class="pt-3">
                            <p class="text-[9px] text-neutral-500">PRIX WEB</p>

                            <div class="flex items-center gap-2">
                                <p class="font-semibold text-neutral-800">
                                    109,00 €
                                </p>

                            </div>
                        </div>

                    </div>
                </div>
            </div>
            <div class="swiper-slide !transform-none " data-theme="light" data-hash="index-carousel-1328246011-2">

                <div class="flex flex-col space-y-4 ">
                    <a href="#" class="block relative aspect-square overflow-hidden bg-gray-100 rounded-lg group hover:after:!h-0 noAbsolute">
                        <div class="relative w-full h-full">
                            <img src="/img/productsSlider/magicProduct3.png" alt="MAGIC 222" class="w-full h-full object-cover transition-all duration-300 absolute inset-0  group-hover:opacity-0 ">
                            <img src="/img/productsSlider/hoverMagicProduct3.png" alt="MAGIC 222 - Vue alternative" class="w-full h-full object-cover transition-all duration-300 absolute inset-0 opacity-0 group-hover:opacity-100">
                        </div>

                        <div class="absolute bottom-4 right-1/2 flex space-x-4 translate-x-2/4 duration-300 z-20">
                            <button type="button" class="group-hover:!btn-dark-ghost  btn btn-light-ghost btn-size-sm btn-only-icon">
                                <svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path fill-rule="evenodd" clip-rule="evenodd" d="M12.4907 20.5806C12.4538 20.603 12.4158 20.6259 12.3786 20.6477C12.1434 20.785 11.8519 20.7838 11.6176 20.645L11.5062 20.5774C11.4366 20.5345 11.3359 20.4717 11.2087 20.3901C10.9544 20.227 10.5934 19.9884 10.1613 19.6831C9.2984 19.0734 8.14487 18.193 6.98812 17.1121C4.71943 14.9921 2.25 11.9278 2.25 8.51266C2.25 5.58716 4.58441 3.25 7.5 3.25C9.03842 3.25 10.3421 4.16053 11.1962 4.9489C11.5116 5.24006 11.7824 5.53002 12 5.78205C12.2176 5.53002 12.4884 5.24006 12.8038 4.9489C13.6579 4.16053 14.9616 3.25 16.5 3.25C19.4142 3.25 21.75 5.58579 21.75 8.5C21.75 11.9589 19.283 15.0258 17.0112 17.1406C15.8539 18.218 14.6998 19.0918 13.8365 19.6958C13.4042 19.9983 13.043 20.2343 12.7885 20.3956C12.6612 20.4762 12.5604 20.5382 12.4907 20.5806ZM3.75 8.51266C3.75 11.2516 5.78075 13.9309 8.01225 16.0161C9.10559 17.0378 10.2022 17.8753 11.0268 18.458C11.4296 18.7425 11.7658 18.9651 12.0029 19.1175C12.2398 18.9672 12.5751 18.7476 12.9766 18.4667C13.8007 17.8902 14.8966 17.0598 15.9892 16.0427C18.2172 13.9686 20.25 11.2855 20.25 8.5C20.25 6.41421 18.5858 4.75 16.5 4.75C15.5384 4.75 14.5921 5.33947 13.8212 6.0511C13.4488 6.3949 13.1457 6.74102 12.9356 7.00175C12.8311 7.13154 12.7508 7.23868 12.6977 7.31179C12.6712 7.34831 12.6515 7.37623 12.6391 7.39411L12.626 7.41317L12.624 7.41603C12.4849 7.62448 12.2506 7.75 12 7.75C11.7496 7.75 11.5153 7.62451 11.3762 7.41634L11.374 7.41317L11.3609 7.39411C11.3485 7.37623 11.3288 7.34831 11.3023 7.31179C11.2492 7.23868 11.1689 7.13154 11.0644 7.00175C10.8543 6.74102 10.5512 6.3949 10.1788 6.0511C9.72644 5.63355 9.21372 5.25805 8.67296 5.01901C8.29212 4.85066 7.89737 4.75 7.5 4.75C5.41559 4.75 3.75 6.41284 3.75 8.51266Z" fill="currentColor" />
                                </svg>

                            </button>

                            <button type="button" class="group-hover:!btn-dark-ghost  btn btn-light-ghost btn-size-sm btn-only-icon">
                                <svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path fill-rule="evenodd" clip-rule="evenodd" d="M6.5 4.25C3.87665 4.25 1.75 6.37665 1.75 9V15C1.75 17.6234 3.87665 19.75 6.5 19.75H12.5C14.7589 19.75 16.6495 18.1732 17.1312 16.0603L19.8501 17.1478C20.9996 17.6076 22.25 16.7611 22.25 15.523V12V8.47706C22.25 7.239 20.9996 6.39242 19.8501 6.85223L17.1312 7.93976C16.6495 5.82679 14.7589 4.25 12.5 4.25H6.5ZM17.25 9.5078L20.4072 8.24494C20.5714 8.17925 20.75 8.30019 20.75 8.47706V12V15.523C20.75 15.6999 20.5714 15.8208 20.4072 15.7551L17.25 14.4923V9.5078ZM15.75 9.33854V14.6615V15C15.75 16.7949 14.2949 18.25 12.5 18.25H6.5C4.70507 18.25 3.25 16.7949 3.25 15V9C3.25 7.20507 4.70507 5.75 6.5 5.75H12.5C14.2949 5.75 15.75 7.20507 15.75 9V9.33854Z" fill="currentColor" />
                                </svg>

                            </button>
                        </div>
                    </a>

                    <div class="px-2">
                        <p class="text-xxs font-semibold text-neutral-500">ALAIN AFFLELOU</p>

                        <h3 class="font-semibold text-neutral-800 pt-0.5">MAGIC 222</h3>

                        <p class="text-xs text-neutral-500 pt-1">Lunettes de vue MAGIC + 2 clips inclus</p>

                        <p class="text-xs text-neutral-500 pt-2">2 couleurs disponibles</p>

                        <div class="pt-3">
                            <p class="text-[9px] text-neutral-500">PRIX WEB</p>

                            <div class="flex items-center gap-2">
                                <p class="font-semibold text-neutral-800">
                                    179,00 €
                                </p>

                            </div>
                        </div>

                    </div>
                </div>
            </div>
            <div class="swiper-slide !transform-none " data-theme="light" data-hash="index-carousel-1328246011-3">

                <div class="flex flex-col space-y-4 ">
                    <a href="#" class="block relative aspect-square overflow-hidden bg-gray-100 rounded-lg group hover:after:!h-0 noAbsolute">
                        <div class="relative w-full h-full">
                            <img src="/img/productsSlider/magicProduct1.png" alt="Enola" class="w-full h-full object-cover transition-all duration-300 absolute inset-0  group-hover:opacity-0 ">
                            <img src="/img/productsSlider/hoverMagicProduct1.png" alt="Enola - Vue alternative" class="w-full h-full object-cover transition-all duration-300 absolute inset-0 opacity-0 group-hover:opacity-100">
                        </div>

                        <div class="absolute bottom-4 right-1/2 flex space-x-4 translate-x-2/4 duration-300 z-20">
                            <button type="button" class="group-hover:!btn-dark-ghost  btn btn-light-ghost btn-size-sm btn-only-icon">
                                <svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path fill-rule="evenodd" clip-rule="evenodd" d="M12.4907 20.5806C12.4538 20.603 12.4158 20.6259 12.3786 20.6477C12.1434 20.785 11.8519 20.7838 11.6176 20.645L11.5062 20.5774C11.4366 20.5345 11.3359 20.4717 11.2087 20.3901C10.9544 20.227 10.5934 19.9884 10.1613 19.6831C9.2984 19.0734 8.14487 18.193 6.98812 17.1121C4.71943 14.9921 2.25 11.9278 2.25 8.51266C2.25 5.58716 4.58441 3.25 7.5 3.25C9.03842 3.25 10.3421 4.16053 11.1962 4.9489C11.5116 5.24006 11.7824 5.53002 12 5.78205C12.2176 5.53002 12.4884 5.24006 12.8038 4.9489C13.6579 4.16053 14.9616 3.25 16.5 3.25C19.4142 3.25 21.75 5.58579 21.75 8.5C21.75 11.9589 19.283 15.0258 17.0112 17.1406C15.8539 18.218 14.6998 19.0918 13.8365 19.6958C13.4042 19.9983 13.043 20.2343 12.7885 20.3956C12.6612 20.4762 12.5604 20.5382 12.4907 20.5806ZM3.75 8.51266C3.75 11.2516 5.78075 13.9309 8.01225 16.0161C9.10559 17.0378 10.2022 17.8753 11.0268 18.458C11.4296 18.7425 11.7658 18.9651 12.0029 19.1175C12.2398 18.9672 12.5751 18.7476 12.9766 18.4667C13.8007 17.8902 14.8966 17.0598 15.9892 16.0427C18.2172 13.9686 20.25 11.2855 20.25 8.5C20.25 6.41421 18.5858 4.75 16.5 4.75C15.5384 4.75 14.5921 5.33947 13.8212 6.0511C13.4488 6.3949 13.1457 6.74102 12.9356 7.00175C12.8311 7.13154 12.7508 7.23868 12.6977 7.31179C12.6712 7.34831 12.6515 7.37623 12.6391 7.39411L12.626 7.41317L12.624 7.41603C12.4849 7.62448 12.2506 7.75 12 7.75C11.7496 7.75 11.5153 7.62451 11.3762 7.41634L11.374 7.41317L11.3609 7.39411C11.3485 7.37623 11.3288 7.34831 11.3023 7.31179C11.2492 7.23868 11.1689 7.13154 11.0644 7.00175C10.8543 6.74102 10.5512 6.3949 10.1788 6.0511C9.72644 5.63355 9.21372 5.25805 8.67296 5.01901C8.29212 4.85066 7.89737 4.75 7.5 4.75C5.41559 4.75 3.75 6.41284 3.75 8.51266Z" fill="currentColor" />
                                </svg>

                            </button>

                            <button type="button" class="group-hover:!btn-dark-ghost  btn btn-light-ghost btn-size-sm btn-only-icon">
                                <svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path fill-rule="evenodd" clip-rule="evenodd" d="M6.5 4.25C3.87665 4.25 1.75 6.37665 1.75 9V15C1.75 17.6234 3.87665 19.75 6.5 19.75H12.5C14.7589 19.75 16.6495 18.1732 17.1312 16.0603L19.8501 17.1478C20.9996 17.6076 22.25 16.7611 22.25 15.523V12V8.47706C22.25 7.239 20.9996 6.39242 19.8501 6.85223L17.1312 7.93976C16.6495 5.82679 14.7589 4.25 12.5 4.25H6.5ZM17.25 9.5078L20.4072 8.24494C20.5714 8.17925 20.75 8.30019 20.75 8.47706V12V15.523C20.75 15.6999 20.5714 15.8208 20.4072 15.7551L17.25 14.4923V9.5078ZM15.75 9.33854V14.6615V15C15.75 16.7949 14.2949 18.25 12.5 18.25H6.5C4.70507 18.25 3.25 16.7949 3.25 15V9C3.25 7.20507 4.70507 5.75 6.5 5.75H12.5C14.2949 5.75 15.75 7.20507 15.75 9V9.33854Z" fill="currentColor" />
                                </svg>

                            </button>
                        </div>
                    </a>

                    <div class="px-2">
                        <p class="text-xxs font-semibold text-neutral-500">ALAIN AFFLELOU</p>

                        <h3 class="font-semibold text-neutral-800 pt-0.5">Enola</h3>

                        <p class="text-xs text-neutral-500 pt-1">Lunettes de vue MAGIC</p>

                        <p class="text-xs text-neutral-500 pt-2">5 couleurs disponibles</p>

                        <div class="pt-3">
                            <p class="text-[9px] text-neutral-500">PRIX WEB</p>

                            <div class="flex items-center gap-2">
                                <p class="font-semibold text-neutral-800">
                                    109,00 €
                                </p>

                            </div>
                        </div>

                    </div>
                </div>
            </div>
            <div class="swiper-slide !transform-none " data-theme="light" data-hash="index-carousel-1328246011-4">

                <div class="flex flex-col space-y-4 ">
                    <a href="#" class="block relative aspect-square overflow-hidden bg-gray-100 rounded-lg group hover:after:!h-0 noAbsolute">
                        <div class="relative w-full h-full">
                            <img src="/img/productsSlider/magicProduct2.png" alt="MAGIC 222" class="w-full h-full object-cover transition-all duration-300 absolute inset-0  group-hover:opacity-0 ">
                            <img src="/img/productsSlider/hoverMagicProduct2.png" alt="MAGIC 222 - Vue alternative" class="w-full h-full object-cover transition-all duration-300 absolute inset-0 opacity-0 group-hover:opacity-100">
                        </div>

                        <div class="absolute bottom-4 right-1/2 flex space-x-4 translate-x-2/4 duration-300 z-20">
                            <button type="button" class="group-hover:!btn-dark-ghost  btn btn-light-ghost btn-size-sm btn-only-icon">
                                <svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path fill-rule="evenodd" clip-rule="evenodd" d="M12.4907 20.5806C12.4538 20.603 12.4158 20.6259 12.3786 20.6477C12.1434 20.785 11.8519 20.7838 11.6176 20.645L11.5062 20.5774C11.4366 20.5345 11.3359 20.4717 11.2087 20.3901C10.9544 20.227 10.5934 19.9884 10.1613 19.6831C9.2984 19.0734 8.14487 18.193 6.98812 17.1121C4.71943 14.9921 2.25 11.9278 2.25 8.51266C2.25 5.58716 4.58441 3.25 7.5 3.25C9.03842 3.25 10.3421 4.16053 11.1962 4.9489C11.5116 5.24006 11.7824 5.53002 12 5.78205C12.2176 5.53002 12.4884 5.24006 12.8038 4.9489C13.6579 4.16053 14.9616 3.25 16.5 3.25C19.4142 3.25 21.75 5.58579 21.75 8.5C21.75 11.9589 19.283 15.0258 17.0112 17.1406C15.8539 18.218 14.6998 19.0918 13.8365 19.6958C13.4042 19.9983 13.043 20.2343 12.7885 20.3956C12.6612 20.4762 12.5604 20.5382 12.4907 20.5806ZM3.75 8.51266C3.75 11.2516 5.78075 13.9309 8.01225 16.0161C9.10559 17.0378 10.2022 17.8753 11.0268 18.458C11.4296 18.7425 11.7658 18.9651 12.0029 19.1175C12.2398 18.9672 12.5751 18.7476 12.9766 18.4667C13.8007 17.8902 14.8966 17.0598 15.9892 16.0427C18.2172 13.9686 20.25 11.2855 20.25 8.5C20.25 6.41421 18.5858 4.75 16.5 4.75C15.5384 4.75 14.5921 5.33947 13.8212 6.0511C13.4488 6.3949 13.1457 6.74102 12.9356 7.00175C12.8311 7.13154 12.7508 7.23868 12.6977 7.31179C12.6712 7.34831 12.6515 7.37623 12.6391 7.39411L12.626 7.41317L12.624 7.41603C12.4849 7.62448 12.2506 7.75 12 7.75C11.7496 7.75 11.5153 7.62451 11.3762 7.41634L11.374 7.41317L11.3609 7.39411C11.3485 7.37623 11.3288 7.34831 11.3023 7.31179C11.2492 7.23868 11.1689 7.13154 11.0644 7.00175C10.8543 6.74102 10.5512 6.3949 10.1788 6.0511C9.72644 5.63355 9.21372 5.25805 8.67296 5.01901C8.29212 4.85066 7.89737 4.75 7.5 4.75C5.41559 4.75 3.75 6.41284 3.75 8.51266Z" fill="currentColor" />
                                </svg>

                            </button>

                            <button type="button" class="group-hover:!btn-dark-ghost  btn btn-light-ghost btn-size-sm btn-only-icon">
                                <svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path fill-rule="evenodd" clip-rule="evenodd" d="M6.5 4.25C3.87665 4.25 1.75 6.37665 1.75 9V15C1.75 17.6234 3.87665 19.75 6.5 19.75H12.5C14.7589 19.75 16.6495 18.1732 17.1312 16.0603L19.8501 17.1478C20.9996 17.6076 22.25 16.7611 22.25 15.523V12V8.47706C22.25 7.239 20.9996 6.39242 19.8501 6.85223L17.1312 7.93976C16.6495 5.82679 14.7589 4.25 12.5 4.25H6.5ZM17.25 9.5078L20.4072 8.24494C20.5714 8.17925 20.75 8.30019 20.75 8.47706V12V15.523C20.75 15.6999 20.5714 15.8208 20.4072 15.7551L17.25 14.4923V9.5078ZM15.75 9.33854V14.6615V15C15.75 16.7949 14.2949 18.25 12.5 18.25H6.5C4.70507 18.25 3.25 16.7949 3.25 15V9C3.25 7.20507 4.70507 5.75 6.5 5.75H12.5C14.2949 5.75 15.75 7.20507 15.75 9V9.33854Z" fill="currentColor" />
                                </svg>

                            </button>
                        </div>
                    </a>

                    <div class="px-2">
                        <p class="text-xxs font-semibold text-neutral-500">ALAIN AFFLELOU</p>

                        <h3 class="font-semibold text-neutral-800 pt-0.5">MAGIC 222</h3>

                        <p class="text-xs text-neutral-500 pt-1">Lunettes de vue MAGIC + 2 clips inclus</p>

                        <p class="text-xs text-neutral-500 pt-2">2 couleurs disponibles</p>

                        <div class="pt-3">
                            <p class="text-[9px] text-neutral-500">PRIX WEB</p>

                            <div class="flex items-center gap-2">
                                <p class="font-semibold text-neutral-800">
                                    179,00 €
                                </p>

                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>

        <div x-ref="pagination" class="swiper-pagination-carousel-1328246011 swiper-pagination swiper-light"></div>
        <div class="flex sm:hidden mt-6">
            <a href="https://www.afflelou.com/" target="_blank" rel="noopenner noreferer" class="mx-auto  btn btn-dark-subtle ">
                Voir toute la collection

            </a>
        </div>
    </div>
</div>

<script>
    function initCarouselcarousel1328246011() {
        return {
            swiper: null,
            options: {
                "color": "dark",
                "slidesPerView": {
                    "mobile": 1.2,
                    "tablet": 2.2,
                    "desktop": 3
                },
                "spaceBetween": 30,
                "showPagination": true,
                "showNavigation": true,
                "showNavigationMobile": false
            },
            componentId: 'carousel-1328246011',
            init() {
                this.initSwiper();
                if (typeof this.customFunction === 'function') {
                    this.customFunction();
                }
            },
            initSwiper() {
                this.swiper = new Swiper(this.$refs.swiperContainer, {
                    slidesPerView: this.options.slidesPerView.mobile,
                    spaceBetween: this.options.spaceBetween,
                    pagination: this.options.showPagination ? {
                        el: '.swiper-pagination-' + this.componentId,
                        clickable: true,
                        bulletClass: 'bullet',
                        bulletActiveClass: 'active',
                    } : false,
                    navigation: this.options.showNavigation ? {
                        nextEl: '.carousel-button-next-' + this.componentId,
                        prevEl: '.carousel-button-prev-' + this.componentId
                    } : false,
                    hashNavigation: {
                        watchState: true,
                    },
                    breakpoints: {
                        640: {
                            slidesPerView: this.options.slidesPerView.tablet
                        },
                        1024: {
                            slidesPerView: this.options.slidesPerView.desktop
                        }
                    },
                    on: {
                        slideChange: () => this.updateSliderTheme(),
                    },
                });
                this.updateSliderTheme();
            },
            updateSliderTheme() {
                const activeSlide = this.swiper.slides[this.swiper.activeIndex];
                const theme = activeSlide.getAttribute('data-slider-theme');
                this.sliderTheme = theme || 'light';
            },
            customFunction() {
                // Custom function can be defined here and overridden outside.
            }
        };
    }
</script>
 
{# components/carousel/carousel.twig #}
{% set uniqueId = "carousel-" ~ random() %}
{% set carouselFunctionName = "initCarousel" ~ uniqueId|replace({'-': ''}) %}

<div
        x-data="{{ carouselFunctionName }}()"
        x-init="init()"
        class="relative w-full h-full mx-auto"
>
    {# Header Section #}
    <div class="flex justify-between items-center mb-8 {% if variant is defined and variant == 'small' %} absolute top-6 md:top-10 left-6 md:left-10 right-6 md:right-10 z-10 {% endif %}">
        {% if title is defined and title %}
            <h2 class="text-3xl font-semibold {{ titleClass }}">{{ title }}</h2>
        {% endif %}

        <div class="flex items-center justify-center space-x-4 {% if variant is defined and variant == 'small' %} justify-between w-full {% endif %}">
            {% if variant is defined and variant == 'small' %}
                {% if carousel.showPagination %}
                    <div x-ref="pagination"
                         class="swiper-pagination-{{ uniqueId }} swiper-pagination mt-0 !w-auto {{ paginationClass }}" {{ swiper_pagination_attribute }}></div>
                {% endif %}
            {% else %}
                {% if showCTA %}
                    {% render "@template-button" with {
                        href: CTA.href,
                        external: CTA.external,
                        color: CTA.color ~ "-subtle",
                        label: CTA.label,
                        button_class:"hidden sm:inline-flex mx-auto",
                        button_attribute: cta_button_attribute,
                    } %}
                {% endif %}
            {% endif %}

            {% if carousel.showNavigation %}
                <div class="{% if carousel.showNavigationMobile == false %} hidden  sm:flex {% endif %} flex space-x-2">
                    {% render "@template-button" with {
                        color: carousel.color ~ "-subtle",
                        type: "only-icon",
                        icon: {
                            name: "library--chevron-left"
                        },
                        button_class:"carousel-button-prev-" ~ uniqueId ~ " before:border-none",
                        button_attribute: swiper_navigation_attribute
                    } %}
                    {% render "@template-button" with {
                        color: carousel.color ~ "-subtle",
                        type: "only-icon",
                        icon: {
                            name: "library--chevron-right"
                        },
                        button_class:"carousel-button-next-" ~ uniqueId ~ " before:border-none",
                        button_attribute: swiper_navigation_attribute
                    } %}
                </div>
            {% endif %}
        </div>
    </div>

    <div x-ref="swiperContainer" id="{{ uniqueId }}" class="swiper md:h-full">
        <div class="swiper-wrapper {{ wrapperClass }}">
            {% for index, slide in slides %}
			<div
                        class="swiper-slide !transform-none {{ slideClass }}"
                        data-theme="{{ slide.theme|default('light') }}"
						data-hash="index-{{ uniqueId }}-{{ index }}"
			>
                    {% if slide.template %}
                        {% render "@" ~ slide.template with {
							slide: slide
						} %}
                    {% else %}
                        {{ slide.content|raw }}
                    {% endif %}
                </div>
            {% endfor %}
        </div>

        {% if variant is defined and variant != 'small' and carousel.showPagination %}
            <div x-ref="pagination"
                 class="swiper-pagination-{{ uniqueId }} swiper-pagination {{ paginationClass }}" {{ swiper_pagination_attribute }}></div>
        {% endif %}
        {% if CTA %}
            <div class="flex sm:hidden mt-6">
                {% render "@template-button" with {
                    href: CTA.href,
                    external: CTA.external,
                    color: CTA.color ~ "-subtle",
                    label: CTA.label,
                    button_class:"mx-auto",
                    button_attribute: cta_button_attribute
                } %}
            </div>
        {% endif %}
    </div>
</div>

<script>
	function {{ carouselFunctionName }}() {
		return {
			swiper: null,
			options: {{ carousel|json_encode|raw }},
			componentId: '{{ uniqueId }}',

			init() {
				this.initSwiper();
				if (typeof this.customFunction === 'function') {
					this.customFunction();
				}
			},

			initSwiper() {
				this.swiper = new Swiper(this.$refs.swiperContainer, {
					slidesPerView: this.options.slidesPerView.mobile,
					spaceBetween: this.options.spaceBetween,
					pagination: this.options.showPagination ? {
						el: '.swiper-pagination-' + this.componentId,
						clickable: true,
						bulletClass: 'bullet',
						bulletActiveClass: 'active',
					} : false,
					navigation: this.options.showNavigation ? {
						nextEl: '.carousel-button-next-' + this.componentId,
						prevEl: '.carousel-button-prev-' + this.componentId
					} : false,
					hashNavigation: {
						watchState: true,
					},
					breakpoints: {
						640: {
							slidesPerView: this.options.slidesPerView.tablet
						},
						1024: {
							slidesPerView: this.options.slidesPerView.desktop
						}
					},
					on: {
						slideChange: () => this.updateSliderTheme(),
					},
				});

				this.updateSliderTheme();
			},

			updateSliderTheme() {
				const activeSlide = this.swiper.slides[this.swiper.activeIndex];
				const theme = activeSlide.getAttribute('data-slider-theme');

				this.sliderTheme = theme || 'light';
			},

			customFunction() {
				// Custom function can be defined here and overridden outside.
				{% if customFunction is defined and customFunction %}
					{{ customFunction }}
				{% endif %}
			}
		};
	}
</script>
 
{
  "title": "La collection MAGIC",
  "variant": "default",
  "showCTA": true,
  "CTA": {
    "label": "Voir toute la collection",
    "href": "https://www.afflelou.com/",
    "external": true,
    "color": "dark"
  },
  "paginationClass": "swiper-light",
  "carousel": {
    "color": "dark",
    "slidesPerView": {
      "mobile": 1.2,
      "tablet": 2.2,
      "desktop": 3
    },
    "spaceBetween": 30,
    "showPagination": true,
    "showNavigation": true,
    "showNavigationMobile": false
  },
  "slides": [
    {
      "template": "productcard",
      "brand": "ALAIN AFFLELOU",
      "name": "MAGIC 262",
      "description": "Lunettes de vue MAGIC + 2 clips inclus",
      "colors": "3 couleurs disponibles",
      "price": "199,00",
      "image": "/img/productsSlider/magicProduct1.png",
      "hoverImage": "/img/productsSlider/hoverMagicProduct1.png",
      "webLabel": "PRIX WEB"
    },
    {
      "template": "productcard",
      "brand": "ALAIN AFFLELOU",
      "name": "Enola",
      "description": "Lunettes de vue MAGIC",
      "colors": "5 couleurs disponibles",
      "price": "109,00",
      "image": "/img/productsSlider/magicProduct2.png",
      "hoverImage": "/img/productsSlider/hoverMagicProduct2.png",
      "webLabel": "PRIX WEB"
    },
    {
      "template": "productcard",
      "brand": "ALAIN AFFLELOU",
      "name": "MAGIC 222",
      "description": "Lunettes de vue MAGIC + 2 clips inclus",
      "colors": "2 couleurs disponibles",
      "price": "179,00",
      "image": "/img/productsSlider/magicProduct3.png",
      "hoverImage": "/img/productsSlider/hoverMagicProduct3.png",
      "webLabel": "PRIX WEB"
    },
    {
      "template": "productcard",
      "brand": "ALAIN AFFLELOU",
      "name": "Enola",
      "description": "Lunettes de vue MAGIC",
      "colors": "5 couleurs disponibles",
      "price": "109,00",
      "image": "/img/productsSlider/magicProduct1.png",
      "hoverImage": "/img/productsSlider/hoverMagicProduct1.png",
      "webLabel": "PRIX WEB"
    },
    {
      "template": "productcard",
      "brand": "ALAIN AFFLELOU",
      "name": "MAGIC 222",
      "description": "Lunettes de vue MAGIC + 2 clips inclus",
      "colors": "2 couleurs disponibles",
      "price": "179,00",
      "image": "/img/productsSlider/magicProduct2.png",
      "hoverImage": "/img/productsSlider/hoverMagicProduct2.png",
      "webLabel": "PRIX WEB"
    }
  ]
}

Product Card Component

A reusable component for displaying product cards, compatible with both carousels and grids.

Configuration

The component can be configured via the productCard.config.js file. Here are the available options:

Context

Product Properties

Object containing product information:

  • url: Product page URL
  • openInNewTab: Boolean to open link in new tab
  • image: Path to main product image
  • hoverImage: Path to image displayed on hover
  • name: Product name
  • brand: Product brand
  • description: Product description
  • colors: Text indicating available colors
  • price: Product price
  • oldPrice: Original price (for promotions)
  • discountText: Promotion text
  • webLabel: Web price label
  • inlinePrice: Boolean to display price inline with title
  • buttonColor: Action buttons color
  • buttonColorHover: Action buttons hover color

Action Buttons

Action buttons configuration:

  • showActionButtons: Boolean to show/hide action buttons
  • showFavoriteButton: Boolean to show/hide favorite button
  • showQuickViewButton: Boolean to show/hide quick view button

Alpine.js Attributes

Alpine.js attributes configuration for reactivity:

alpineAttribute: {
    productInfo: {
        brand: 'x-text="product.brand"',
        name: 'x-text="product.name"',
        description: 'x-text="product.description"',
        colors: 'x-text="product.colors"',
        price: 'x-text="product.price"',
        webLabel: 'x-text="product.webLabel"'
    }
}

Variants

  1. default: Standard display with image, title, and price
  2. with-hover: Variant with image hover effect
  3. with-discount: Variant with original price and promotion text
  4. inline-price: Variant with price inline with title

Usage

{# Basic usage #}
{% include '@components/product/productCard.twig' with {
    product: {
        url: '/product/1',
        image: '/path/to/image.jpg',
        name: 'Product name',
        price: '199.00'
    }
} %}

{# Usage with all options #}
{% include '@components/product/productCard.twig' with {
    product: {
        url: '/product/1',
        openInNewTab: false,
        image: '/path/to/image.jpg',
        hoverImage: '/path/to/hover-image.jpg',
        name: 'Product name',
        brand: 'Brand',
        description: 'Product description',
        colors: '3 colors available',
        price: '199.00',
        oldPrice: '249.00',
        discountText: '-20%',
        webLabel: 'WEB PRICE',
        inlinePrice: true,
        buttonColor: 'light',
        buttonColorHover: 'dark',
        showActionButtons: true,
        showFavoriteButton: true,
        showQuickViewButton: true,
        addCart: true,
        alpineAttribute: {
            productInfo: {
                brand: 'x-text="product.brand"'
                // ... other Alpine.js attributes
            }
        }
    },
    class: 'custom-class'
} %}

Features

  • Image Hover Effect: Changes image on hover when hoverImage is defined
  • Flexible Pricing: Inline or block display based on inlinePrice
  • Action Buttons: Configurable favorite and quick view buttons
  • Promotions: Support for crossed-out prices and discount percentages
  • Alpine.js: Full reactivity support with Alpine.js
  • Tailwind CSS: Uses Tailwind utility classes for styling
  • Nested Components: Uses template-button component for actions

Technical Details

CSS Classes

The component uses Tailwind CSS classes for styling:

  • Responsive design with flexible grid system
  • Hover effects on images and buttons
  • Customizable spacing and typography
  • Configurable colors through button variants

Template Button Integration

The component integrates with the template-button component for:

  • Favorite button
  • Quick view button
  • Add to cart button Each button can be customized with different colors and hover states.