<template>
  <q-carousel
    swipeable
    animated
    :autoplay="autoplay"
    transition-prev="slide-right"
    transition-next="slide-left"
    @mouseenter="autoplay = false"
    @mouseleave="autoplay = 5000"
    :arrows="imgGallery.length > 1"
    v-model="slide"
    :thumbnails="imgGallery.length > 1"
    infinite
    navigation
  >
    <q-carousel-slide
      v-for="(myimg, index) in imgGallery"
      :name="index"
      :key="index"
      :img-src="directory + '/' + myimg.imagefile"
      @click="showImage(myimg)"
    >
    </q-carousel-slide>
  </q-carousel>
  <q-dialog v-model="dialogVisible">
    <q-img
      mode="contain"
      v-if="selectedImage.imagefile"
      :src="directory + '/' + selectedImage.imagefile"
      :alt="selectedImage.imagefile"
    />
    <q-btn color="primary" label="Close" @click="closeDialog" />
  </q-dialog>
</template>

<script lang="ts" src="./CGalleryImages.ts">
</script>

<style lang="scss" scoped>
@import './CGalleryImages.scss';
</style>
