vue2.x集成 swiper轮播图详细教程

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/haeasringnar/article/details/82783043

1、安装 vue-awesome-swiper

npm install vue-awesome-swiper --save

2、使用 vue-awesome-swiper

html代码部分

<template>
	<swiper :options="swiperOption" ref="mySwiper">
		<!-- slides -->
		<swiper-slide>I'm Slide 1</swiper-slide>
		<swiper-slide>I'm Slide 2</swiper-slide>
		<swiper-slide>I'm Slide 3</swiper-slide>
		<swiper-slide>I'm Slide 4</swiper-slide>
		<swiper-slide>I'm Slide 5</swiper-slide>
		<swiper-slide>I'm Slide 6</swiper-slide>
		<swiper-slide>I'm Slide 7</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>
		<!-- 滚动条，建议不加 -->
		<!-- <div class="swiper-scrollbar"   slot="scrollbar"></div> -->
	</swiper>
</template>

script代码

<script>
    import Vue from 'vue'
    import VueAwesomeSwiper from 'vue-awesome-swiper'
    import 'swiper/dist/css/swiper.css'
    Vue.use(VueAwesomeSwiper)
    export default {
        name: "pm_xiaozuhuping",
        data () {
            return {
                swiperOption: {
                    // some swiper options/callbacks
                    // 所有的参数同 swiper 官方 api 参数
                    // 设置分页器
                    pagination: {
                        el: '.swiper-pagination',
                        // 设置点击可切换
                        clickable :true
                    },
                    // 设置前进后退按钮
                    navigation: {
                        nextEl: '.swiper-button-next',
                        prevEl: '.swiper-button-prev',
                    },
                    // 设置自动轮播
                    autoplay: true,
                    // 设置轮播可循环
                    loop : true
                }
            }
        }
</script>