vue2.0 使用 swiper 实现PC端卡片左右虚拟slides滑动

最新推荐文章于 2025-03-07 11:11:58 发布

GotYoung

最新推荐文章于 2025-03-07 11:11:58 发布

阅读量4k

点赞数 1

分类专栏： Vue项目相关文章标签：前端 javascript 开发语言

本文链接：https://blog.youkuaiyun.com/GotYoung/article/details/126294902

版权

本文介绍了如何在Vue2.0项目中利用Swiper4.5.1版本创建PC端的卡片式轮播效果。通过设置`slidesPerView: 4`实现卡片并列展示，并在`mounted`阶段完成swiper绑定，从而实现卡片的左右滑动功能。

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

1.实现效果

2.下载swiper （我装的是4.5.1版本）

中文官网：Swiper中文网-轮播图幻灯片js插件,H5页面前端开发

3.官网案例

<div class="swiper">
    <div class="swiper-wrapper"></div>
</div>
<script>
var mySwiper = new Swiper('.swiper', {
  virtual: {
    slides: (function () {
      var slides = [];
      for (var i = 0; i < 600; i += 1) {
        slides.push('Slide ' + (i + 1));
      }
      return slides;
    }()),
  },
  //或者 virtual: true,
});
</script>

4.自己使用：

4.1在使用轮播图的组件中引入

/* 引入swiper插件 */
import 'swiper/dist/js/swiper'
import 'swiper/dist/css/swiper.css'
import Swiper from "swiper"

4.2官网给的左右切换页面是在swiper内，也可以放在swiper外面：

//html
<div class="swiper">
     <div class="swiper-wrapper"></div>
</div>
<div class="swiper-prev"><i class="el-icon-arrow-left"></i></div>
<div class="swiper-next"><i class="el-icon-arrow-right"></i></div>

4.3需要在mounted中进行swiper绑定

slidesPerView: 4 ==>这个配置很重要，之前一直显示不了卡片，加了这个就可以了，根据自己实际需要可以更改它的值