<div x-data="initCarouselcarousel1803641240()" x-init="init()" class="relative w-full max-w-7xl mx-auto">
<div x-ref="swiperContainer" id="carousel-1803641240" class="swiper lg:h-full">
<div class="swiper-wrapper lg:!flex lg:!transform-none lg:flex-wrap lg:gap-4">
<div data-hash="index-carousel-1803641240-0" style="display: block;" x-cloak x-show="isVisible(0)" x-transition:enter="transition-opacity duration-500" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="transition-opacity duration-300" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0" class="swiper-slide relative overflow-hidden lg:!mr-0 lg:!w-full ">
<img src="/img/productsSlider/products2.png" alt="Lunettes vue face" class="w-full h-full object-cover aspect-square">
<div class="absolute bottom-4 hidden lg:flex gap-2 w-full justify-center">
<button type="button" class=" btn btn-light btn-size-sm btn-icons">
<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>
Essai virtuel
</button>
<button type="button" class=" btn btn-light btn-size-sm btn-icons">
<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="M7.79381 4.59345C8.73854 2.70412 10.1824 1.25 12 1.25C13.2857 1.25 14.391 1.98838 15.2432 3.05936C16.0299 4.04789 16.6567 5.38171 17.086 6.91367C17.6391 7.06875 18.1634 7.24872 18.6531 7.45112C20.4578 8.19701 21.9203 9.30335 22.4949 10.7177C22.6507 11.1015 22.466 11.539 22.0823 11.6949C21.6985 11.8507 21.261 11.666 21.1051 11.2823C20.7527 10.4147 19.7342 9.52099 18.0802 8.83738C16.4549 8.16567 14.3362 7.75 12 7.75C10.621 7.75 9.31935 7.89477 8.15083 8.15084C7.89477 9.31935 7.75 10.621 7.75 12C7.75 13.379 7.89477 14.6807 8.15084 15.8492C9.31935 16.1052 10.621 16.25 12 16.25C13.9192 16.25 15.6883 15.9698 17.1575 15.499L14.8653 14.3811C14.493 14.1995 14.3383 13.7506 14.5199 13.3783C14.7015 13.006 15.1504 12.8513 15.5227 13.0329L19.3367 14.8929C19.709 15.0745 19.8637 15.5234 19.6821 15.8957L17.8221 19.7097C17.6405 20.082 17.1916 20.2367 16.8193 20.0551C16.447 19.8735 16.2923 19.4246 16.4739 19.0523L17.491 16.9667C15.8784 17.4677 13.9967 17.75 12 17.75C10.8172 17.75 9.67441 17.6509 8.60397 17.4659C8.76325 17.9227 8.9414 18.3476 9.13544 18.7357C10.0005 20.4656 11.0566 21.25 12 21.25C12.2392 21.25 12.4787 21.2021 12.7181 21.105C13.102 20.9493 13.5393 21.1343 13.695 21.5181C13.8507 21.902 13.6657 22.3393 13.2819 22.495C12.8753 22.6599 12.4448 22.75 12 22.75C10.1824 22.75 8.73854 21.2959 7.79381 19.4066C7.44755 18.7141 7.15134 17.9337 6.91372 17.0863C6.06628 16.8487 5.28593 16.5525 4.59345 16.2062C2.70412 15.2615 1.25 13.8176 1.25 12C1.25 10.1824 2.70412 8.73854 4.59345 7.79381C5.28593 7.44755 6.06628 7.15134 6.91372 6.91372C7.15134 6.06628 7.44755 5.28593 7.79381 4.59345ZM8.60397 6.53414C9.67441 6.34914 10.8172 6.25 12 6.25C13.1838 6.25 14.3264 6.34926 15.396 6.53412C15.0334 5.49372 14.5772 4.63131 14.0695 3.99339C13.3825 3.13012 12.6663 2.75 12 2.75C11.0566 2.75 10.0005 3.53438 9.13544 5.2643C8.9414 5.65236 8.76325 6.07729 8.60397 6.53414ZM6.53414 8.60397C6.07729 8.76325 5.65236 8.9414 5.2643 9.13544C3.53438 10.0005 2.75 11.0566 2.75 12C2.75 12.9434 3.53438 13.9995 5.2643 14.8646C5.65236 15.0586 6.07729 15.2367 6.53414 15.396C6.34914 14.3256 6.25 13.1828 6.25 12C6.25 10.8172 6.34914 9.67441 6.53414 8.60397Z" fill="currentColor" />
</svg>
Vue 3D
</button>
</div>
</div>
<div data-hash="index-carousel-1803641240-1" style="display: block;" x-cloak x-show="isVisible(1)" x-transition:enter="transition-opacity duration-500" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="transition-opacity duration-300" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0" class="swiper-slide relative overflow-hidden lg:!mr-0 lg:!w-[calc(50%_-_8px)] ">
<img src="/img/productSolaire/img.png" alt="Lunettes vue côté" class="w-full h-full object-cover aspect-square">
</div>
<div data-hash="index-carousel-1803641240-2" style="display: block;" x-cloak x-show="isVisible(2)" x-transition:enter="transition-opacity duration-500" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="transition-opacity duration-300" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0" class="swiper-slide relative overflow-hidden lg:!mr-0 lg:!w-[calc(50%_-_8px)] ">
<img src="/img/productSolaire/img_1.png" alt="Lunettes vue angle" class="w-full h-full object-cover aspect-square">
</div>
<div data-hash="index-carousel-1803641240-3" style="" x-cloak x-show="isVisible(3)" x-transition:enter="transition-opacity duration-500" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="transition-opacity duration-300" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0" class="swiper-slide relative overflow-hidden lg:!mr-0 lg:!w-[calc(50%_-_8px)] ">
<img src="/img/productSolaire/img_2.png" alt="Lunettes vue côté" class="w-full h-full object-cover aspect-square">
</div>
<div data-hash="index-carousel-1803641240-4" style="" x-cloak x-show="isVisible(4)" x-transition:enter="transition-opacity duration-500" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="transition-opacity duration-300" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0" class="swiper-slide relative overflow-hidden lg:!mr-0 lg:!w-[calc(50%_-_8px)] ">
<img src="/img/productSolaire/img_3.png" alt="Lunettes vue angle" class="w-full h-full object-cover aspect-square">
</div>
<div data-hash="index-carousel-1803641240-5" style="" x-cloak x-show="isVisible(5)" x-transition:enter="transition-opacity duration-500" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="transition-opacity duration-300" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0" class="swiper-slide relative overflow-hidden lg:!mr-0 lg:!w-full ">
<img src="/img/productSolaire/img_4.png" alt="Lunettes vue côté" class="w-full h-full object-cover aspect-square">
</div>
<div data-hash="index-carousel-1803641240-6" style="" x-cloak x-show="isVisible(6)" x-transition:enter="transition-opacity duration-500" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="transition-opacity duration-300" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0" class="swiper-slide relative overflow-hidden lg:!mr-0 lg:!w-full ">
<img src="/img/productSolaire/img_1.png" alt="Lunettes vue angle" class="w-full h-full object-cover aspect-square">
</div>
<div data-hash="index-carousel-1803641240-7" style="" x-cloak x-show="isVisible(7)" x-transition:enter="transition-opacity duration-500" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="transition-opacity duration-300" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0" class="swiper-slide relative overflow-hidden lg:!mr-0 lg:!w-[calc(50%_-_8px)] ">
<img src="/img/productSolaire/img_2.png" alt="Lunettes vue côté" class="w-full h-full object-cover aspect-square">
</div>
<div data-hash="index-carousel-1803641240-8" style="" x-cloak x-show="isVisible(8)" x-transition:enter="transition-opacity duration-500" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="transition-opacity duration-300" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0" class="swiper-slide relative overflow-hidden lg:!mr-0 lg:!w-[calc(50%_-_8px)] ">
<img src="/img/productSolaire/img_3.png" alt="Lunettes vue angle" class="w-full h-full object-cover aspect-square">
</div>
</div>
<div x-ref="pagination" class="swiper-pagination-carousel-1803641240 swiper-pagination lg:hidden swiper-light"></div>
</div>
<div x-ref="pdpButtonProductGallerie" class="hidden lg:flex gap-2 w-full justify-center mt-4">
<button type="button" x-show="visibleItems < maxItems" @click="showMore" class=" btn btn-dark-ghost ">
Voir plus
</button>
<button type="button" x-show="visibleItems > 3" @click="showLess" class=" btn btn-dark-ghost ">
Voir moins
</button>
</div>
</div>
<script>
function initCarouselcarousel1803641240() {
return {
swiper: null,
options: {
"color": "dark",
"slidesPerView": {
"mobile": 1,
"tablet": 1,
"desktop": 1
},
"spaceBetween": 30,
"showPagination": true,
"showNavigation": true,
"showNavigationMobile": false
},
componentId: 'carousel-1803641240',
visibleItems: 3,
maxItems: 9,
showMore() {
this.visibleItems = Math.min(this.visibleItems + 3, this.maxItems);
this.scrollToLastVisible();
},
showLess() {
this.visibleItems = Math.max(3, this.visibleItems - 3);
this.scrollToLastVisible();
},
scrollToLastVisible() {
// Attendre que le DOM soit mis à jour
setTimeout(() => {
const lastVisibleItem = document.querySelector(`[data-hash="index-${this.componentId}-${this.visibleItems - 1}"]`);
if (lastVisibleItem) {
lastVisibleItem.scrollIntoView({
behavior: 'smooth',
block: "end"
});
}
}, 100);
},
isVisible(index) {
return this.$store.screen.isTablet || index < this.visibleItems;
},
init() {
this.$watch('$store.screen.isTablet', (isTablet) => {
if (isTablet && !this.swiper) {
this.initSwiper();
} else if (!isTablet && this.swiper) {
this.swiper.destroy(true, true);
this.swiper = null;
}
});
if (this.$store.screen.isTablet) {
this.initSwiper();
}
},
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
}
}
});
},
};
}
</script>
{% render "@carousel--pdp" with carousels %}
{
"carousels": {
"title": "La collection MAGIC",
"variant": "default",
"products": false,
"paginationClass": "swiper-light",
"carousel": {
"color": "dark",
"slidesPerView": {
"mobile": 1,
"tablet": 1,
"desktop": 1
},
"spaceBetween": 30,
"showPagination": true,
"showNavigation": true,
"showNavigationMobile": false
},
"slides": [
{
"src": "/img/productsSlider/products2.png",
"alt": "Lunettes vue face"
},
{
"src": "/img/productSolaire/img.png",
"alt": "Lunettes vue côté"
},
{
"src": "/img/productSolaire/img_1.png",
"alt": "Lunettes vue angle"
},
{
"src": "/img/productSolaire/img_2.png",
"alt": "Lunettes vue côté"
},
{
"src": "/img/productSolaire/img_3.png",
"alt": "Lunettes vue angle"
},
{
"src": "/img/productSolaire/img_4.png",
"alt": "Lunettes vue côté"
},
{
"src": "/img/productSolaire/img_1.png",
"alt": "Lunettes vue angle"
},
{
"src": "/img/productSolaire/img_2.png",
"alt": "Lunettes vue côté"
},
{
"src": "/img/productSolaire/img_3.png",
"alt": "Lunettes vue angle"
}
]
}
}
No notes defined.