vue-awesome-swiper轮播图实践

最新推荐文章于 2025-07-19 21:24:14 发布

草灯

最新推荐文章于 2025-07-19 21:24:14 发布

阅读量1.6w

点赞数 1

CC 4.0 BY-SA版权

分类专栏： web前端 VUE

本文链接：https://blog.youkuaiyun.com/eadio/article/details/78570578

本文介绍了如何在Vue项目中使用vue-awesome-swiper插件实现具有特殊效果的轮播图。通过结合swiper的API和CSS样式，成功创建了一个非全屏且能展示部分相邻图片内容的轮播组件。在实现过程中遇到VueAwesomeSwiper的loop模式报错问题，通过设置loopedSlides属性解决了此问题。具体示例可在提供的演示地址查看。

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

最近有个项目需求是做一个轮播图，图片不是铺满全屏，两边空白展示一点上下张图片的内容，具体如下图所示：

选择vue-awesome-swiper插件的原因是，他就是根据swiper插件改写而来的，功能齐全，模式多种。而我又刚好在swiper官网看到该种特效，于是去拔他的源码，跟着写了下，结果发现完全不可行，猜测是不是版本的问题，可是发现两个版本都是3.xx版的，应该不至于。

最后又去查了下官网api，发现只要结合几个属性和css样式就完全可以做到。这里我用的vue-cli创建的项目，具体实现方法如下：

<template>

  <div class="swiper">
    <swiper :options="swiperOption">
      <swiper-slide v-for="(item, index) in slides" :key="index"><img :src="item"></swiper-slide>
    </swiper>
  </div>

</template>
<script>
import { swiper, swiperSlide } from 'vue-awesome-swiper';
  export default{
    name: 'test2',
    data()