<template>
|
<div class="swiper_button mr-1" @click="prevSwiper">
|
<img :src="leftIcon" class="">
|
</div>
|
<Swiper :slides-per-view="3" :space-between="18" class="image_swiper" @swiper="setSwiper" >
|
<SwiperSlide v-for="(slide, index) in imageList" :key="index" class="image_slide" >
|
<img :src="slide" class="item_img" @click="imageClick">
|
</SwiperSlide>
|
</Swiper>
|
|
<div class="swiper_button ml-1" @click="nextSwiper">
|
<img :src="rightIcon">
|
</div>
|
</template>
|
|
<script setup>
|
import Viewer from 'viewerjs';
|
import { Swiper, SwiperSlide } from 'swiper/vue';
|
import leftIcon from '@/assets/img/icon/arrow_left.png';
|
import rightIcon from '@/assets/img/icon/arrow_right.png';
|
|
import { defineProps,ref } from 'vue';
|
|
const imgView = null;
|
const swiperRef = ref(null);
|
const props = defineProps({
|
imageList: {
|
type: Array,
|
required: true
|
}
|
})
|
const setSwiper = (swiper) => {
|
swiperRef.value = swiper;
|
}
|
const prevSwiper = () => {
|
swiperRef.value.slidePrev();
|
}
|
|
const nextSwiper = () => {
|
swiperRef.value.slideNext();
|
}
|
|
const imageClick = (event) => {
|
new Viewer(event.target);
|
}
|
|
</script>
|
|
<style lang="scss" scoped>
|
.image_swiper {
|
width: 380px;
|
}
|
|
.swiper-slide.image_slide {
|
width: 102px;
|
height: 124px;
|
overflow: hidden;
|
}
|
|
.item_img {
|
display: block;
|
height: 100%;
|
object-fit: fill;
|
cursor: pointer;
|
}
|
|
.swiper_button {
|
cursor: pointer;
|
}
|
|
</style>
|
