轮播图使用vue-awesome-swiper插件 配置属性

vue-awesome-swiper插件的安装 使用 配置

安装

npm install vue-awesome-swiper
cnpm install vue-awesome-swiper插件

引入

全局引入：

import vue-awesome-swiper from "vue-awesome-swiper"
import "swiper/dist/css/swiper.css"

组件方式引入

import { swiper, swiperSlide } from "vue-awesome-swiper";
 
require("swiper/dist/css/swiper.css");
 
components: {
 
swiper,
 
swiperSlide
 
},

HTML代码

<swiper :options="swiperOption" class="swiper-box" ref="mySwiper" >
	<swiper-slide class="swiper-item" v-for="(item,index) in activityList" :key="index">
    	<img class="slide-image" :src="item.bannerImageUrl" @click="handleBannerClick(item.activityId)">
    </swiper-slide>
    <div class="swiper-pagination" slot="pagination"></div>
</swiper>

配置项

data() {
    return {
      swiperOption: {
      	//是一个组件自有属性，如果notNextTick设置为true，组件则不会通过NextTick来实例化swiper，也就意味着你可以在第一时间获取到swiper对象，假如你需要刚加载遍使用获取swiper对象来做什么事，那么这个属性一定要是true
        notNextTick: true,
        
        autoplay: 6000,//自动播放间隔时间
        
        grabCursor: true,//小手抓取滑动
        
        setWrapperSize: true,
        
        autoHeight: true,
        
        pagination: '.swiper-pagination',
        
        paginationClickable: true,
        
        mousewheelControl: true,
        
        observeParents: true,
        
        autoplayDisableOnInteraction: false  //手动轮播后是否使自动轮播失效
        
        loop:true,//循环播放
        
        speed:800,//滑动速度
        
        direction:"horizontal",//滑动方向
        
		//分页器设置 可以这样写，也可以写成paginationClickable: true,
		 
		pagination: {
		 
		el: ".swiper-pagination",
		 
		clickable: true,
		 
		type: "bullets"
      },
    }