Maison  >  Questions et réponses  >  le corps du texte

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

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

P粉035600555P粉035600555373 Il y a quelques jours689

répondre à tous(1)je répondrai

  • P粉294954447

    P粉2949544472023-11-03 11:27:25

    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

    répondre
    0
  • Annulerrépondre