126 lines
3.5 KiB
Vue
126 lines
3.5 KiB
Vue
<template>
|
|
<div v-if="video || screenshots">
|
|
<div class="swiper-carousel overflow-hidden">
|
|
<div class="swiper-wrapper" style="flex-wrap: nowrap !important;">
|
|
<div class="swiper-slide" v-for="(screenshot, index) in screenshots" :key="index">
|
|
<a :href="screenshot.path_string" class="glightbox">
|
|
<img class="rounded-lg object-cover cursor-pointer" :src="screenshot.path_string" :alt="screenshot.alt_attribute" />
|
|
<div class="text-gray-700 text-sm my-2">{{ screenshot.description }}</div>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div v-if="pagination" class="swiper-pagination w-full flex justify-center gap-1"></div>
|
|
|
|
<div v-if="arrow" class="swiper-button-next ltr:-right-8 rtl:-left-8 top-12">
|
|
<span class="material-icons text-5xl">chevron_right</span>
|
|
</div>
|
|
|
|
<div v-if="arrow" class="swiper-button-prev ltr:-left-8 rtl:-right-8 top-12">
|
|
<span class="material-icons text-5xl">chevron_left</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import Swiper, { Navigation, Pagination } from 'swiper';
|
|
Swiper.use([Navigation, Pagination]);
|
|
|
|
import GLightbox from 'glightbox';
|
|
import 'glightbox/dist/css/glightbox.min.css';
|
|
|
|
export default {
|
|
name: "akaunting-slider",
|
|
|
|
props: {
|
|
name: {
|
|
type: String,
|
|
default: null,
|
|
description: "App Name"
|
|
},
|
|
video: {
|
|
type: String,
|
|
default: null,
|
|
description: "App Video"
|
|
},
|
|
screenshots: {
|
|
type: Array,
|
|
default: false,
|
|
description: "App Screenshots"
|
|
},
|
|
height: {
|
|
type: String,
|
|
default: null,
|
|
description: "height of the carousel"
|
|
},
|
|
arrow: {
|
|
type: [Boolean, String],
|
|
default: false,
|
|
},
|
|
pagination: {
|
|
type: [Boolean, String],
|
|
default: false,
|
|
},
|
|
type: {
|
|
type: String,
|
|
default: '',
|
|
description: "type of the Carousel (card)"
|
|
},
|
|
sliderView: {
|
|
type: [Number, String],
|
|
default: 4,
|
|
},
|
|
sliderRow: {
|
|
type: [Number, String],
|
|
default: 2,
|
|
}
|
|
},
|
|
mounted() {
|
|
let media = [];
|
|
if (this.screenshots.length) {
|
|
this.screenshots.forEach(function(screenshot) {
|
|
media.push({ // For image
|
|
thumb: screenshot.path_string,
|
|
src: screenshot.path_string,
|
|
});
|
|
});
|
|
}
|
|
this.media = media;
|
|
new Swiper(".swiper-carousel", {
|
|
loop: false,
|
|
grid: {
|
|
rows: this.sliderRow,
|
|
},
|
|
spaceBetween: 30,
|
|
breakpoints: {
|
|
640: {
|
|
slidesPerView: 1
|
|
},
|
|
768: {
|
|
slidesPerView: this.sliderView,
|
|
}
|
|
},
|
|
pagination: {
|
|
el: ".swiper-pagination",
|
|
clickable: true
|
|
},
|
|
navigation: {
|
|
nextEl: ".swiper-button-next",
|
|
prevEl: ".swiper-button-prev",
|
|
},
|
|
});
|
|
GLightbox({
|
|
touchNavigation: true,
|
|
loop: false,
|
|
autoplayVideos: false,
|
|
selector: ".glightbox"
|
|
});
|
|
},
|
|
data: function () {
|
|
return {
|
|
media: [],
|
|
}
|
|
},
|
|
}
|
|
</script>
|