102 lines
4.2 KiB
Vue
102 lines
4.2 KiB
Vue
<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
|
|
}
|
|
});
|
|
function get_file(){
|
|
|
|
}
|
|
</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="get_file('./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="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="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> |