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

Embla repariert

Browse Source
This commit is contained in:
R40fendt
2025-04-16 18:29:38 +02:00
parent 6aa7e2c81f
commit 3057988eb0
3 changed files with 101 additions and 98 deletions
Download Patch File Download Diff File Expand all files Collapse all files

135
src/Embla.vue
View File

@@ -1,102 +1,71 @@
<script setup> <script setup>
import { onMounted } from 'vue' import emblaCarouselVue from "embla-carousel-vue";
import emblaCarouselVue from 'embla-carousel-vue' import Autoplay from "embla-carousel-autoplay";
import RitzenbergenLib from "./ritzenbergenlib.ts";
import { onMounted, ref } from "vue";
import EmblaItem from "./EmblaItem.vue";
const emblaApi = ref();
const [emblaRef, emblaInstance] = emblaCarouselVue({ loop: true }, [
Autoplay({ delay: 3000 }),
]);
const [emblaRef, emblaApi] = emblaCarouselVue({ loop: false });
onMounted(() => { onMounted(() => {
if (emblaApi.value) { emblaApi.value = emblaInstance.value;
console.log(emblaApi.value.slideNodes()) // Access API
}
}); });
function get_file(){
} const prev = () => {
emblaApi.value?.scrollPrev();
};
const next = () => {
emblaApi.value?.scrollNext();
};
</script> </script>
<template> <template>
<section class="slider4 mbr-embla cid-u6k7q0yLdW" id="gallery-13-u6k7q0yLdW"> <div class="embla" ref="emblaRef">
<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__container">
<div class="embla__slide slider-image item" style="margin-left: 1rem; margin-right: 1rem;"> <EmblaItem
<div class="slide-content"> :src="
<div class="item-img"> RitzenbergenLib.api(
<div class="item-wrapper"> 'randomimage.php?path=/erntefest&recursive=1&tn=1&color=white&text=Erntefest&size=5'
<a href="galerie.php#erntefest"> )
<img "
:src="get_file('./randomimage.php?path=bilder/erntefest&recursive=1&tn=1&color=white&text=Erntefest&size=5')" /> />
</a> <EmblaItem
:src="
RitzenbergenLib.api(
'randomimage.php?path=/erntefest&recursive=1&tn=1&color=white&text=Erntefest&size=5'
)
"
/>
<EmblaItem
:src="
RitzenbergenLib.api(
'randomimage.php?path=/erntefest&recursive=1&tn=1&color=white&text=Erntefest&size=5'
)
"
/>
<EmblaItem
:src="
RitzenbergenLib.api(
'randomimage.php?path=/erntefest&recursive=1&tn=1&color=white&text=Erntefest&size=5'
)
"
/>
<EmblaItem src="http://ritzenbergen.de/Fotos/hauptfoto.jpg" />
</div> </div>
</div> <button class="embla__button embla__button--prev" @click="prev">
</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="get_file('./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="get_file('./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="get_file('./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="mobi-mbri mobi-mbri-arrow-prev" aria-hidden="true"></span>
<span class="sr-only visually-hidden visually-hidden">Previous</span> <span class="sr-only visually-hidden visually-hidden">Previous</span>
</button> </button>
<button class="embla__button embla__button--next"> <button class="embla__button embla__button--next" @click="next">
<span class="mobi-mbri mobi-mbri-arrow-next" aria-hidden="true"></span> <span class="mobi-mbri mobi-mbri-arrow-next" aria-hidden="true"></span>
<span class="sr-only visually-hidden visually-hidden">Next</span> <span class="sr-only visually-hidden visually-hidden">Next</span>
</button> </button>
</div> </div>
</div>
</div>
</div>
</section>
</template> </template>
<style scoped> <style scoped></style>
</style>

26
src/EmblaItem.vue Normal file
View File

@@ -0,0 +1,26 @@
<script lang="ts">
export default {
props: ["src"],
};
</script>
<template>
<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="
src
"
/>
</a>
</div>
</div>
</div>
</div>
</template>
<style></style>

16
src/Main.vue
View File

@@ -292,7 +292,7 @@ export default {
<div class="item-wrapper"> <div class="item-wrapper">
<div class="item-img"> <div class="item-img">
<a href="./galerie.php#doppelkopf"><img <a href="./galerie.php#doppelkopf"><img
:src="RitzenbergenLib.api('randomimage.php?path=bilder/doppelkopf&recursive=1&tn=1&color=white&text=Doppelkopf&size=3')"></a> :src="RitzenbergenLib.api('randomimage.php?path=/doppelkopf&recursive=1&tn=1&color=white&text=Doppelkopf&size=3')"></a>
</div> </div>
</div> </div>
</div> </div>
@@ -300,7 +300,7 @@ export default {
<div class="item-wrapper"> <div class="item-wrapper">
<div class="item-img"> <div class="item-img">
<a href="./galerie.php#erntefest"><img <a href="./galerie.php#erntefest"><img
:src="RitzenbergenLib.api('randomimage.php?path=bilder/erntefest&recursive=1&tn=1&color=white&text=Erntefest&size=3')"></a> :src="RitzenbergenLib.api('randomimage.php?path=/erntefest&recursive=1&tn=1&color=white&text=Erntefest&size=3')"></a>
</div> </div>
</div> </div>
</div> </div>
@@ -308,7 +308,7 @@ export default {
<div class="item-wrapper"> <div class="item-wrapper">
<div class="item-img"> <div class="item-img">
<a href="./galerie.php#fussballturnier"><img <a href="./galerie.php#fussballturnier"><img
:src="RitzenbergenLib.api('randomimage.php?path=bilder/fussball&recursive=1&tn=1&color=white&text=Fußballturnier&size=3')"></a> :src="RitzenbergenLib.api('randomimage.php?path=/fussball&recursive=1&tn=1&color=white&text=Fußballturnier&size=3')"></a>
</div> </div>
</div> </div>
</div> </div>
@@ -316,7 +316,7 @@ export default {
<div class="item-wrapper"> <div class="item-wrapper">
<div class="item-img"> <div class="item-img">
<a href="./galerie.php#osterfeuer"><img <a href="./galerie.php#osterfeuer"><img
:src="RitzenbergenLib.api('randomimage.php?path=bilder/osterfeuer&recursive=1&tn=1&color=white&text=Osterfeuer&size=3')"></a> :src="RitzenbergenLib.api('randomimage.php?path=/osterfeuer&recursive=1&tn=1&color=white&text=Osterfeuer&size=3')"></a>
</div> </div>
</div> </div>
</div> </div>
@@ -325,8 +325,16 @@ export default {
</div> </div>
</section> </section>
<section class="slider4 mbr-embla cid-u6k7q0yLdW" id="gallery-13-u6k7q0yLdW">
<div class="container-fluid">
<div class="row">
<div class="col-12">
<Embla/> <Embla/>
</div>
</div>
</div>
</section>