Slider Pagination

<div class="flex items-center {{ class }}">
    <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>