vue 中使用 VueAwesomeSwiper.js 轮播

npm install vue-awesome-swiper                                              //版本 4.1.1

//在main.js中 切记要对应好版本，不然引入的路径可能不一样

import VueAwesomeSwiper from 'vue-awesome-swiper'

import 'swiper/css/swiper.min.css'

Vue.use(VueAwesomeSwiper)

 

 

//template内部

<div>

              <swiper ref="mySwiper" :options="swiperOption">

                <!-- 渲染的图片 -->

                <swiper-slide v-for="(item,index) in items" :key="index">

                  <img width="100%" height="100%" :large="item.parentSrc" preview="index" :src="item.imageSrc" alt="">

                </swiper-slide>

              <!-- 这是轮播的小圆点 -->

              </swiper>

              <div id="prev" slot="button-prev" class="swiper-button-prev" />

              <div id="next" slot="button-next" class="swiper-button-next" />

</div>

 

 

js：//一个页面有多个轮播   就设置多个swiperOption

swiperOption1: {

        autoplay: { disableOnInteraction: false }, // 主要处理点击以后不轮播的bug

        loop: false,

        slidesPerView: 4,

        spaceBetween: 20,

        speed: 800,

        // 用户操作swiper之后，是否禁止autoplay.默认为true：停止。

        autoplayDisableOnInteraction: false,

        // 拖动释放时不会输出信息，阻止click冒泡。拖动Swiper时阻止click事件。

        preventLinksPropagation: true,

        // 设置点击箭头

        navigation: {

          nextEl: '#next',

          prevEl: '#prev'

        }

      },

      swiperOption2: {

        autoplay: { disableOnInteraction: false }, // 主要处理点击以后不轮播的bug

        loop: false,

        delay: 2000,

        slidesPerView: 3,

        spaceBetween: 20,

        speed: 1000,

        // 用户操作swiper之后，是否禁止autoplay.默认为true：停止。

        autoplayDisableOnInteraction: false,

        // 拖动释放时不会输出信息，阻止click冒泡。拖动Swiper时阻止click事件。

        preventLinksPropagation: true,

        // 设置点击箭头

        navigation: {

          nextEl: '#next1',

          prevEl: '#prev1'

        }, on: {

          slideChangeTransitionStart: function() {

            console.log(this.activeIndex)

            // 播放警报

            // if (_this.warningItems[this.activeIndex].new) {

            //   setTimeout(() => {

            //     _this.$refs.playBtn.click()

            //   }, 6000)

            // }

          }

        }

      },