点击左右箭头无效，也无法通过on:slideChange监听到滑动事件

[WangZhen-Ddm]

用的以下的是官方代码，版本4.1.1和5.1.1都试过了。

请问如何解决这个问题，是版本不对还是怎么样？

[Rain20199]

"vue-awesome-swiper": "^4.1.0", "swiper": "^5.3.6", 用这两个没问题

[buuing]

我这边用了低版本的可以

• 先npm安转

+ npm i [email protected] [email protected]

• 然后重启输入下面的代码

<template>
  <swiper ref="mySwiper" :options="swiperOption">
    <swiper-slide>I'm Slide 1</swiper-slide>
    <swiper-slide>I'm Slide 2</swiper-slide>
    <swiper-slide>I'm Slide 3</swiper-slide>
    <div slot="button-prev" class="swiper-button-prev"></div>
    <div slot="button-next" class="swiper-button-next"></div>
  </swiper>
</template>

<script>
import { swiper, swiperSlide } from "vue-awesome-swiper";
import "swiper/dist/css/swiper.css";
export default {
  components: {
    swiper,
    swiperSlide
  },
  data() {
    return {
      swiperOption: {
        loop: true,
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev"
        }
      }
    };
  }
};
</script>

<style scoped>
.swiper-container {
  width: 100%;
  height: auto;
  padding:90px 0;
  margin-top: 10px;
  margin-left: auto;
  margin-right: auto;
}
.swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;
  height: auto;
  /* Center slide text vertically */
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  transition-property:all;
}
</style>

[xuhaichaoy]

"vue-awesome-swiper": "^4.1.0", "swiper": "^5.3.6", 用这两个没问题

我用了这两个版本 事件都监听不到