Créez des boutons personnalisés pour la navigation dans les diapositives dans Swiper à l'aide de Vue.js

Question

Je dois supprimer la navigation par défaut (nextEl, prevEl) et faire défiler le bouton avec le texte "Next Slide Button" jusqu'à la diapositive suivante

<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>

Comment puis-je faire cela ? Je serai très reconnaissant pour votre aide

Answer 1

Cela devrait faire l'affaire, il vous suffit d'importer useSwiper 并将其分配给 const 变量，然后在 div 元素中将其用作 swiper.slideNext()

Si vous ne souhaitez pas utiliser swiper sur vos propres éléments, supprimez le module navigation.

C'est une source de documentation plus claire

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