Vue脚手架引入Swiper最新实操步骤:
//npm
npm install vue-awesome-swiper --save
//可以全局 or 局部引用
全局:
//main.js
import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'
import './swiper4/swiper.css' //这个css要去官网下载然后放进项目引入
Vue.use(VueAwesomeSwiper)
局部:
// *.vue
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import './swiper4/swiper.css'
// <script>
components: {
swiper,
swiperSlide
}
使用
<template>
<div id="app">
<swiper :options="swiperOption" ref="mySwiper">
<swiper-slide><div class="jia">jia1</div></swiper-slide>
<swiper-slide><div class="jia">jia1</div></swiper-slide>
<swiper-slide><div class="jia">jia1</div></swiper-slide>
<swiper-slide><div class="jia">jia1</div></swiper-slide>
<swiper-slide><div class="jia">jia1</div></swiper-slide>
<swiper-slide><div class="jia">jia1</div></swiper-slide>
<swiper-slide><div class="jia">jia1</div></swiper-slide>
<div class="swiper-pagination" slot="pagination"></div>
<div class="swiper-button-prev" slot="button-prev"></div>
<div class="swiper-button-next" slot="button-next"></div>
<div class="swiper-scrollbar" slot="scrollbar"></div>
</swiper>
</div>
</template>
js and css
<script>
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import './swiper4/swiper.css'
export default {
name: 'carrousel',
data() {
return {
swiperOption: {
notNextTick: true, // notNextTick是一个组件自有属性，如果notNextTick设置为true，组件则不会通过NextTick来实例化swiper，也就意味着你可以在第一时间获取到swiper对象，假如你需要刚加载遍使用获取swiper对象来做什么事，那么这个属性一定要是true
autoplay: true,
autoplay: {
disableOnInteraction: false, //用户左划右划后恢复自动轮播
delay: 1000
},
loop: true,
direction: 'horizontal',
grabCursor: true,
setWrapperSize: true,
autoHeight: true,
pagination: {
el: '.swiper-pagination'
},
centeredSlides: true,
paginationClickable: true,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev'
},
keyboard: true,
mousewheelControl: true,
observeParents: true, // 如果自行设计了插件，那么插件的一些配置相关参数，也应该出现在这个对象中，如下debugger
debugger: true
}
}
},computed: {
swiper() {
return this.$refs.mySwiper.swiper
}
},
mounted() {
// current swiper instance
// 然后你就可以使用当前上下文内的swiper对象去做你想做的事了
// this.swiper.slideTo(3, 1000, false)
},
components: {
swiper, swiperSlide
}
}
</script>
<style>
.jia {
height: 300px;
line-height: 300px;
font-size: 30px;
color: #fff;
background: red;
text-align: center;
}
</style>
提示
新版的VueAwesomeSwiper是从Swiper4改写的,
api写法有变化,老版本的写法会引起组件失效
比如autoplay,pagination,prevButton,nextButton等属性
在新版的api文档中新增了组件选项,使用新写法就可以正常使用了
查看新版api文档
点个赞就成功啦哈!
