vue轮播图插件 Vue-Awesome-Swiper

轮播图插件
Vue-Awesome-Swiper
地址:https://github.com/surmon-china/vue-awesome-swiper
安装:npm install vue-awesome-swiper –save
局部引入:
import ‘swiper/dist/css/swiper.css’
import { swiper, swiperSlide } from ‘vue-awesome-swiper’

    export default {
        components: {
                swiper,
                swiperSlide
        }
    }

全局引入:

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

使用方法:

<script>
import 'swiper/dist/css/swiper.css'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
export default {
    data(){
        return {
            //设置属性
            swiperOption:{
                //显示分页
                pagination: {
                    el: '.swiper-pagination',
                    clickable:true
                },
                //切换模式  横屏或者竖屏
                // direction : 'vertical',
                //设置自动播放速度
                autoplay: {
                    disableOnInteraction: false,
                    delay:4000
                },
                //开启无限循环
                loop:true,
                //设置点击箭头
                paginationClickable :true,
                prevButton:'.swiper-button-prev',
                nextButton:'.swiper-button-next',
                //设置同屏显示的数量,默认为1,使用auto是随意的意思。
                slidesPerView:1,
                //开启鼠标滚轮控制Swiper切换。可设置鼠标选项,或true使用默认值。
                mousewheel:true ,
                //默认为false,普通模式:slide滑动时只滑动一格,并自动贴合wrapper,设置为true则变为free模式,slide会根据惯性滑动可能不止一格且不会贴合。
                // freeMode:true
            }
        }
    },
    components:{
        swiper,
        swiperSlide
    }
}  
script>

注意:我使用的vue-awesome-swiper版本是2.5.4的,,通过“npm install [email protected] –save”即可安装,千万记住不要直接”npm install vue-awesome-swiper –save”,不然装了一个高版本,你会发现很多问题.

而我的问题就是左右按钮点击不能滑动

版本换了,所以肯定不能用swiper4以上的那一套API去看,所以我们要降级到swiper3版本的,所以vue-awesome-swiper的分页的配置应该如下:
vue轮播图插件 Vue-Awesome-Swiper_第1张图片

改成下面的分页配置就好了,这样左右按钮就可以点击了.

你可能感兴趣的:(vue相关,轮播图,左右滑动)