vue2+swiper基本使用

1.安装

Vue 使用 Swiper 需要安装 Swiper 和 vue-awesome-swiper 两个插件。

安装的时候一定要注意版本号 !

其中 Swiper 安装版本 5 ，注意我们这里使用的是版本5，因为6及一上是为vue3服务的。

npm i swiper@5.2.0

vue-awesome-swiper 安装 4.1.1 版本，不要安装 3.1.3 版本。

npm install vue-awesome-swiper@4.1.1 --save

2.引包

在main.js中引入swiper的样式，为什么在main.js中引入呢，因为在这里引入你只需要引入一次就可以了，全局都可以使用了，避免其他组件用一次就需要引入一次太麻烦了。

main.js全局引入

import Vue from 'vue'
// swiper版本5
import css from 'swiper/css/swiper.min.css'
import VueAwesomeSwiper from 'vue-awesome-swiper'
// 第二个参数可配置默认选项
export default () => {
  Vue.use(VueAwesomeSwiper, {
    css
  })
}

3.使用

              <swiper ref="refSwiper"
                      :options="swiperOption"
                      class="content-swiper">
                <swiper-slide v-for="(i,inde) in dataList.imgUrl"
                              :key="inde"
                              class="item">
                  <img :src="i"
                       :alt="i"
                       width="100%">
                </swiper-slide>
              </swiper>
              <!-- 如果需要分页器 -->
              <div class="swiper-pagination"></div>
 
              <!-- 如果需要导航按钮 -->
              <div class="swiper-button-prev swiper-btn"
                   slot="button-prev"></div>
              <div class="swiper-button-next swiper-btn"
                   slot="button-next"></div>
<script>
export default {
  data() {
    return {
      swiperOption: {
        // 设置垂直轮播vertical,  水平轮播 horizontal
        direction: "horizontal", 
        // 轮播图间距
        spaceBetween: 30,
        // 循环模式选项
        loop: true,
        //  自动滑动
        autoplay: {
          delay: 2500,
          // 如果设置为true，当切换到最后一个slide时停止自动切换。
          stopOnLastSlide: false,
          // 如果设置为false，用户操作swiper之后自动切换不会停止，每次都会重新启动autoplay
          disableOnInteraction: false,
        },
        // 分页器
        pagination: {
          el: ".swiper-pagination",
          clickable: true, // 设置小圆点可以切换
        },
        // 轮播图的切换前进后退按钮，如果想放在轮播图中可以看swiper官方文档，这里写在了轮播外
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
        // 如果需要滚动条
        // scrollbar: {
        //    el: '.swiper-scrollbar',
        // },
      },
    }
  }
}
</script>

以上代码只是示例，根据项目需求进行修改。

在线示例

https://github.surmon.me/vue-awesome-swiper/