html轮播图片显示中间部分,vue项目中使用swiper实现中间大，两边小的轮播图

80 阅读 0 评论 53 点赞

我是靠谱客的博主爱笑帅哥，最近开发中收集的这篇文章主要介绍html轮播图片显示中间部分,vue项目中使用swiper实现中间大，两边小的轮播图，觉得挺不错的，现在分享给大家，希望可以做个参考。

前言

项目中使用的vue，刚好有需求要实现轮播图，突出显示当前图片，两边展示其他图片；通过查各种资料，实现了，故在此记录下来

实现效果如下：

bVbAIyM

下面我们来看下实现步骤：

第一步：首先在项目index.html中引入swiper的css文件-swiper.min.css

第二步：写入dom结构

v-for="(item, i) in pictures"

:key="i"

class="swiper-slide"

:src="item.advertiseImages"

alt="商品图片"

第三步：写好swiper样式(这里使用的stylus)

.swiper-container {

margin-top: crem(40);

width: crem(750);

height: crem(850);

margin-bottom: crem(53);

overflow: visible!

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。

本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。