【转载】web前端学习分享-如何在vue中引入swiper及自动播放功能不能实现的问题

• 原文链接：bbs.huaweicloud.com/blogs/19797…

【摘要】 虽然swiper官方网站中的使用文档中有关于vue如何引入swiper的描述，但是在初次接触的过程中还是碰到了一些问题，本文将这个过程做个分享记录，如果大家也碰到和我一样的问题，可作为参考。

虽然swiper官方网站中的使用文档中有关于vue如何引入swiper的描述，但是在初次接触的过程中还是碰到了一些问题，本文将这个过程做个分享记录，如果大家也碰到和我一样的问题，可作为参考。

一、安装swiper、vue-awesome-swiper

npm install swiper vue-awesome-swiper --save

查看package.json文件安装的版本号

二、创建MySwiper.vue组件

第一、二步：在组件中引入js、css文件

  import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
  import 'swiper/swiper-bundle.css'
复制代码

此处注意需要结合自己下载的swiper的版本号按正确的路径和文件名引入css文件，不同版本有差异，不可照搬

第三步：在export default{}中配置参数

先注册组件Swiper和SwiperSlide

 components: {
    Swiper,
    SwiperSlide
  },
复制代码

在data(){}中配置参数swiperOption

data () {
    return {
      swiperOption: {
        loop: true, // 循环模式选项
        autoplay: {
          delay: 1000, // 自动切换的时间间隔，单位ms
          stopOnLastSlide: false, // 当切换到最后一个slide时停止自动切换
          disableOnInteraction: false // 用户操作swiper之后，是否禁止autoplay。
        },
        // 如果需要分页器
        pagination: {
          el: '.swiper-pagination'
        },
        observer: true,
        observeParents: true,
        observeSlideChildren: true
      }
    }
  },
复制代码

此处参数不做说明，官方文档中有详细描述，此处实现自动播放功能autoplay 、鼠标拖拽图片功能

第四步：在组件中的template中进行布局

<swiper class="swiper banner" :options="swiperOption">
    <swiper-slide v-for="value in banners" :key="value.bannerId" class="item">
        <a :href="https://juejin.cn/post/value.url">
            <img :src="https://juejin.cn/post/value.pic" >
        </a>
    </swiper-slide>

    <div class="swiper-pagination" slot="pagination"></div>
  </swiper>
复制代码

src属性中可填入需要展示的图片

第五步：对需要展示的轮播图进行样式设置

这个可根据需要自定义，此处需要说明的是，如果对pagination小圆点在激活状态时的样式进行设置的话，可通过以下属性设置，如

(由于我没有采用这个样式，所以直接照搬了图片）

问题点

如果你采用的是swiper6，此时会发现但是pagination小圆点不显示，也不自动播放，此时需要在原来基础上添加以下代码

import Swiper2, { Navigation, Pagination, Autoplay } from 'swiper'
Swiper2.use([Navigation, Pagination, Autoplay])
复制代码

此时swipere便可以正常工作了。