59 lines
1.2 KiB
Vue
59 lines
1.2 KiB
Vue
<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>
|