vue-awesome-swiper的使用

1、安装

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

2、在vue中引入

    进入maim.js文件    import vueSwiper from 'vue-awesome-swiper'    import 'swiper/dist/css/swiper.css'        Vue.use(vueSwiper)

3、进入轮播图组件中

<template>    <swiper :options="swiperOption">            <swiper-slide class="swiper-slide" v-for="(item,index) in carouselArr" :key="index">                <img :src="item"/>            </swiper-slide>            <!-- 分页器 -->            <div class="swiper-pagination"  slot="pagination"></div>                <!-- 左右箭头 -->             <div class="swiper-button-prev" slot="button-prev"></div>             <div class="swiper-button-next" slot="button-next"></div>         </swiper></template><script>    export default {        data(){            return {                swiperOption:{                    //显示分页                    pagination: {                      el: '.swiper-pagination'                    },                    //设置点击箭头                    navigation: {                      nextEl: '.swiper-button-next',                       prevEl: '.swiper-button-prev'                    },                    //自动轮播                    autoplay: {                      delay: 2000,                      //当用户滑动图片后继续自动轮播                      disableOnInteraction: false,                    },                    //开启循环模式                    loop: true                }            }        }    }</script>

原著是一个有趣的人,若有侵权,请通知删除