vue-awesome-swiperでnext、prevボタンが動作しない

Question

前提・実現したいこと

Nuxt.jsでvue-awesome-swiperを使用し、スライダーを作成しており、
スワイプなど手動でスライドすることはできたのですが、next、prevボタンでスライド出来ずお力をお貸しいただきたく質問いたしました。
コンソールでエラーなどは発生していません。

該当のソースコード

• "nuxt": "^2.0.0"
• "swiper": "^6.0.1"
• "vue-awesome-swiper": "^4.1.1"

<template>
  <div>
    <swiper ref="mySwiper" :options="swiperOption">
      <swiper-slide
        v-for="item in sliderData"
        :key="item.id"
      >
        <nuxt-link to="/">
          <img :src="item.imgUrl" alt="" />
          <p>{{ item.title }}</p>
        </nuxt-link>
      </swiper-slide>
      <div class="swiper-button-next"></div>
      <div class="swiper-button-prev"></div>
    </swiper>
  </div>
</template>

<script>
export default {
  props: ["sliderData"],
  data() {
    return {
      swiperOption: {
        slidesPerView: 1,
        loop: false,
        spaceBetween: 16,
        breakpoints: {
          480: {
            slidesPerView: 2
          }
        },
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev"
        }
      }
    };
  }
};
</script>

plugins/vue-awesome-swiper.js

import Vue from "vue";
import VueAwesomeSwiper from "vue-awesome-swiper";

import "swiper/swiper-bundle.css";
Vue.use(VueAwesomeSwiper);

試したこと

https://www.npmjs.com/package/vue-awesome-swiper#directive
こちらにある、Directiveの書き方でも試しましたが、上記同様、スライドはできるが、next、prevボタンが反応しませんでした。

Answer 1

同じ状況になりました。
Swiper5系に変えたところ上手く行きました。

6系はまだまだ不安定なのでしょうか。

5系と6系のCSSファイルのパスが変わるみたいなので、お気をつけください。

https://github.com/surmon-china/vue-awesome-swiper

Comments

[torihiro]

ご回答ありがとうございます。
その後ですが、vue-carouselに変更し実装しました。

遅くなりましたが先程、Swiper5系に落として試したところ、こちらでも無事動くことができました。
CSSのパスが変わっていることなど細かくお教え頂きありがとうございます！