vue使用swiper踩坑（轮播图不自动播放，上一张下一张按钮不起作用）

最新推荐文章于 2024-12-08 19:20:10 发布

芋泥酱XD

最新推荐文章于 2024-12-08 19:20:10 发布

阅读量2.4k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：前端学习文章标签： vue javascript js npm

本文链接：https://blog.youkuaiyun.com/qq_36070003/article/details/117364446

在Vue项目中，作者遇到了使用swiper实现轮播图时自动播放和按钮控制失效的问题。尝试将`new Swiper()`放入`mounted`生命周期钩子以及使用`vue-awesome-swiper`插件均未解决问题。最终，通过回退到`vue-awesome-swiper`的3.1.3版本并调整API，成功解决了轮播图的自动播放和按钮功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

为了不浪费大家时间，先说一下，最后解决办法是使用vue-awesome-swiper，并且要注意版本号及其对应的API，本文中的API写法和3.1.3版本的vue-awesome-swiper是对应的，可以实现轮播图自动播放以及前一张后一张按钮不失效。

一个心路历程

准备使用swiper实现轮播图

根据Swiper API官网：

首先，安装依赖包

$ npm install swiper

导包及使用

// import Swiper JS
  import Swiper from 'swiper';
  // import Swiper styles
  import 'swiper/swiper-bundle.css';

  const swiper = new Swiper('.swiper-container', {
   
   
  // Optional parameters
  direction: 'vertical',
  loop: true,

  // If we need pagination
  pagination: {
   
   
    el: '.swiper-pagination',
  },

  // Navigation arrows
  navigation: {
   
   
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },

  // And if we need scrollbar
  scrollbar: {
   
   
    el: '.swiper-scrollbar',
  },
});

<!-- Slider main container -->
<div class="swiper-container">
  <!-- Additional required wrapper -->
  <div class="swiper-wrapper">
    <!-- Slides -->
    <div