<template>
  <div ref="slider" class="keen-slider my-24">
    <HorizontalGalleryItem
      v-for="img in images"
      :key="img.id"
      :image="img.image"
      :category="img.category"
    />
  </div>
</template>

<script>
import "keen-slider/keen-slider.min.css";
import KeenSlider from "keen-slider";
import GalleryItemMixin from "~/components/gallery/GalleryItemMixin";
import HorizontalGalleryItem from "~/components/gallery/HorizontalGalleryItem.vue";

const animation = {duration: 40000, easing: (t) => t}

export default {
  name: "HorizontalGallery",
  components: {HorizontalGalleryItem},
  props: {
    images: {type: Array, default: []},
  },

  mixins: [GalleryItemMixin],

  mounted() {
    this.slider = new KeenSlider(this.$refs.slider, {
      loop: true,
      renderMode: "performance",
      drag: false,
      slides: {perView: "auto"},

      created(s) {
        s.moveToIdx(5, true, animation)
      },
      updated(s) {
        s.moveToIdx(s.track.details.abs + 5, true, animation)
      },
      animationEnded(s) {
        s.moveToIdx(s.track.details.abs + 5, true, animation)
      },
    });
  },

  beforeDestroy() {
    if (this.slider) this.slider.destroy();
  },

  methods: {
  }
}
</script>

<style lang="css" scoped>
</style>
