Vue中使用Swiper插件

一，Vue项目中下载依赖swiper

cnpm install swiper--save-dev

二，在所需的项目中引入Swiper

<script>
import Swiper from "swiper"
new Vue({
	el:"#app"
})
<script>

三，引入Swiper所需的css文件

<style>
    @import url('../assets/itemFile/swiper-3.4.2.min.css');
    //路径按照自己的所在目录
<style>

四，初始轮播图

<template>
//html 页面轮播架构
    <div>
        <div class="swiper-container" id="box">
            <div class='swiper-wrapper'>
                <div class="swiper-slide">
                    <img src="../assets/img/pic_001.jpg" alt="">
                </div>         
                 <div class="swiper-slide">
                    <img src="../assets/img/pic_002.jpg" alt="">
                </div>
                 <div class="swiper-slide">
                    <img src="../assets/img/pic_003.jpg" alt="">
                </div>
            </div>
            <div class='swiper-pagination'></div>
           //<div class="swiper-scrollbar"></div> //滚动条
           //<div class="swiper-button-next"></div> //下一页
           //<div class="swiper-button-prev"></div> //上一页
        </div>
       </div>
</template>
<script>
//引入swiper插件
import Swiper from "swiper"
    export default ({
            name:'home',
            data(){
                return{
                }
            },
            //建议使用mounted生命周期中调用
            mounted() {
                this.initSwiper()
            },
            methods: {
                initSwiper(){
                    var  mySwiper=new Swiper("#box",{
                        direction:'horizontal',
                        loop:true,

             //分页器设置 
				pagination: {
					el: ".swiper-pagination",
					clickable: true,
					type: "bullets"	
				}
                    })
                }
            },
    })
</script>
<style>
    @import url('../assets/itemFile/swiper-3.4.2.min.css');
<style/>

五，Swiper的使用参数

//循环
loop: true,
//设定初始化时slide的索引
initialSlide: 0,
//自动播放
autoplay: {
delay: 1500,
stopOnLastSlide: false,
disableOnInteraction: false
},
//滑动速度
speed: 800,
//滑动方向
direction: "horizontal",
//小手掌抓取滑动
grabCursor: true,

。。。ok