yindo/drop
1
0
Fork 0
mirror of https://github.com/BillyOutlast/drop.git synced 2026-02-04 08:41:17 +01:00
Code Issues Packages Projects Releases Wiki Activity

fix: carousel pagination

Browse Source
This commit is contained in:
DecDuck
2025-04-01 16:42:08 +11:00
parent 6f8e28d711
commit 68f5f88347
3 changed files with 13 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
components/CarouselPagination.vue
View File

@@ -4,7 +4,7 @@
v-for="(_, i) in amount"
@click="() => slideTo(i)"
:class="[
currentSlide == i ? 'bg-blue-600 w-6' : 'bg-zinc-700 w-3',
carousel.currentSlide == i ? 'bg-blue-600 w-6' : 'bg-zinc-700 w-3',
'transition-all cursor-pointer h-2 rounded-full',
]"
/>
@@ -12,16 +12,14 @@
</template>
<script setup lang="ts">
const maxSlide = inject("maxSlide", ref(1));
const minSlide = inject("minSlide", ref(1));
const currentSlide = inject("currentSlide", ref(1));
const nav: { slideTo?: (index: number) => any } = inject("nav", {});
import { injectCarousel } from "vue3-carousel";
const amount = computed(() => maxSlide.value - minSlide.value + 1);
const carousel = inject(injectCarousel)!!;
const amount = carousel.maxSlide - carousel.minSlide + 1;
function slideTo(index: number) {
if (!nav.slideTo) return console.warn(`error moving slide: nav not defined`);
const offsetIndex = index + minSlide.value;
nav.slideTo(offsetIndex);
const offsetIndex = index + carousel.minSlide;
carousel.nav.slideTo(offsetIndex);
}
</script>

1
package.json
View File

@@ -40,6 +40,7 @@
"uuid": "^10.0.0",
"vue": "latest",
"vue-router": "latest",
"vue3-carousel": "^0.15.0",
"vue3-carousel-nuxt": "^1.1.5",
"vuedraggable": "^4.1.0"
},

5
yarn.lock
View File

@@ -7214,6 +7214,11 @@ vue3-carousel@^0.13.0:
resolved "https://registry.yarnpkg.com/vue3-carousel/-/vue3-carousel-0.13.0.tgz#cfacf7eae610a41fad4c3aba56ddb49a7776f416"
integrity sha512-vio91KI4mVMlCDbVhGzW9nIyYqxu0moqroPR/OrJeaCvAK3SJYxqvH36a4/t1oEJYJsTgh+IuNiNi6c+7DVKZg==
vue3-carousel@^0.15.0:
version "0.15.0"
resolved "https://registry.yarnpkg.com/vue3-carousel/-/vue3-carousel-0.15.0.tgz#6a666566779dd30027a857ec0d92bfef97f15b27"
integrity sha512-yYBBEdmvsMNlgKivVHiFMKV7TlWDoMEiVLA+Vb31t1JEQILAQYADMDYYuE9mp6OSGEQpCBgt8e/EpO2MZlQhcw==
vue@^3.5.13, vue@latest:
version "3.5.13"
resolved "https://registry.yarnpkg.com/vue/-/vue-3.5.13.tgz#9f760a1a982b09c0c04a867903fc339c9f29ec0a"