swiper左右點擊問題

最近遇到swiper使用在vue項目中的問題。

1、swiper.css引入的問題。

由於互聯網不斷的更新迭代，導致很多的插件版本需要不斷更新才能跟上互聯網時代步伐，不多說。

swiper在5以前的版本中，引用css是的方式是import "swiper/css/swiper.css"。由於現在最新版本是swiper6導致樣式無法出來，網上查過許多，大部分都是5以前的版本引入方式，而swiper6的版本比較新，導致網上的說的比較少。新版本swiper6的引用方式是：import "swiper/swiper-bundle.css"。

2、swiper引用后左右箭頭點擊問題。

關於箭頭問題，版本比較多，就說所我遇見的這個，vue中安裝vue-awesome-swiper后使用左右箭頭的方式，我安裝的是4以上的版本比較新，在之前的使用中有：

　　 <div class="swiper-button-prev" slot="button-prev"></div>

        <div class="swiper-button-next" slot="button-next"></div>

　　swiperOptions: {
        slidesPerView: 2,
        spaceBetween: 50,
        navigation: { // 左右箭頭
          nextEl:'.swiper-button-next',
          prevEl:'.swiper-button-prev'
        }
      }

在swiper中直接使用后，箭頭就可以直接生效。但由於我安裝的版本問題，導致無法使用左右箭頭。

而我安裝的是vue-awesome-swipe（4.1.1）版本，比較新，才導致無法使用，而最新的使用方式是：

//　需要添加click事件使其生效
<div class="swiper-button-prev" slot="button-prev" @click="prevBtn"></div>
<div class="swiper-button-next" slot="button-next" @click="nextBtn"></div>

swiperOptions: {
     slidesPerView: 2,
     spaceBetween: 50,
     navigation: {
     nextEl:'.swiper-button-next',
     prevEl:'.swiper-button-prev'
   }
}

//　添加的click事件
prevBtn() {
  this.$refs.mySwiper.$swiper.slidePrev();
},
nextBtn() {
   this.$refs.mySwiper.$swiper.slideNext();
}