使用vue-awesome-swiper轮播插件总结

Posted 2020-12-18 usergao

  如果能看懂swiper官网文档，请忽略此篇文章。

  遇到的问题：

  主要是版本的问题，不同版本的swiper文件不同，导致总是引用不成功。按照我的版本来，肯定畅通无阻。实现后再尝试看官网文档，使用最新的版本。

  1.首先下载swiper和vue-awesome-swipe。

     下载我指定的版本，否则可能会打包错误。

npm install swiper@3.4.2 --save-dev  //下载swiper

npm install vue-awesome-swiper@3.1.3 --save-dev //下载vue-awesome-swiper

 

　2.在vue项目main.js中引用

     也可以将样式存在自己的文件目录下引入，这样可以直接更改轮播图的样式。

import VueAwesomeSwiper from ‘vue-awesome-swiper‘  
import ‘swiper/dist/css/swiper.css‘  //引入swiper样式，不同版本路径不一样.
Vue.use(VueAwesomeSwiper, /* { default options with global component } */)

 

　3.在要显示的页面写入模板代码，有详细注释，耐心看完。

<template>
  <div style="width: 65%;margin: 0 auto;" @mouseenter="on_bot_enter" @mouseleave="on_bot_leave">
    <swiper :options="swiperOption" ref="mySwiper">
      <swiper-slide>1</swiper-slide>
      <swiper-slide>2</swiper-slide> //这里插入图片
      <swiper-slide>3</swiper-slide>
      <swiper-slide>4</swiper-slide>
      <swiper-slide>5</swiper-slide>
      <swiper-slide>6</swiper-slide>
    </swiper>
    <!--以下看需要添加-->
    <!-- <div class="swiper-scrollbar"></div> //滚动条
    <div class="swiper-button-next"></div> //下一项
    <div class="swiper-button-prev"></div> //上一项 -->
    <div class="swiper-pagination" style="left: 50%;"></div> //这是选择器
  </div>
</template>

<script>
  export default {
    data() {
      return {
        swiperOption: {//swiper3
          autoplay: 3000,
          speed: 1000,
          pagination: {
            el: ‘.swiper-pagination‘,
            clickable: true
          },  //选择器配置
          autoplay: {
            delay: 5000, //延迟5秒自动播放
            stopOnLastSlide: false, //到最后一张图片是否停止自动播放。
            disableOnInteraction: false  //用户操作后是否停止自动播放。
          },
        }
      }
    },
    methods: {
      //通过获得的swiper对象来暂停自动播放
      on_bot_enter() { //鼠标移入停止自动播放
        this.mySwiper.autoplay.stop()
      },
      on_bot_leave() {//鼠标移出停止自动播放
        this.mySwiper.autoplay.start()
      },
    },
    //计算属性，获得可以操作的swiper对象
    computed: {
      mySwiper() {
        // mySwiper 是要绑定到标签中的ref属性
        return this.$refs.mySwiper.swiper
      },
    },
  }
</script>

<style>

</style>