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();
}