在VUE中使用Swiper轮播图

第一、使用npm下载swiper  npm install vue-awesome-swiper --save

第二、在main.js引用 

main.js
//引入swiper

import VueAwesomeSwiper from 'vue-awesome-swiper'

Vue.use(VueAwesomeSwiper)

使用的时候不知道啥原因css要另外引用才有效果

在vue页面的js中引用 import 'swiper/css/swiper.css'

第三

<template>

    <!-- 轮播图开始 -->

    <div class="swiper">

        <swiper class="swiper1" :options="swiperOption" ref="mySwiper" @someSwiperEvent="callback">

            <!-- 轮播的图片 -->

            <swiper-slide><img src="//img13.360buyimg.com/pop/s1180x940_jfs/t1/192328/16/14271/94154/60f928a1E40e09a97/59fbc670b41fc284.jpg.webp" alt=""></swiper-slide>

            <swiper-slide><img src="//img11.360buyimg.com/pop/s1180x940_jfs/t1/185014/39/6361/56343/60b1fa42Ecccae35f/7e3be6658e144bc3.jpg.webp" alt=""></swiper-slide>

            <swiper-slide><img src="//imgcps.jd.com/ling4/3548676/6Ziy6Zuo6Ziy5rGb5b-F5aSH/54iG5qy-5L2O6IezOS455YWD/p-5bd8253082acdd181d02f9e8/6ec11941/cr/s/q.jpg" alt=""></swiper-slide>

            <!-- 小圆点分页器 -->

            <div class="swiper-pagination"  slot="pagination"></div>

        </swiper>

    </div>

    <!-- 轮播图结束 -->

</template>

<script>

import 'swiper/css/swiper.css'

    export default {

        data() {

            return {

                swiperOption:{

                    loop: true, // 设置图片循环

                    autoplay: true, //设置可自动播放

                    speed: 1000, //自动播放的速度，每隔1秒滑动一次

                    pagination: {

                       el: ".swiper-pagination",//分页器的类名

                       clickable: true //设置分页小圆点可手动点击

                    } 

                }                  

            }            

        }

    }

</script>

<style scoped>

.swiper1{

  height: 600px;

  width: 600px;

  border: 2px solid red;

}

.swiper1 img{

  height: 100%;

  width: 100%;

}

</style>

效果