1.引入swiper和vue-awesome-swiper插件
npm install swiper@4 --save npm install vue-awesome-swiper@3 --save
复制代码
2.在main.js中引入：
import VueAwesomeSwiper from 'vue-awesome-swiper'
Vue.use(VueAwesomeSwiper)
import '../node_modules/swiper/dist/css/swiper.css'
复制代码
3.使用：
template:布局
<template>
<div>
<div class="thumb-example">
<!-- swiper1 -->
<swiper class="swiper gallery-top" :options="swiperOptionTop" ref="swiperTop">
<swiper-slide class="slide-1" v-for="item in bigImg" :key="item.id">
<video v-if="item.id === 0" :src="item.url" controls muted style="height: 330px; width: 100%" autoplay="autoplay" loop="loop"></video>
<img v-else :src="item.url" />
<!-- <img :src="item.url" style="height: 330px; width: 100%" alt="" /> -->
</swiper-slide>
<div style="display: none" class="swiper-button-next swiper-button-white" slot="button-next"></div>
<div style="display: none" class="swiper-button-prev swiper-button-white" slot="button-prev"></div>
</swiper>
<!-- swiper2 Thumbs -->
<swiper class="swiper gallery-thumbs" :options="swiperOptionThumbs" ref="swiperThumbs">
<swiper-slide class="slide" style="width: 100px; height: 100px" v-for="item in bigImg" :key="item.id">
<video v-if="item.id === 0" :src="item.url" controls muted style="width: 100%; height: 100px"></video>
<img v-else :src="item.url" style="width: 100%; height: 100px" />
<!-- <img style="width: 100px; height: 100px" :src="item.url" alt="" /> -->
</swiper-slide>
<div class="swiper-button-next swiper-button-white" slot="button-next">
<div>
<img class="swiper_concal swiper_concal_right" src="../../../assets/images/mySwiper/right.png" alt="" />
</div>
</div>
<div class="swiper-button-prev swiper-button-white" slot="button-prev">
<div>
<img class="swiper_concal swiper_concal_left" src="../../../assets/images/mySwiper/left.png" alt="" />
</div>
</div>
</swiper>
</div>
</div>
</template>
<script>
export default {
mounted() {
// 实现swiper双向控制
this.$nextTick(() => {
const swiperTop = this.$refs.swiperTop.swiper;
const swiperThumbs = this.$refs.swiperThumbs.swiper;
swiperTop.controller.control = swiperThumbs;
swiperThumbs.controller.control = swiperTop;
});
},
data() {
return {
//轮播大图配置
bigImg: [
{
url: 'http://mediaplay.kksmg.com/2022/11/02/h264_720p_600k_43153-DFTVHD-20221102065500-10800-384594-600k_mp4.mp4',
id: 0
},
{
url: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2F8%2F55402f62682e3.jpg&refer=http%3A%2F%2Fpic1.win4000.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1670121680&t=f08477b79b9619be5b96b75ee7fedbdb',
id: 1
},
{
url: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Flmg.jj20.com%2Fup%2Fallimg%2F1114%2F041621122252%2F210416122252-1-1200.jpg&refer=http%3A%2F%2Flmg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1670121680&t=adbe4746c8370677f53a45608f38dbe2',
id: 2
},
{
url: 'src=http __lmg.jj20.com_up_allimg_1114_010421142927_210104142927-13-1200.jpg&refer=http __lmg.jj20.webp',
id: 3
},
{
url: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Flmg.jj20.com%2Fup%2Fallimg%2F1114%2F121420113514%2F201214113514-6-1200.jpg&refer=http%3A%2F%2Flmg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1670121680&t=9fdf38101c0fc22d72fad8e6e6a8f09c',
id: 4
},
{
url: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2F5%2F5476e32631957.jpg&refer=http%3A%2F%2Fpic1.win4000.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1670121680&t=0bb759fcf589461b32a53e1b484c5dab',
id: 5
}
],
swiperOptionTop: {
zoom: true,
loop: true,
loopedSlides: 5,
spaceBetween: 10,
observer: true,
observeParents: true,
// autoplay: {
// //自动轮播
// delay: 1000,
// disableOnInteraction: false
// },
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev'
}
},
swiperOptionThumbs: {
loop: true,
loopedSlides: 5, // looped slides should be the same
spaceBetween: 10,
centeredSlides: true,
slidesPerView: 'auto',
touchRatio: 0.5,
slideToClickedSlide: true,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev'
}
}
};
},
methods: {}
};
</script>
<style lang="less" scoped>
h3 {
margin: 20px 0 0 10px;
}
.thumb-example {
width: 880px;
}
.swiper-slide {
background-size: cover;
background-position: center;
}
.gallery-top {
// height: 80% !important;
height: 330px;
width: 100%;
}
.gallery-thumbs {
height: 20% !important;
box-sizing: border-box;
padding: 10px 0px;
width: 864px;
margin-left: 2px;
.play {
position: absolute;
left: 46%;
top: 40%;
}
.swiper_concal {
position: relative;
top: -25px;
}
.swiper_concal_right {
left: 10px;
}
.swiper_concal_left {
left: -10px;
}
.swiper-button-next {
right: 0px;
}
.swiper-button-prev {
left: 0px;
}
.swiper-button-next,
.swiper-button-prev {
background: transparent;
width: 45px;
text-align: center;
height: 101px;
top: 26%;
div {
margin-top: 30px;
background: transparent;
height: 45px;
border-radius: 50%;
img {
margin: 7px 0 0 2px;
width: 30px;
}
}
}
.swiper-button-next:hover div {
background: transparent;
}
.swiper-button-prev:hover div {
background: transparent;
}
}
.gallery-thumbs .swiper-slide {
width: 20%;
height: 80px;
// opacity: 0.4;
}
.gallery-thumbs .swiper-slide-active {
border: 2px solid #fff8e2;
}
</style>
