R40fendt/ritzenbergen-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Startseite fast vollständig -> Sehr buggy

Browse Source
This commit is contained in:
R40fendt
2025-04-05 18:25:59 +02:00
parent 03c4b7a9e4
commit 2b4118589b
5 changed files with 376 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

99
src/Embla.vue Normal file
View File

@@ -0,0 +1,99 @@
<script setup>
import { onMounted } from 'vue'
import emblaCarouselVue from 'embla-carousel-vue'
const [emblaRef, emblaApi] = emblaCarouselVue({ loop: false });
onMounted(() => {
if (emblaApi.value) {
console.log(emblaApi.value.slideNodes()) // Access API
}
})
</script>
<template>
<section class="slider4 mbr-embla cid-u6k7q0yLdW" id="gallery-13-u6k7q0yLdW">
<div class="container-fluid">
<div class="row">
<div class="col-12">
<div class="embla position-relative" data-skip-snaps="true" data-align="center"
data-contain-scroll="trimSnaps" data-loop="true" data-auto-play="true" data-auto-play-interval="2"
data-draggable="true">
<div class="embla__viewport">
<div class="embla__container">
<div class="embla__slide slider-image item" style="margin-left: 1rem; margin-right: 1rem;">
<div class="slide-content">
<div class="item-img">
<div class="item-wrapper">
<a href="galerie.php#erntefest">
<img
src="./randomimage.php?path=bilder/erntefest&recursive=1&tn=1&color=white&text=Erntefest&size=5" />
</a>
</div>
</div>
</div>
</div>
<div class="embla__slide slider-image item" style="margin-left: 1rem; margin-right: 1rem;">
<div class="slide-content">
<div class="item-img">
<div class="item-wrapper">
<a href="galerie.php#fussballturnier">
<img
src="./randomimage.php?path=bilder/fussball&recursive=1&tn=1&color=white&text=Fußballturnier&size=3" />
</a>
</div>
</div>
</div>
</div>
<div class="embla__slide slider-image item" style="margin-left: 1rem; margin-right: 1rem;">
<div class="slide-content">
<div class="item-img">
<div class="item-wrapper">
<a href="galerie.php#doppelkopf">
<img
src="./randomimage.php?path=bilder/doppelkopf&recursive=1&tn=1&color=white&text=Doppelkopfturnier&size=3" />
</a>
</div>
</div>
</div>
</div>
<div class="embla__slide slider-image item" style="margin-left: 1rem; margin-right: 1rem;">
<div class="slide-content">
<div class="item-img">
<div class="item-wrapper">
<a href="galerie.php#osterfeuer">
<img
src="./randomimage.php?path=bilder/osterfeuer&recursive=1&tn=1&color=white&text=Osterfeuer&size=5" />
</a>
</div>
</div>
</div>
</div>
<div class="embla__slide slider-image item" style="margin-left: 1rem; margin-right: 1rem;">
<div class="slide-content">
<div class="item-img">
<div class="item-wrapper">
<img src="./Fotos/hauptfoto.jpg" />
</div>
</div>
</div>
</div>
</div>
</div>
<button class="embla__button embla__button--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">
<span class="mobi-mbri mobi-mbri-arrow-next" aria-hidden="true"></span>
<span class="sr-only visually-hidden visually-hidden">Next</span>
</button>
</div>
</div>
</div>
</div>
</section>
</template>
<style scoped>
</style>