mirror of
https://github.com/Drop-OSS/drop.git
synced 2026-01-31 15:37:09 +01:00
f5cb856d3d
* make carousel pagination clickable * make carousel in game pages wrap around * make items in store fit the row when the filter menu is visible --------- Co-authored-by: udifogiel <udifogiel@proton.me>
26 lines
651 B
Vue
26 lines
651 B
Vue
<template>
|
|
<div class="flex flex-row flex-wrap gap-2 justify-center">
|
|
<button
|
|
v-for="(_, i) in amount"
|
|
:key="i"
|
|
@click="slideTo(i)"
|
|
:class="[
|
|
carousel.currentSlide === i ? 'bg-blue-600 w-6' : 'bg-zinc-700 w-3',
|
|
'transition-all cursor-pointer h-2 rounded-full'
|
|
]"
|
|
/>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { injectCarousel } from "vue3-carousel";
|
|
|
|
const carousel = inject(injectCarousel)!;
|
|
|
|
const amount = carousel.maxSlide - carousel.minSlide + 1;
|
|
|
|
function slideTo(index: number) {
|
|
const offsetIndex = index + carousel.minSlide;
|
|
carousel.nav.slideTo(offsetIndex);
|
|
}
|
|
</script> |