vue中使用swiper，左右箭头点击没有效果的解决方法

最新推荐文章于 2025-10-26 14:49:05 发布

原创最新推荐文章于 2025-10-26 14:49:05 发布 · 5.6k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#swiper #vue

vue 专栏收录该内容

8 篇文章

订阅专栏

本文介绍了在Vue项目中使用Swiper组件时遇到的点击左右箭头无响应的问题，解决方法是在箭头按钮的HTML标签上绑定点击事件。通过添加此事件，可以确保Swiper的滑动功能正常工作。

swiper作为一个开源的前端组件，主要用来做各种页面切换轮播的效果。在做左右切换效果时，发现点击左右箭头没有效果，原来是需要在左右箭头的页面标签上添加点击事件才行，代码如下，亲测可用

<swiper ref="mySwiper" :options="swiperOptions">
                <swiper-slide><div style="background-color: #5cb85c;height: 100%"><img src="../assets/logo.png" style="height: 100%;width: 100%"></div></swiper-slide>
                <swiper-slide><div style="background-color: #5cb85c;height: 100%"><img src="../assets/logo.png" style="height: 100%;width: 100%"></div></swiper-slide>
                <swiper-slide><div style="background-color: #5cb85c;height: 100%"><img src="../assets/logo.png" style="height: 100%;width: 100%"></div></swiper-slide>
                <swiper-slide><div style="background-color: #5cb85c;height: 100%"><img src="../assets/logo.png" style="height: 100%;width: 100%"></div></swiper-slide>
                <swiper-slide><div style="background-color: #5cb85c;height: 100%"><img src="../assets/logo.png" style="height: 100%;width: 100%"></div></swiper-slide>
                <swiper-slide><div style="background-color: #5cb85c;height: 100%"><img src="../assets/logo.png" style="height: 100%;width: 100%"></div></swiper-slide>
                <!-- Add Pagination -->
                <div class="swiper-pagination" slot="pagination"></div>
              </swiper>
              <!-- Add Arrows -->
              <div class="swiper-button-next" slot="button-next" @click="next"></div>
              <div class="swiper-button-prev" slot="button-prev" @click="prev"></div>


data(){
      return{
        swiperOptions: {
          slidesPerView: 3,
          slidesPerGroup: 3,
          loopFillGroupWithBlank: true,
          pagination: {
            el: '.swiper-pagination',
            clickable: true,
          },
          navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
          },
        },
        
      }
    },

computed:{
      swiper() {
        return this.$refs.mySwiper.$swiper
      }
    },


methods:{
      prev(){
        this.swiper.slidePrev();
      },
      next(){
        this.swiper.slideNext();
      },
}