Vue 2 使用 swiper

之前在vue2項目中要用到輪播的功能，用swiper插件實現遇到了一些坑。
先上結果，運行安裝命令：

npm i swiper@5.x vue-awesome-swiper -s

 

 

在main.js文件中加上

import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/css/swiper.css'
Vue.use(VueAwesomeSwiper)

 

 

 

輪播代碼（樣式需自己調整）：

// template
<swiper
      :options="swiperOption"
      @swiper="onSwiper"
      @slideChange="onSlideChange"
>
        <swiper-slide>123</swiper-slide>
        <swiper-slide>456</swiper-slide>
        <swiper-slide>789</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>

// js
<script>
export default {
  data () {
    return {
      swiperOption: {
        slidesPerView: 2,
        // 設置分頁器
        pagination: {
          el: '.swiper-pagination',
          // 設置點擊可切換
          clickable: true
        },
        // 設置前進后退按鈕
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev'
        },
        // 設置自動輪播
        autoplay: {
          delay: 5000 // 5秒切換一次
        },
        // 設置輪播可循環
        loop: true
      }
    }
  },
  methods: {
    onSwiper () {

    },
    onSlideChange () {

    }
  }
}
</script>

 

 

遇到的一些坑：

默認安裝swiper的話，會安裝到最新的版本6，最新版本好像是用在vue3上的，vue2用不了
安裝后要引入swiper的css，最新版本的是

 

import 'swiper/swiper-bundle.css'

 

vue2的swiper5的引入是

import 'swiper/css/swiper.css'

 

作者：相維變
鏈接：https://www.jianshu.com/p/d2c4393dbea0
來源：簡書
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。