Ordnerstruktur verbessert

src/components/Embla.vue

@@ -0,0 +1,60 @@
+<script setup>
+import emblaCarouselVue from "embla-carousel-vue";
+import RitzenbergenLib from "../ritzenbergenlib.ts";
+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,
+  },
+});
+</script>
+
+<template>
+  <div class="embla" ref="emblaRef">
+    <div class="embla__container">
+      <EmblaItem v-for="el in src" :src="el" />
+    </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>