使用 Vue.js 在 Swiper 中创建用于幻灯片导航的自定义按钮
P粉035600555
P粉035600555 2023-11-02 14:42:51
0
1
702

我需要删除默认导航(nextEl、prevEl)并使带有“下一张幻灯片按钮”文本的按钮滚动到下一张幻灯片

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

我怎样才能做到这一点?我将非常感谢您的帮助

P粉035600555
P粉035600555

全部回复(1)
P粉294954447

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

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

这是更清晰的文档来源

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

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板