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

前言

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

实现效果如下：

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

第一步：首先在项目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!important;

}

.swiper-container .swiper-wrapper .swiper-slide{

width: crem(620);

bo