swiper 移动端中间显示全部，二边显示部分

最新推荐文章于 2023-11-09 14:08:31 发布

树欲静而风不止

最新推荐文章于 2023-11-09 14:08:31 发布

阅读量2k

点赞数 1

分类专栏：前端基础

本文链接：https://blog.csdn.net/zjy660358/article/details/105140573

版权

前端基础专栏收录该内容

18 篇文章 0 订阅

订阅专栏

html

			<div class="swiper-container">
	            <div class="swiper-wrapper">
	                <div class="swiper-slide"><a href="#"><img src="img/test_banner1.png" alt="" width="100%"></a></div>
	                <div class="swiper-slide"><a href="#"><img src="img/test_banner2.png" alt="" width="100%"></a></div>
	                <div class="swiper-slide"><a href="#"><img src="img/test_banner3.png" alt="" width="100%"></a></div>
	            </div>
	        </div>

css

	    <style type="text/css">
	    	.swiper-container {
			    margin-top: 20px;
			    width: 100vw;
			    height: 50vw;
			    margin-bottom: 53px;
			    overflow: visible!important;
			}
			.swiper-container .swiper-wrapper .swiper-slide{ width: 82%; border-radius: 20px;}
			.swiper-container .swiper-wrapper .swiper-slide img{width: 100%; height: 100%; border-radius: 20px;}
			.swiper-container .swiper-wrapper .swiper-slide-prev{ margin-top: 6%; height: 88%!important;}
			.swiper-container .swiper-wrapper .swiper-slide-prev img{ height: 88%!important;}
			.swiper-container .swiper-wrapper .swiper-slide-next{ margin-top: 6%; height: 88%!important;}
			.swiper-container .swiper-wrapper .swiper-slide-next img{ height: 88%!important;}
			.swiper-container .swiper-wrapper .swiper-slide-active{ width: 82%;}
			
	    </style>

var swiper = new Swiper('.swiper-container', {
				direction: 'horizontal',
                loop: true,
                autoplay: 5000,
                slidesPerView: "auto",
                centeredSlides:true,
                spaceBetween: 20
	        });