73 lines
1.6 KiB
Vue
73 lines
1.6 KiB
Vue
<script setup lang="ts">
|
|
import emblaCarouselVue from "embla-carousel-vue";
|
|
import { onMounted, ref } from "vue";
|
|
import EmblaItem from "./EmblaItem.vue";
|
|
|
|
const emblaApi = ref();
|
|
|
|
const [emblaRef, emblaInstance] = emblaCarouselVue({ loop: true });
|
|
|
|
let timeout=false;
|
|
|
|
onMounted(() => {
|
|
emblaApi.value = emblaInstance.value;
|
|
setInterval(()=>{
|
|
if(!timeout) emblaApi.value?.scrollNext();
|
|
}, 2000);
|
|
});
|
|
|
|
const prev = () => {
|
|
emblaApi.value?.scrollPrev();
|
|
addTimeout();
|
|
};
|
|
|
|
const next = () => {
|
|
emblaApi.value?.scrollNext();
|
|
addTimeout();
|
|
};
|
|
function addTimeout(){
|
|
timeout=true;
|
|
setTimeout(()=>{
|
|
timeout=false;
|
|
}, 4000);
|
|
}
|
|
|
|
defineProps({
|
|
src: {
|
|
type: Array,
|
|
required: true,
|
|
},
|
|
links: {
|
|
type: Array,
|
|
required: true,
|
|
},
|
|
jahre: {
|
|
type: Array,
|
|
required: false,
|
|
},
|
|
fontSize:{
|
|
type: Number,
|
|
required: false,
|
|
default: 100
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div class="embla" ref="emblaRef">
|
|
<div class="embla__container">
|
|
<EmblaItem v-for="el, i in src" :src="el" :jahr="jahre?jahre[i]:null" :link="links[i]" :font-size="fontSize"/>
|
|
</div>
|
|
<button class="embla__button embla__button--prev" @click="prev">
|
|
<span class="mobi-mbri mobi-mbri-arrow-prev" aria-hidden="true"></span>
|
|
<span class="sr-only visually-hidden visually-hidden">Previous</span>
|
|
</button>
|
|
<button class="embla__button embla__button--next" @click="next">
|
|
<span class="mobi-mbri mobi-mbri-arrow-next" aria-hidden="true"></span>
|
|
<span class="sr-only visually-hidden visually-hidden">Next</span>
|
|
</button>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped></style>
|