關於swiper外掛在vue2的使用

語言: CN / TW / HK

最近做專案用到了vue-awesome-swiper,總結一下使用方法

第一步:安裝依賴

npm install swiper vue-awesome-swiper --save

or npm install swiper [email protected] --save

第二步:引入元件

import { swiper, swiperSlide } from "vue-awesome-swiper";

import "swiper/dist/css/swiper.css";

export default {

components: {

swiper,

swiperSlide,

},

第三步:建立容器:

第四步:建立配置物件

swiperOption: {

effect: "coverflow",

grabCursor: true,

centeredSlides: true,

slidesPerView: "auto",

coverflowEffect: {

rotate: 0,

stretch: -80, // slide左右距離

depth: 400, // slide前後距離

modifier: 0.5, //

slideShadows: false, // 滑塊遮罩層

},

loop: true,

on: {

click: function () {

// 監聽點選滑塊事件// this.realIndex是當前swpier 例項的物件屬性

// console.log(this.realIndex); // 當前滑塊索引

},

slideChange: function () {

console.log(this.realIndex);

},

}, //on配置物件用來繫結swipet事件的回撥

},

這裡主要swiper的一些監聽事件可以在on配置物件中繫結,此時的this是swiper本身

也可以通過下圖的方式繫結:

這種方式繫結如果想獲取到swiper物件,需要通過繫結ref然後通過:

this.$refs.myswiper.swiper來獲取

注意:this.$refs.myswiper.swiper.realIndex就是當前被啟用滑塊的索引值。可以通過this.slides[realIndex]來獲取當前滑塊的內容