国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

Erstellen Sie mit Vue.js benutzerdefinierte Schaltfl?chen für die Foliennavigation in Swiper
P粉035600555
P粉035600555 2023-11-02 14:42:51
0
1
1119

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

P粉035600555
P粉035600555

Antworte allen(1)
P粉294954447

這應(yīng)該可以做到,您需要做的就是導(dǎo)入 useSwiper 并將其分配給 const 變量,然后在 div 元素中將其用作 swiper.slideNext()

如果您不想使用 swiper 自己的元素,請(qǐng)刪除 navigation 模塊。

這是更清晰的文檔來(lái)源

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

Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage