纵有疾风起
人生不言弃

vue swiper插件使用

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>

文章转载于:https://www.jianshu.com/p/5b66e647f211

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

未经允许不得转载:起风网 » vue swiper插件使用

分享到: 生成海报
avatar

评论 抢沙发

评论前必须登录!

立即登录   注册

切换注册

登录

忘记密码 ?

切换登录

注册

我们将发送一封验证邮件至你的邮箱, 请正确填写以完成账号注册和激活