<section class="container bg-neutral-50 max-md:pe-0 adjusted-marg-y-md flex flex-col gap-3" x-data="initSlider" x-init="calcPageSize(); $nextTick(function() { calcActive() })" @resize.window.debounce="calcPageSize(); $nextTick(() => calcActive())" role="group" aria-roledescription="Carousel">
<h2 class="font-bold text-body-lg text-black/56">Mieux connaître sa peau</h2>
<div class="flex md:grid grid-cols-3 gutter-quarter overflow-auto js_slides snap" @scroll.debounce="calcActive">
<a id="slide-0" aria-labelledby="tab-0" role="tabpanel" href="" class="bg-white hover:text-brand-700 transition-colors shrink-0 w-[85%] md:w-auto js_slide">
<div class="aspect-[3/2]">
<img class="w-full h-full object-cover" src="/img/blog/thumbnail-1.png" alt="">
</div>
<div class="p-4 h5 after:h-2 after:w-10 after:bg-brand after:block after:mt-5">
Gluconate de zinc : bienfaits et pouvoir matifiant
</div>
</a> <a id="slide-1" aria-labelledby="tab-1" role="tabpanel" href="" class="bg-white hover:text-brand-700 transition-colors shrink-0 w-[85%] md:w-auto js_slide">
<div class="aspect-[3/2]">
<img class="w-full h-full object-cover" src="/img/blog/thumbnail-2.png" alt="">
</div>
<div class="p-4 h5 after:h-2 after:w-10 after:bg-brand after:block after:mt-5">
Vieillissement de la peau du visage : nos astuces à partir de 40 ans
</div>
</a> <a id="slide-2" aria-labelledby="tab-2" role="tabpanel" href="" class="bg-white hover:text-brand-700 transition-colors shrink-0 w-[85%] md:w-auto js_slide">
<div class="aspect-[3/2]">
<img class="w-full h-full object-cover" src="/img/blog/thumbnail-1.png" alt="">
</div>
<div class="p-4 h5 after:h-2 after:w-10 after:bg-brand after:block after:mt-5">
Gluconate de zinc : bienfaits et pouvoir matifiant
</div>
</a> <a id="slide-3" aria-labelledby="tab-3" role="tabpanel" href="" class="bg-white hover:text-brand-700 transition-colors shrink-0 w-[85%] md:w-auto js_slide">
<div class="aspect-[3/2]">
<img class="w-full h-full object-cover" src="/img/blog/thumbnail-1.png" alt="">
</div>
<div class="p-4 h5 after:h-2 after:w-10 after:bg-brand after:block after:mt-5">
Gluconate de zinc : bienfaits et pouvoir matifiant
</div>
</a> <a id="slide-4" aria-labelledby="tab-4" role="tabpanel" href="" class="bg-white hover:text-brand-700 transition-colors shrink-0 w-[85%] md:w-auto js_slide">
<div class="aspect-[3/2]">
<img class="w-full h-full object-cover" src="/img/blog/thumbnail-1.png" alt="">
</div>
<div class="p-4 h5 after:h-2 after:w-10 after:bg-brand after:block after:mt-5">
Gluconate de zinc : bienfaits et pouvoir matifiant
</div>
</a> <a id="slide-5" aria-labelledby="tab-5" role="tabpanel" href="" class="bg-white hover:text-brand-700 transition-colors shrink-0 w-[85%] md:w-auto js_slide">
<div class="aspect-[3/2]">
<img class="w-full h-full object-cover" src="/img/blog/thumbnail-1.png" alt="">
</div>
<div class="p-4 h5 after:h-2 after:w-10 after:bg-brand after:block after:mt-5">
Gluconate de zinc : bienfaits et pouvoir matifiant
</div>
</a> <a id="slide-6" aria-labelledby="tab-6" role="tabpanel" href="" class="bg-white hover:text-brand-700 transition-colors shrink-0 w-[85%] md:w-auto js_slide">
<div class="aspect-[3/2]">
<img class="w-full h-full object-cover" src="/img/blog/thumbnail-1.png" alt="">
</div>
<div class="p-4 h5 after:h-2 after:w-10 after:bg-brand after:block after:mt-5">
Gluconate de zinc : bienfaits et pouvoir matifiant
</div>
</a> <a id="slide-7" aria-labelledby="tab-7" role="tabpanel" href="" class="bg-white hover:text-brand-700 transition-colors shrink-0 w-[85%] md:w-auto js_slide">
<div class="aspect-[3/2]">
<img class="w-full h-full object-cover" src="/img/blog/thumbnail-1.png" alt="">
</div>
<div class="p-4 h5 after:h-2 after:w-10 after:bg-brand after:block after:mt-5">
Gluconate de zinc : bienfaits et pouvoir matifiant
</div>
</a> <a id="slide-8" aria-labelledby="tab-8" role="tabpanel" href="" class="bg-white hover:text-brand-700 transition-colors shrink-0 w-[85%] md:w-auto js_slide">
<div class="aspect-[3/2]">
<img class="w-full h-full object-cover" src="/img/blog/thumbnail-1.png" alt="">
</div>
<div class="p-4 h5 after:h-2 after:w-10 after:bg-brand after:block after:mt-5">
Gluconate de zinc : bienfaits et pouvoir matifiant
</div>
</a> <a id="slide-9" aria-labelledby="tab-9" role="tabpanel" href="" class="bg-white hover:text-brand-700 transition-colors shrink-0 w-[85%] md:w-auto js_slide">
<div class="aspect-[3/2]">
<img class="w-full h-full object-cover" src="/img/blog/thumbnail-1.png" alt="">
</div>
<div class="p-4 h5 after:h-2 after:w-10 after:bg-brand after:block after:mt-5">
Gluconate de zinc : bienfaits et pouvoir matifiant
</div>
</a> <a id="slide-10" aria-labelledby="tab-10" role="tabpanel" href="" class="bg-white hover:text-brand-700 transition-colors shrink-0 w-[85%] md:w-auto js_slide">
<div class="aspect-[3/2]">
<img class="w-full h-full object-cover" src="/img/blog/thumbnail-1.png" alt="">
</div>
<div class="p-4 h5 after:h-2 after:w-10 after:bg-brand after:block after:mt-5">
Gluconate de zinc : bienfaits et pouvoir matifiant
</div>
</a> <a id="slide-11" aria-labelledby="tab-11" role="tabpanel" href="" class="bg-white hover:text-brand-700 transition-colors shrink-0 w-[85%] md:w-auto js_slide">
<div class="aspect-[3/2]">
<img class="w-full h-full object-cover" src="/img/blog/thumbnail-1.png" alt="">
</div>
<div class="p-4 h5 after:h-2 after:w-10 after:bg-brand after:block after:mt-5">
Gluconate de zinc : bienfaits et pouvoir matifiant
</div>
</a>
</div>
<div class="flex items-center justify-center py-6 mt-3 md:hidden">
<div role="tablist" aria-label="Navigation du slider" class="flex flex-wrap justify-center gap-3">
<template x-for="(index, i) in Math.ceil(itemCount / pageSize)" :key="i">
<button class="shrink-0 block h-1 bg-black rounded-full shadow cursor-pointer transition-all duration-300 ease-in-out" role="tab" :id="'tab-' + (index-1)" :aria-controls="'slide-' + (index-1)" :aria-selected="Math.floor(active/pageSize) === index-1" :tabindex="Math.floor(active/pageSize) === index-1 ? 0 : -1" :class="{
'bg-opacity-100 w-22': Math.floor(active/pageSize) === index-1,
'bg-opacity-40 w-6': Math.floor(active/pageSize) !== index-1
}" @click="scrollTo((index-1)*pageSize);">
<span class="sr-only" x-text="'Aller au groupe de slides ' + index"></span>
</button>
</template>
</div>
</div>
</section>
<script>
'use strict';
function initSlider() {
return {
active: 0,
itemCount: 0,
getSlider() {
return this.$root.querySelector('.js_slides');
},
pageSize: 4,
pageFillers: 0,
calcPageSize() {
const slider = this.getSlider();
if (slider) {
this.itemCount = slider.querySelectorAll('.js_slide').length;
this.pageSize = Math.round(slider.clientWidth / slider.querySelector('.js_slide').clientWidth);
this.pageFillers = (
this.pageSize * Math.ceil(this.itemCount / this.pageSize)
) - this.itemCount;
}
},
calcActive() {
const slider = this.getSlider();
if (slider) {
const sliderItems = this.itemCount + this.pageFillers;
const calculatedActiveSlide = slider.scrollLeft / (slider.scrollWidth / sliderItems);
this.active = Math.round(calculatedActiveSlide / this.pageSize) * this.pageSize;
}
},
scrollPrevious() {
this.scrollTo(this.active - this.pageSize);
},
scrollNext() {
this.scrollTo(this.active + this.pageSize);
},
scrollTo(idx) {
const slider = this.getSlider();
if (slider) {
const slideWidth = slider.scrollWidth / (this.itemCount + this.pageFillers);
slider.scrollLeft = Math.floor(slideWidth) * idx;
this.active = idx;
}
},
}
}
</script>
<section class="container bg-neutral-50 max-md:pe-0 adjusted-marg-y-md flex flex-col gap-3"
x-data="initSlider"
x-init="calcPageSize(); $nextTick(function() { calcActive() })"
@resize.window.debounce="calcPageSize(); $nextTick(() => calcActive())"
role="group"
aria-roledescription="Carousel"
>
<h2 class="font-bold text-body-lg text-black/56">Mieux connaître sa peau</h2>
<div class="flex md:grid grid-cols-3 gutter-quarter overflow-auto js_slides snap" @scroll.debounce="calcActive">
{% for article in articles %}
{% render '@blog-card' with {
title: article.title,
img: article.img,
index: loop.index0,
class: 'shrink-0 w-[85%] md:w-auto js_slide'
} %}
{% endfor %}
</div>
{% render '@slider-pagination' with {
class: 'justify-center py-6 mt-3 md:hidden'
} %}
</section>
<script>
'use strict';
function initSlider() {
return {
active: 0,
itemCount: 0,
getSlider() {
return this.$root.querySelector('.js_slides');
},
pageSize: 4,
pageFillers: 0,
calcPageSize() {
const slider = this.getSlider();
if (slider) {
this.itemCount = slider.querySelectorAll('.js_slide').length;
this.pageSize = Math.round(slider.clientWidth / slider.querySelector('.js_slide').clientWidth);
this.pageFillers = (
this.pageSize * Math.ceil(this.itemCount / this.pageSize)
) - this.itemCount;
}
},
calcActive() {
const slider = this.getSlider();
if (slider) {
const sliderItems = this.itemCount + this.pageFillers;
const calculatedActiveSlide = slider.scrollLeft / (slider.scrollWidth / sliderItems);
this.active = Math.round(calculatedActiveSlide / this.pageSize) * this.pageSize;
}
},
scrollPrevious() {
this.scrollTo(this.active - this.pageSize);
},
scrollNext() {
this.scrollTo(this.active + this.pageSize);
},
scrollTo(idx) {
const slider = this.getSlider();
if (slider) {
const slideWidth = slider.scrollWidth / (this.itemCount + this.pageFillers);
slider.scrollLeft = Math.floor(slideWidth) * idx;
this.active = idx;
}
},
}
}
</script>
{
"articles": [
{
"title": "Gluconate de zinc : bienfaits et pouvoir matifiant",
"img": {
"src": "/img/blog/thumbnail-1.png"
}
},
{
"title": "Vieillissement de la peau du visage : nos astuces à partir de 40 ans",
"img": {
"src": "/img/blog/thumbnail-2.png"
}
},
{
"title": "Gluconate de zinc : bienfaits et pouvoir matifiant",
"img": {
"src": "/img/blog/thumbnail-1.png"
}
},
{
"title": "Gluconate de zinc : bienfaits et pouvoir matifiant",
"img": {
"src": "/img/blog/thumbnail-1.png"
}
},
{
"title": "Gluconate de zinc : bienfaits et pouvoir matifiant",
"img": {
"src": "/img/blog/thumbnail-1.png"
}
},
{
"title": "Gluconate de zinc : bienfaits et pouvoir matifiant",
"img": {
"src": "/img/blog/thumbnail-1.png"
}
},
{
"title": "Gluconate de zinc : bienfaits et pouvoir matifiant",
"img": {
"src": "/img/blog/thumbnail-1.png"
}
},
{
"title": "Gluconate de zinc : bienfaits et pouvoir matifiant",
"img": {
"src": "/img/blog/thumbnail-1.png"
}
},
{
"title": "Gluconate de zinc : bienfaits et pouvoir matifiant",
"img": {
"src": "/img/blog/thumbnail-1.png"
}
},
{
"title": "Gluconate de zinc : bienfaits et pouvoir matifiant",
"img": {
"src": "/img/blog/thumbnail-1.png"
}
},
{
"title": "Gluconate de zinc : bienfaits et pouvoir matifiant",
"img": {
"src": "/img/blog/thumbnail-1.png"
}
},
{
"title": "Gluconate de zinc : bienfaits et pouvoir matifiant",
"img": {
"src": "/img/blog/thumbnail-1.png"
}
}
]
}
No notes defined.