网站需要做简单轮播效果,实现之后来总结一下。
注意swiper版本号,6.0以上的请移步https://blog.csdn.net/G_X73/article/details/112961121
先附上参考的官方文档链接:
https://www.npmjs.com/package/vue-awesome-swiper#custom-swiper-plugin
- npm安装
npm install swiper vue-awesome-swiper --save
- 在vue项目中的main.js中添加:
import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'
//若swiper版本高于6.0.0,需import 'swiper/swiper-bundle.css'方式引入样式;
Vue.use(VueAwesomeSwiper)
- 运用到组件中
<template>
<div class="homepage">
<div class="carousel">
<swiper :options="swiperOption" ref="mySwiper">
<swiper-slide>
<img src="../../statics/banner.png" alt="" class="banner">
</swiper-slide>
<swiper-slide>
<img src="../../statics/banner.png" alt="" class="banner">
</swiper-slide>
<swiper-slide>
<img src="../../statics/banner.png" alt="" class="banner">
</swiper-slide>
<div class="swiper-pagination" slot="pagination"></div>
<div class="swiper-button-prev swiper-button-white" slot="button-prev"></div>
<div class="swiper-button-next swiper-button-white" slot="button-next"></div>
</swiper>
</div>
</div>
</template>
<script>
import {swiper, swiperSlide} from 'vue-awesome-swiper'
export default {
name: 'homepage',
components: {
swiper,
swiperSlide
},
data() {
return {
swiperOption: {
notNextTick: true,
loop: true,
// 初始索引
initalSlide: 0,
// 自动播放
autoplay: true,
// 切换效果
effect: 'effect',
speed: 800,
direction: 'horizontal',
// 左右点击
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev'
},
// 分页器
pagination: {
el: '.swiper-pagination',
clickable: true
},
swiperSlides: [1, 2, 3]
}
}
},
computed: {
swiper() {
return this.$refs.mySwiper.swiper
}
},
methods: {
}
}
</script>
<style lang="stylus" rel="stylesheet/stylus" scoped>
</style>
需要注意的问题:
- 分页器点击小圆点跳转到对应页面不能与设置抓手grabCursor : true同时设置
- vue-awesome-swiper基于组件的开发设置分页器和上一页下一页按钮,采取下列方式定义:
// 左右点击
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
// 分页器设置
pagination: {
el: '.swiper-pagination',
clickable :true
}
- 自动轮播autoplay:true与swiper中方法slideTo(0, 0, false)不能同时设置,自动轮播会失效
具体的swiper设置属性可以参考中文API文档: https://www.swiper.com.cn/api