swiper 移動端中間顯示全部,二邊顯示部分

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>

js

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

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章