<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>