|
|
|
|
@ -1,14 +1,22 @@
|
|
|
|
|
<template>
|
|
|
|
|
<!-- banner区域 -->
|
|
|
|
|
<div class="banner">
|
|
|
|
|
<div class="wrapper">
|
|
|
|
|
<div class="swiper-box" style="height: 500px" v-if="childDataList.length">
|
|
|
|
|
<!-- swiper1 -->
|
|
|
|
|
<swiper :options="swiperOptionTop" class="gallery-top" ref="swiperTop">
|
|
|
|
|
<swiper-slide class="" v-for="item in childDataList" :key="item.id">
|
|
|
|
|
<img :src="item.path" alt="" style="width: 100%" />
|
|
|
|
|
</swiper-slide>
|
|
|
|
|
|
|
|
|
|
<div class="thumb-example2">
|
|
|
|
|
<swiper
|
|
|
|
|
class="swiper gallery-top"
|
|
|
|
|
:options="swiperOptionTop"
|
|
|
|
|
ref="swiperTop"
|
|
|
|
|
>
|
|
|
|
|
<swiper-slide
|
|
|
|
|
:class="`slide-${index + 1}`"
|
|
|
|
|
v-for="(item, index) in terminalPhoto"
|
|
|
|
|
:key="item.id"
|
|
|
|
|
v-bind:style="{
|
|
|
|
|
'background-image': 'url(' + item.path + ')',
|
|
|
|
|
}"
|
|
|
|
|
></swiper-slide>
|
|
|
|
|
<!-- <swiper-slide class="slide-2"></swiper-slide>
|
|
|
|
|
<swiper-slide class="slide-3"></swiper-slide>
|
|
|
|
|
<swiper-slide class="slide-4"></swiper-slide>
|
|
|
|
|
<swiper-slide class="slide-5"></swiper-slide> -->
|
|
|
|
|
<div
|
|
|
|
|
class="swiper-button-next swiper-button-white"
|
|
|
|
|
slot="button-next"
|
|
|
|
|
@ -20,20 +28,33 @@
|
|
|
|
|
</swiper>
|
|
|
|
|
<!-- swiper2 Thumbs -->
|
|
|
|
|
<swiper
|
|
|
|
|
class="swiper gallery-thumbs"
|
|
|
|
|
:options="swiperOptionThumbs"
|
|
|
|
|
class="gallery-thumbs"
|
|
|
|
|
ref="swiperThumbs"
|
|
|
|
|
>
|
|
|
|
|
<swiper-slide class="" v-for="item in childDataList" :key="item.id">
|
|
|
|
|
<img :src="item.path" alt="" style="height: 100%; width: 100%" />
|
|
|
|
|
</swiper-slide>
|
|
|
|
|
<swiper-slide
|
|
|
|
|
:class="`slide-${index + 1}`"
|
|
|
|
|
v-for="(item, index) in terminalPhoto"
|
|
|
|
|
:key="item.id"
|
|
|
|
|
v-bind:style="{
|
|
|
|
|
'background-image': 'url(' + item.path + ')',
|
|
|
|
|
}"
|
|
|
|
|
></swiper-slide>
|
|
|
|
|
</swiper>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
import { Swiper, SwiperSlide } from "vue-awesome-swiper";
|
|
|
|
|
import "swiper/css/swiper.css";
|
|
|
|
|
|
|
|
|
|
export default {
|
|
|
|
|
name: "swiper-example-thumbs-gallery",
|
|
|
|
|
title: "Thumbs gallery with Two-way control",
|
|
|
|
|
components: {
|
|
|
|
|
Swiper,
|
|
|
|
|
SwiperSlide,
|
|
|
|
|
},
|
|
|
|
|
props: {
|
|
|
|
|
terminalPhoto: {
|
|
|
|
|
type: Array,
|
|
|
|
|
@ -42,15 +63,10 @@ export default {
|
|
|
|
|
},
|
|
|
|
|
data() {
|
|
|
|
|
return {
|
|
|
|
|
childDataList: [],
|
|
|
|
|
|
|
|
|
|
swiperOptionTop: {
|
|
|
|
|
loop: true,
|
|
|
|
|
loopedSlides: 5, // looped slides should be the same
|
|
|
|
|
spaceBetween: 10,
|
|
|
|
|
observer: true, //修改swiper自己或子元素时，自动初始化swiper
|
|
|
|
|
observeParents: true, //修改swiper的父元素时，自动初始化swiper
|
|
|
|
|
|
|
|
|
|
navigation: {
|
|
|
|
|
nextEl: ".swiper-button-next",
|
|
|
|
|
prevEl: ".swiper-button-prev",
|
|
|
|
|
@ -64,71 +80,47 @@ export default {
|
|
|
|
|
slidesPerView: "auto",
|
|
|
|
|
touchRatio: 0.2,
|
|
|
|
|
slideToClickedSlide: true,
|
|
|
|
|
navigation: {
|
|
|
|
|
nextEl: ".swiper-button-next",
|
|
|
|
|
prevEl: ".swiper-button-prev",
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
};
|
|
|
|
|
},
|
|
|
|
|
watch: {
|
|
|
|
|
terminalPhoto: {
|
|
|
|
|
handler(val) {
|
|
|
|
|
console.log("dataObj deep change", val);
|
|
|
|
|
this.childDataList = val;
|
|
|
|
|
console.log(this.childDataList);
|
|
|
|
|
},
|
|
|
|
|
deep: true, // 深度监听
|
|
|
|
|
immediate: true, // 初次监听即执行
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
methods: {},
|
|
|
|
|
mounted() {
|
|
|
|
|
this.$nextTick(() => {
|
|
|
|
|
const swiperTop = this.$refs.swiperTop.swiper;
|
|
|
|
|
const swiperThumbs = this.$refs.swiperThumbs.swiper;
|
|
|
|
|
const swiperTop = this.$refs.swiperTop.$swiper;
|
|
|
|
|
const swiperThumbs = this.$refs.swiperThumbs.$swiper;
|
|
|
|
|
swiperTop.controller.control = swiperThumbs;
|
|
|
|
|
swiperThumbs.controller.control = swiperTop;
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
};
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<style lang="less" scoped>
|
|
|
|
|
.banner {
|
|
|
|
|
.wrapper {
|
|
|
|
|
width: 100%;
|
|
|
|
|
//margin: 300px auto;
|
|
|
|
|
.thumb-example2 {
|
|
|
|
|
height: 480px;
|
|
|
|
|
background-color: #000;
|
|
|
|
|
.swiper {
|
|
|
|
|
.swiper-slide {
|
|
|
|
|
background-size: cover;
|
|
|
|
|
background-position: center;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.swiper-container {
|
|
|
|
|
background-color: #fff;
|
|
|
|
|
}
|
|
|
|
|
swiper-slide {
|
|
|
|
|
img {
|
|
|
|
|
&.gallery-top {
|
|
|
|
|
height: 80%;
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.swiper-slide {
|
|
|
|
|
background-size: cover;
|
|
|
|
|
background-position: center;
|
|
|
|
|
}
|
|
|
|
|
.gallery-top {
|
|
|
|
|
height: 80% !important;
|
|
|
|
|
width: 100%;
|
|
|
|
|
}
|
|
|
|
|
.gallery-thumbs {
|
|
|
|
|
height: 20% !important;
|
|
|
|
|
&.gallery-thumbs {
|
|
|
|
|
height: 20%;
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
padding: 10px 0;
|
|
|
|
|
}
|
|
|
|
|
.gallery-thumbs .swiper-slide {
|
|
|
|
|
}
|
|
|
|
|
&.gallery-thumbs .swiper-slide {
|
|
|
|
|
width: 25%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
opacity: 0.4;
|
|
|
|
|
}
|
|
|
|
|
.gallery-thumbs .swiper-slide-active {
|
|
|
|
|
}
|
|
|
|
|
&.gallery-thumbs .swiper-slide-active {
|
|
|
|
|
opacity: 1;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
|
fanluyan
2 years ago