### 1、安装swiper
`npm install swiper@3.4.1 --save-dev`

### 2、swiper的使用demo
```
<template>
<div id="app">
    <swiper :options="swiperOption" ref="mySwiper">
		
		<swiper-slide v-for="item in banner"><img v-bind:src="item.src"></swiper-slide>
		
		<div class="swiper-pagination"  slot="pagination"></div>
	</swiper>
</div>
</template>

export default {
    name: "pm_xiaozuhuping",
    data () {
        return {
            banner: [
                { src: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1541054134544&di=4caccf426755a07dc9353820d5e68157&imgtype=0&src=http%3A%2F%2Fpic19.nipic.com%2F20120210%2F7827303_221233267358_2.jpg' },
                { src: 'https://timgsa.baidu.com/timg?image&quality=80&size=b10000_10000&sec=1541044554&di=63e04414a37e41b7aab33aeedc469324&src=http://pic32.nipic.com/20130810/6484447_084032029372_2.jpg' }
            ],
            swiperOption: {
                // some swiper options/callbacks
                // 所有的参数同 swiper 官方 api 参数
                // 设置分页器
                pagination: {
                    el: '.swiper-pagination',
                    // 设置点击可切换
                    clickable :true
                },
                // 设置自动轮播
                autoplay: true,
                // 设置轮播可循环
                loop : true
            }
        }
    }
}
</script>
```

### 3、swiper文档参考
[https://3.swiper.com.cn/api/index.html](https://blog.junphp.com "https://3.swiper.com.cn/api/index.html")

已有0条评论

添加新评论☺

如果认为本文对您有所帮助请赞助本站

支付宝扫一扫赞助

已有0条评论

添加新评论☺