vue vue-awesome-swiper 轮播

这里实现的是swiper效果：异形的slide

vue-awesome-swiper是基于swiper的，安装不同版本的vue-awesome-swiper对应不同的swiper
当前安装的版本是

"vue-awesome-swiper": "^4.1.0",
"swiper": "^3.4.2",

1、安装命令：

npm install swiper
npm install vue-awesome-swiper --save

2、在main.js中全局引入组件和css

image.png

import VueAwesomeSwiper from 'vue-awesome-swiper'
import '../node_modules/swiper/dist/css/swiper.css'
Vue.use(VueAwesomeSwiper)

3、开始使用

需要注意的是当设置无限循环播放时，由于duplicate，无法用@click直接给dom元素绑定事件，需要通过swiper 的options元素 的onClick

html

   <!-- 轮播 -->
    <div class="swiperCon">
      <swiper ref="mySwiper" :options="swiperOption" class="mySwiper">
        <swiper-slide v-for="(item,index) in bannerList" :key="index">
          <img class="swiper-slide" :src="item.img_url">
        </swiper-slide>
      </swiper>
    </div>

js

   bannerList: [
        { img_url: require('../../assets/images/home_fengxian.png'), path: '/query' },
        { img_url: require('../../assets/images/home_tijian.png'), path: '/lawyerList', type: 'health' },
        { img_url: require('../../assets/images/home_lawyer.png'), path: '/lawyerList', type: 'consult' },
        { img_url: require('../../assets/images/home_shencha.png'), path: '/lawyerList', type: 'review' },
        { img_url: require('../../assets/images/home_qianyue.png'), path: '/contractList' }
      ],
      swiperOption: {
        slidesPerView: 4, // 可见图片张数
        centeredSlides: true, // 默认选中中间一张
        loop: true, // 无限循环
        autoplay: 4000, // 自动播放时间间隔
        onClick: () => { // 事件
          const swiper = this.$refs.mySwiper.$swiper
          const i = swiper.realIndex
          this.$router.push({ path: this.bannerList[i].path, query: { type: this.bannerList[i].type }})
        }
      },

css

.swiper-slide{
  transition: 1s;
  transform: scale(0.85);
}
.swiper-slide-active,.swiper-slide-duplicate-active { // swriper自带的类名（选中时的样式）
  transform: scale(1.1);
}

image.png