江在川上曰：vue中使用swiper

vue中使用swiper

1 安装

//这是swiper组件
npm install vue-awesome-swiper --save-dev
//这是swiper组件的依赖包
npm install --save swiper

2 全局注册

在main.js中进行全局注册，这样便能在全局使用组件。

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

3 开始使用

<template>
    <div>
        <swiper :options="swiperOption">
            <swiper-slide class="swiper-slide" v-for="(item,index) in images" :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>
    </div>
</template>

<script>
export default {
    data(){
        return{
        	//要进行显示的图片数组
            images:[],
            swiperOption:{
                //显示分页
                pagination: {
                    el: '.swiper-pagination'
                },
                //设置点击箭头
                navigation: {
                    nextEl: '.swiper-button-next', 
                    prevEl: '.swiper-button-prev'
                },
                //自动轮播
                autoplay: {
                    delay: 2000,
                    //当用户滑动图片后继续自动轮播
                    disableOnInteraction: false,
                },
                //开启循环模式
                loop: true
            }

        }
    }
}
</script>

<style>

</style>

最终显示：

其他使用请参考官方文档：https://github.surmon.me/vue-awesome-swiper/

本次学习到此结束。