Erstellen Sie mit Vue.js benutzerdefinierte Schaltflächen für die Foliennavigation in Swiper

Question

Ich muss die Standardnavigation (nextEl, prevEl) entfernen und dafür sorgen, dass die Schaltfläche mit dem Text „Next Slide Button“ zur nächsten Folie scrollt

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

Wie kann ich das machen? Ich werde für Ihre Hilfe sehr dankbar sein

Answer 1

这应该可以做到，您需要做的就是导入 useSwiper 并将其分配给 const 变量，然后在 div 元素中将其用作 swiper.slideNext()

如果您不想使用 swiper 自己的元素，请删除 navigation 模块。

这是更清晰的文档来源

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