Vue.js中如何在Swiper中自定义幻灯片切换按钮？

1. 移除默认导航配置与模块 #

先清理掉Swiper默认导航相关的配置和模块：

• 删除Swiper标签上的navigation="navigation"和:navigation="{ nextEl: '.nextArrow'}"
• 从modules数组中移除Navigation（不需要默认导航模块了）

2. 保存Swiper实例 #

在setup中用ref存储Swiper实例，后续调用切换方法需要用到它：

• 导入Vue的ref方法
• 创建swiperRef变量，在onSwiper回调里把swiper实例赋值给它

3. 给自定义按钮绑定切换事件 #

给你的next-button按钮添加点击事件，调用Swiper实例的slideNext()方法实现切换

修改后的完整代码 #

<swiper class="news-slider" :slides-per-view="1" :modules="[Pagination, A11y, Lazy]" :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" @click="swiperRef?.slideNext()">
              <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>
import { ref } from 'vue';
import { Swiper, SwiperSlide } from 'swiper/vue';
import { Pagination, A11y, Lazy } from 'swiper/modules';

export default {
  components: {
    Swiper,
    SwiperSlide,
  },
  setup() {
    // 用ref存储swiper实例
    const swiperRef = ref(null);
    
    const onSwiper = (swiper) => {
      swiperRef.value = swiper;
    };
    
    const onSlideChange = () => {
      console.log('slide change');
    };
    
    return {
      swiperRef,
      onSwiper,
      onSlideChange,
      modules: [Pagination, A11y, Lazy],
    };
  },
};
</script>

额外提示 #

• 你原来的:sliderd-per-view是拼写错误，已修正为:slides-per-view="1"，避免配置失效
• 使用swiperRef?.slideNext()的可选链操作符，防止组件初始化阶段swiper实例未创建导致报错

内容的提问来源于stack exchange，提问作者Andrii Frighes