Buat butang tersuai untuk navigasi slaid dalam Swiper menggunakan Vue.js

Question

Saya perlu mengalih keluar navigasi lalai (nextEl, prevEl) dan membuat butang dengan teks "Butang Slaid Seterusnya" tatal ke slaid seterusnya

<swiper class="news-slider" :sliderd-per-view="1" :modules="[Navigation, Pagination, A11y, Lazy]" navigation="navigation" :navigation="{ nextEl: '.nextArrow'}" :pagination="{ clickable: true, dynamicBullets: true, dynamicMainBullets: 5 }" preload-images="false" lazy="lazy"> 
  <swiperSlide class="swiper-slide" v-for="n in 10" :key="n">
    <div class="news-container"> 
      <div class="news"><img class="news__image swiper-lazy" src="@/assets/img/lookism-transformed-transformed.png" alt=""/>
        <div class="swiper-lazy-preloader"></div>
        <div class="news__info">
          <div class="news__title">title</div>
          <div class="news__description">description</div>
          <div class="news__buttons">
            <button class="normal-button news-button">more</button>
            <button class="next-button"><span class="next-button__text">NEXT SLIDE BUTTON</span><img class="next-button__icon" src="@/assets/img/arrow-right.svg" alt=""/></button>
          </div>
        </div>
      </div>
    </div>
  </swiperSlide>
</swiper>

<script>
  export default {
    components: {
      Swiper,
      SwiperSlide,
    },
    setup() {
      const onSwiper = (swiper) => {
        console.log(swiper);
        
      };
      const onSlideChange = () => {
        console.log('slide change');
      };
      return {
        onSwiper,
        onSlideChange,
        modules: [Navigation, Pagination, Scrollbar, A11y],
      };
    },
  };
</script>

Bagaimana saya boleh melakukan ini? Saya akan sangat berterima kasih atas bantuan anda

Answer 1

Ini sepatutnya berjaya, anda hanya perlu mengimport useSwiper 并将其分配给 const 变量，然后在 div 元素中将其用作 swiper.slideNext()

Jika anda tidak mahu menggunakan swiper pada elemen anda sendiri, alih keluar modul navigation.

Ini adalah sumber dokumentasi yang lebih jelas

https://swiperjs.com/vue#use-swiper