Embla repariert
This commit is contained in:
R40fendt
135
src/Embla.vue
135
src/Embla.vue
@@ -1,102 +1,71 @@
|
||||
<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(() => {
|
||||
if (emblaApi.value) {
|
||||
console.log(emblaApi.value.slideNodes()) // Access API
|
||||
}
|
||||
emblaApi.value = emblaInstance.value;
|
||||
});
|
||||
function get_file(){
|
||||
|
||||
}
|
||||
const prev = () => {
|
||||
emblaApi.value?.scrollPrev();
|
||||
};
|
||||
|
||||
const next = () => {
|
||||
emblaApi.value?.scrollNext();
|
||||
};
|
||||
</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" ref="emblaRef">
|
||||
<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="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="
|
||||
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>
|
||||
</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">
|
||||
<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">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
<style scoped></style>
|
||||
|
||||
26
src/EmblaItem.vue
Normal file
26
src/EmblaItem.vue
Normal 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
16
src/Main.vue
@@ -292,7 +292,7 @@ export default {
|
||||
<div class="item-wrapper">
|
||||
<div class="item-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>
|
||||
@@ -300,7 +300,7 @@ export default {
|
||||
<div class="item-wrapper">
|
||||
<div class="item-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>
|
||||
@@ -308,7 +308,7 @@ export default {
|
||||
<div class="item-wrapper">
|
||||
<div class="item-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>
|
||||
@@ -316,7 +316,7 @@ export default {
|
||||
<div class="item-wrapper">
|
||||
<div class="item-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>
|
||||
@@ -325,8 +325,16 @@ export default {
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="slider4 mbr-embla cid-u6k7q0yLdW" id="gallery-13-u6k7q0yLdW">
|
||||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
|
||||
<Embla/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user