Blog List Posts: Slider

<section class="flex flex-col gap-3 adjusted-marg-y-sm">
    <div class="flex flex-row justify-between items-center">
        <h2 class="h4">Voir aussi...</h2>
    </div>

    <div class="relative flex flex-col gap-3" x-data="initSlider" x-init="
          $nextTick(() => {
            calcPageSize();
            scrollTo(0);
            calcActive();
          })
        " @resize.window.debounce="calcPageSize(); $nextTick(() => calcActive())" role="group" aria-roledescription="Carousel" aria-label="">
        <div class="relative w-full overflow-x-hidden">
            <div class="relative flex flex-nowrap w-full overflow-auto js_slides snap" @scroll.debounce="calcActive" aria-label="Slides">
                <div class="js_slide flex-shrink-0 w-1/2 md:w-1/3  pe-2 " aria-roledescription="slide" id="slide-0" aria-labelledby="tab-0" role="tabpanel" tabindex="0" :aria-label="'Slide ' + (1) + ' of ' + 0" :aria-hidden="active !== 0">
                    <div class="relative bg-neutral-25 pb-11 after:absolute after:bottom-4 after:left-4 after:h-2 after:w-10 after:bg-brand after:block after:mb-0 h-full">
                        <img src="/img/blog/img.png" alt="Blog" class="aspect-video object-cover object-center w-full" />
                        <div class="flex flex-col gap-1.5 pt-4 px-4">
                            <h3 class="h6">Gluconate de zinc : bienfaits et pouvoir matifiant</h3>
                            <p class="text-body-sm line-clamp-3">Atténuer les taches liées au vieillissement, c’est l’une des missions de la
                                Vitamine C. Utilisée sous forme d’Actif Pur, elle renforce les mécanismes de défense de la peau et rend au
                                visage son éclat naturel.</p>
                            <div class="flex flex-wrap items-center gap-2.5">
                                <a href="#" class="
        
         link-sm
         link-dark
         link-icon
        
    ">
                                    <svg class=" shrink-0" width="16" height="16" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                                        <path d="M2.25 12.75V12C2.25 10.7574 3.25736 9.75 4.5 9.75H19.5C20.7426 9.75 21.75 10.7574 21.75 12V12.75M13.0607 6.31066L10.9393 4.18934C10.658 3.90804 10.2765 3.75 9.87868 3.75H4.5C3.25736 3.75 2.25 4.75736 2.25 6V18C2.25 19.2426 3.25736 20.25 4.5 20.25H19.5C20.7426 20.25 21.75 19.2426 21.75 18V9C21.75 7.75736 20.7426 6.75 19.5 6.75H14.1213C13.7235 6.75 13.342 6.59197 13.0607 6.31066Z" stroke="currentColor" stroke-width="1.5" fill="none" />

                                    </svg>
                                    <span class="">Ingredient Spotlight</span>

                                </a>
                                <span>|</span>
                                <div class="flex flex-row gap-1 text-body-xs">
                                    <svg class=" shrink-0" width="16" height="16" stroke="currentColor" stroke-width="1.5" viewBox="0 0 21 20" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                                        <path d="M10.5 5V10H14.25M18 10C18 14.1421 14.6421 17.5 10.5 17.5C6.35786 17.5 3 14.1421 3 10C3 5.85786 6.35786 2.5 10.5 2.5C14.6421 2.5 18 5.85786 18 10Z" stroke="currentColor" stroke-width="1.5" fill="none" />

                                    </svg> <span> 3 min.</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="js_slide flex-shrink-0 w-1/2 md:w-1/3 ps-2 pe-2 " aria-roledescription="slide" id="slide-1" aria-labelledby="tab-1" role="tabpanel" tabindex="0" :aria-label="'Slide ' + (2) + ' of ' + 0" :aria-hidden="active !== 1">
                    <div class="relative bg-neutral-25 pb-11 after:absolute after:bottom-4 after:left-4 after:h-2 after:w-10 after:bg-brand after:block after:mb-0 h-full">
                        <img src="/img/blog/thumbnail-2.png" alt="Blog" class="aspect-video object-cover object-center w-full" />
                        <div class="flex flex-col gap-1.5 pt-4 px-4">
                            <h3 class="h6">Vieillissement de la peau du visage : nos astuces à partir de 40 ans</h3>
                            <p class="text-body-sm line-clamp-3">Atténuer les taches liées au vieillissement, c’est l’une des missions de la
                                Vitamine C. Utilisée sous forme d’Actif Pur, elle renforce les mécanismes de défense de la peau et rend au
                                visage son éclat naturel.</p>
                            <div class="flex flex-wrap items-center gap-2.5">
                                <a href="#" class="
        
         link-sm
         link-dark
         link-icon
        
    ">
                                    <svg class=" shrink-0" width="16" height="16" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                                        <path d="M2.25 12.75V12C2.25 10.7574 3.25736 9.75 4.5 9.75H19.5C20.7426 9.75 21.75 10.7574 21.75 12V12.75M13.0607 6.31066L10.9393 4.18934C10.658 3.90804 10.2765 3.75 9.87868 3.75H4.5C3.25736 3.75 2.25 4.75736 2.25 6V18C2.25 19.2426 3.25736 20.25 4.5 20.25H19.5C20.7426 20.25 21.75 19.2426 21.75 18V9C21.75 7.75736 20.7426 6.75 19.5 6.75H14.1213C13.7235 6.75 13.342 6.59197 13.0607 6.31066Z" stroke="currentColor" stroke-width="1.5" fill="none" />

                                    </svg>
                                    <span class="">Ingredient Spotlight</span>

                                </a>
                                <span>|</span>
                                <div class="flex flex-row gap-1 text-body-xs">
                                    <svg class=" shrink-0" width="16" height="16" stroke="currentColor" stroke-width="1.5" viewBox="0 0 21 20" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                                        <path d="M10.5 5V10H14.25M18 10C18 14.1421 14.6421 17.5 10.5 17.5C6.35786 17.5 3 14.1421 3 10C3 5.85786 6.35786 2.5 10.5 2.5C14.6421 2.5 18 5.85786 18 10Z" stroke="currentColor" stroke-width="1.5" fill="none" />

                                    </svg> <span> 3 min.</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="js_slide flex-shrink-0 w-1/2 md:w-1/3 ps-2  " aria-roledescription="slide" id="slide-2" aria-labelledby="tab-2" role="tabpanel" tabindex="0" :aria-label="'Slide ' + (3) + ' of ' + 0" :aria-hidden="active !== 2">
                    <div class="relative bg-neutral-25 pb-11 after:absolute after:bottom-4 after:left-4 after:h-2 after:w-10 after:bg-brand after:block after:mb-0 h-full">
                        <img src="/img/blog/thumbnail-1.png" alt="Blog" class="aspect-video object-cover object-center w-full" />
                        <div class="flex flex-col gap-1.5 pt-4 px-4">
                            <h3 class="h6">Gluconate de zinc : bienfaits et pouvoir matifiant</h3>
                            <p class="text-body-sm line-clamp-3">Atténuer les taches liées au vieillissement, c’est l’une des missions de la
                                Vitamine C. Utilisée sous forme d’Actif Pur, elle renforce les mécanismes de défense de la peau et rend au
                                visage son éclat naturel.</p>
                            <div class="flex flex-wrap items-center gap-2.5">
                                <a href="#" class="
        
         link-sm
         link-dark
         link-icon
        
    ">
                                    <svg class=" shrink-0" width="16" height="16" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                                        <path d="M2.25 12.75V12C2.25 10.7574 3.25736 9.75 4.5 9.75H19.5C20.7426 9.75 21.75 10.7574 21.75 12V12.75M13.0607 6.31066L10.9393 4.18934C10.658 3.90804 10.2765 3.75 9.87868 3.75H4.5C3.25736 3.75 2.25 4.75736 2.25 6V18C2.25 19.2426 3.25736 20.25 4.5 20.25H19.5C20.7426 20.25 21.75 19.2426 21.75 18V9C21.75 7.75736 20.7426 6.75 19.5 6.75H14.1213C13.7235 6.75 13.342 6.59197 13.0607 6.31066Z" stroke="currentColor" stroke-width="1.5" fill="none" />

                                    </svg>
                                    <span class="">Ingredient Spotlight</span>

                                </a>
                                <span>|</span>
                                <div class="flex flex-row gap-1 text-body-xs">
                                    <svg class=" shrink-0" width="16" height="16" stroke="currentColor" stroke-width="1.5" viewBox="0 0 21 20" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                                        <path d="M10.5 5V10H14.25M18 10C18 14.1421 14.6421 17.5 10.5 17.5C6.35786 17.5 3 14.1421 3 10C3 5.85786 6.35786 2.5 10.5 2.5C14.6421 2.5 18 5.85786 18 10Z" stroke="currentColor" stroke-width="1.5" fill="none" />

                                    </svg> <span> 3 min.</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div x-bind:class="{
                        'js_dummy_slide w-full': pageFillers > 0
                    }"></div>
            </div>
        </div>

        <div :class="{hidden: itemCount / pageSize <= 1}" class="md:hidden relative w-full min-h-14">
            <div class="absolute left-1/2 transform -translate-x-1/2 h-full flex justify-center items-center max-md:adjusted-marg-x-xs">
                <div class="flex items-center ">
                    <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>
            </div>

            <div class="flex justify-end py-3">
                <div class="flex flex-row gap-4">
                    <button type="button" :class="{ 'opacity-25 pointer-events-none' : active === 0 }" @click="scrollPrevious" :disabled="active === 0" aria-label="Voir le slide précédent" class=" btn  btn-dark  btn-subtle btn-border btn-size-sm btn-only-icon">
                        <svg class=" shrink-0" width="24" height="24" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                            <path d="M10.5 19.5L3 12M3 12L10.5 4.5M3 12H21" stroke="currentColor" stroke-width="1.5" fill="none" />

                        </svg>

                    </button>

                    <button type="button" :class="{ 'opacity-25 pointer-events-none' : active >= itemCount - pageSize }" @click="scrollNext" :disabled="active >= itemCount - pageSize" aria-label="Voir le slide suivant" class=" btn  btn-dark  btn-subtle btn-border btn-size-sm btn-only-icon">
                        <svg class=" shrink-0" width="24" height="24" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                            <path d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3" stroke="currentColor" stroke-width="1.5" fill="none" />

                        </svg>

                    </button>
                </div>
            </div>
        </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>