swiper轮播图在vue中实现显示3张图片|swiper轮播图在vue中实现显示3张图片,一个完整的两边显示一半 swiper轮播图在vue中实现显示3张

swiper效果图,图片路径自己更改吧

文章图片

.swiper-container { overflow: visible!important; width: 600px; height: 300px; } .swiper-container .swiper-wrapper .swiper-slide{ width: 600px; border-radius: 20px; background: palegreen} .swiper-container .swiper-wrapper .swiper-slide img{ border-radius: 20px; } .swiper-container .swiper-wrapper .swiper-slide-prev{ margin-top: 18px; height: 284px!important; } .swiper-container .swiper-wrapper .swiper-slide-prev img{ height: 284px!important; } .swiper-container .swiper-wrapper .swiper-slide-next{ margin-top: 18px; height: 284px!important; } .swiper-container .swiper-wrapper .swiper-slide-next img{ height: 284px!important; } .swiper-container .swiper-wrapper .swiper-slide-active{ width: 600px; margin-right: 10px; margin-left: 10px}

【swiper轮播图在vue中实现显示3张图片|swiper轮播图在vue中实现显示3张图片,一个完整的两边显示一半】如皋要实现三张图片等高,删除这几行代码就可以啦

.swiper-container .swiper-wrapper .swiper-slide-prev{ margin-top: 18px; height: 284px!important; } .swiper-container .swiper-wrapper .swiper-slide-prev img{ height: 284px!important; } .swiper-container .swiper-wrapper .swiper-slide-next{ margin-top: 18px; height: 284px!important; } .swiper-container .swiper-wrapper .swiper-slide-next img{ height: 284px!important; }