swiper不能自动播放，不能成功导入。一步步详细写法

参考自  https://blog.csdn.net/u012570307/article/details/107203851/

swiper的功能不正常或者报错，一般是由于引用swiper文件错误、使用的代码不完整。

1、检查package.json里的swiper和vue-awsome-swiper版本（在vue里面要用这个而不是swiper）。

swiper主要用样式，vue-awsome-swiper主要用swiper, swiperSlide。

（因为最新版本为6，新版本不太一样，所以我选择用旧版本3）

2、引用，注意有的版本是“Swiper”和“SwiperSlide"，在引用和组件component处使用需要保证正确。

import { swiper, swiperSlide } from "vue-awesome-swiper";
import "swiper/swiper-bundle.css";

对应css的引用，swiper为6的路径是"swiper/swiper-bundle.css"，低版本的是dist下面的，总之找到正确的路径和文件名。

3、组件声明使用。如果你需要自定义指令对象可以用directive，略。

components: {
  swiper,
  swiperSlide,
}

4、css选项，涵盖轮播图片，分页器。

<swiper ref="mySwiper" v-bind:options="swiperOptions">
    <swiper-slide v-for="(item,index) in slideList" v-bind:key="index">
        <a v-bind:href="'/#/product/'+item.id">
           <img v-bind:src="item.img" />
         </a>
     </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>
</swiper>
   

5、data中写swiperOptions（名字自己定义，有的人用”swiperOption“，对应即可）

      swiperOptions: {
        loop: true,
        autoplay: {
          delay: 3000,
          stopOnLastSlide: false,
          disableOnInteraction: false,
        },
        // 显示分页
        pagination: {
          el: ".swiper-pagination",
          clickable: true, //允许分页点击跳转
        },
        // 设置点击箭头
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
      },

6、计算属性，对应到css的”mySwiper“。

  computed: {
    swiper() {
      return this.$refs.mySwiper.$swiper;
    },
  },

7、css的style，可以自己写，这里截取自学习的项目。也可以参考链接中的内容。

    .swiper-container {
      height: 451px;
      .swiper-button-prev {
        left: 274px;
      }
      img {
        width: 100%;
        height: 100%;
      }
    }

8、学习项目的截图（终于终于写对swiper的代码了），风景图用于打码，左右按钮分别是swiper-button-prev,swiper-button-next，下方的五个点是指示器swiper-pagination，默认居中，数量由图片决定。这里是项目部分截图，所以没有在中间。