vue使用swiper实现中间完整两边半个轮播

最新推荐文章于 2025-07-17 15:48:18 发布

原创

最新推荐文章于 2025-07-17 15:48:18 发布 · 2.5k 阅读

收录于

当前文章被以下社区和专栏收录：

本文介绍了如何在Vue项目中利用Swiper组件，实现中间图片完整，两边图片显示半个的效果。首先通过cnpm安装swiper，然后详细讲解了编写页面代码的步骤，并展示了最终实现的轮播图效果图。

vue中使用swiper实现中间完整两边半个的轮播图

下载swiper

cnpm install swiper

编写页面代码

<template>
  <div class="swiper-container">
 <div class="swiper-wrapper">
  <div
   v-for="(item, i) in pictures"
   :key="i"
   class="swiper-slide"
  >
   <!-- 具体内容 -->
   <img
   class="swiper-img" 
   :class='{active:currentIndex===i}'
    :src="item"
    @click='itemClick(i)'
   >
  </div>