vue中允许你继续使用swiper的组件 vue-awesome-swiper---切图网

Posted 2020-11-25 pwindy

swiper是一个在切图中好用到不行的图片轮播插件，包括3d轮播、h5滑屏等复杂应用都不在话下，到了vue项目一切逻辑完全颠覆了，没有获取dom的概念，还好有 vue-awesome-swiper组件，让我们可以无缝的继续使用swiper。如果没记错的话vue-awesome-swiper基于swiper3.x 开发得来。

1.npm安装

npm install vue-awesome-swiper –save

2.main.js全局安装

import Vue from ‘vue‘
import VueAwesomeSwiper from ‘vue-awesome-swiper‘

// require styles
import ‘swiper/dist/css/swiper.css‘

Vue.use(VueAwesomeSwiper, /* { default global options } */)

3.组件里调用

import ‘swiper/dist/css/swiper.css‘

import { swiper, swiperSlide } from ‘vue-awesome-swiper‘

export default {
components: {
swiper,
swiperSlide
}
}

4、缩略图（普通的swiper很简单，网上有很多可以借鉴 我备注一下缩略图的）
template中

<div class="swiper-box" style="height: 500px">
<!-- swiper1 -->
<swiper :options="swiperOptionTop" class="gallery-top" 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 :options="swiperOptionThumbs" class="gallery-thumbs" 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>

data中定义

data() {
return {
swiperOptionTop: {
spaceBetween: 10,
navigation: {
nextEl: ‘.swiper-button-next‘,
prevEl: ‘.swiper-button-prev‘
}
},
swiperOptionThumbs: {
spaceBetween: 10,
centeredSlides: true,
slidesPerView: ‘auto‘,
touchRatio: 0.2,
slideToClickedSlide: true
}
}
},

mounted中

mounted() {
this.$nextTick(() => {
const swiperTop = this.$refs.swiperTop.swiper
const swiperThumbs = this.$refs.swiperThumbs.swiper
swiperTop.controller.control = swiperThumbs
swiperThumbs.controller.control = swiperTop
})
}

style部分

<style lang="scss" scoped>
.swiper-container {
background-color: #000;
}
.swiper-slide {
background-size: cover;
background-position: center;
&.slide-1 {
background-image:url(‘/static/images/surmon-1.jpg‘);
}
&.slide-2 {
background-image:url(‘/static/images/surmon-6.jpg‘);
}
&.slide-3 {
background-image:url(‘/static/images/surmon-8.jpg‘);
}
&.slide-4 {
background-image:url(‘/static/images/surmon-9.jpg‘);
}
&.slide-5 {
background-image:url(‘/static/images/surmon-10.jpg‘);
}
}
.gallery-top {
height: 80%!important;
width: 100%;
}
.gallery-thumbs {
height: 20%!important;
box-sizing: border-box;
padding: 10px 0;
}
.gallery-thumbs .swiper-slide {
width: 25%;
height: 100%;
opacity: 0.4;
}
.gallery-thumbs .swiper-slide-active {
opacity: 1;
}
</style>

以上是关于vue中允许你继续使用swiper的组件 vue-awesome-swiper---切图网的主要内容，如果未能解决你的问题，请参考以下文章

vue封装组件swiper轮播组件

Vue使用轮播图vue-awesome-swiper组件常用属性-swiper案例

轮播插件vue-awesome-swiper的基本使用

vue轮播图插件vue-awesome-swiper的使用与组件化

Vue使用Swiper6（2）

vue中引用swiper轮播插件