vue中使用swiper( vue-awesome-swiper4.0及以上版本)缩略图轮播
效果图:1.npm安装npm install swiper vue-awesome-swiper --savevue-awesome-swiper4.0以上版本一定要swiper 和 vue-awesome-swiper4.0一起安装,否则会报错2.组件里调用完整代码<template><div class="thumb-example"><!-- swiper1 -
·
效果图:
1.npm安装
npm install swiper vue-awesome-swiper --save
vue-awesome-swiper4.0以上版本一定要swiper 和 vue-awesome-swiper4.0一起安装,否则会报错
2.组件里调用完整代码
<template>
<div class="thumb-example">
<!-- swiper1 -->
<swiper class="swiper gallery-top" :options="swiperOptionTop" ref="swiperTop">
<swiper-slide class="slide-1"></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"></div>
<div 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-1"></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>
</swiper>
</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
},
data() {
return {
swiperOptionTop: {
loop: true,
loopedSlides: 5, // looped slides should be the same
spaceBetween: 10,
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.2,
slideToClickedSlide: true
}
}
},
mounted() {
this.$nextTick(() => {
const swiperTop = this.$refs.swiperTop.$swiper
const swiperThumbs = this.$refs.swiperThumbs.$swiper
swiperTop.controller.control = swiperThumbs
swiperThumbs.controller.control = swiperTop
})
}
}
</script>
<style lang="scss" scoped>
.thumb-example {
height: 480px;
background-color: $black;
}
.swiper {
.swiper-slide {
background-size: cover;
background-position: center;
&.slide-1 {
background-image:url('/images/example/1.jpg');
}
&.slide-2 {
background-image:url('/images/example/2.jpg');
}
&.slide-3 {
background-image:url('/images/example/4.jpg');
}
&.slide-4 {
background-image:url('/images/example/5.jpg');
}
&.slide-5 {
background-image:url('/images/example/6.jpg');
}
}
&.gallery-top {
height: 80%;
width: 100%;
}
&.gallery-thumbs {
height: 20%;
box-sizing: border-box;
padding: $gap 0;
}
&.gallery-thumbs .swiper-slide {
width: 25%;
height: 100%;
opacity: 0.4;
}
&.gallery-thumbs .swiper-slide-active {
opacity: 1;
}
}
</style>
更多推荐
已为社区贡献2条内容
所有评论(0)