vue-awesome-swiper轮播图实践

最新推荐文章于 2024-08-09 16:07:40 发布

草灯

最新推荐文章于 2024-08-09 16:07:40 发布

阅读量1.6w

点赞数 1

分类专栏： web前端 VUE

本文链接：https://blog.csdn.net/eadio/article/details/78570578

版权

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

摘要由CSDN通过智能技术生成

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

选择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>

</tem