<style type="text/css">html, body { position: relative; height: 100%; } body { background: #eee; font-family: Helvetica Neue, Helvetica, Arial, sans-serif; font-size: 14px; color:#000; margin: 0; padding: 0; } .swiper-container { width: 100%; height: 100%; } .swiper-slide { text-align: center; font-size: 18px; background: #fff; /* Center slide text vertically */ display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .swiper-slide img{ width: 100%;} </style> <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide"><a href="#"><img src="https://www.sooseo.net/skin/yycms/6-1P615101036226.jpg" /></a></div> <div class="swiper-slide"><a href="#"><img src="https://www.sooseo.net/skin/yycms/6-1PI11F510a1.jpg" /></a></div> <div class="swiper-slide"><a href="#"><img src="https://www.sooseo.net/skin/yycms/5-1PP111031D56.jpg" /></a></div> <div class="swiper-slide"><a href="#"><img src="https://www.sooseo.net/skin/yycms/5-1PS110441M32.jpg" /></a></div> <div class="swiper-slide"><a href="#"><img src="https://www.sooseo.net/skin/yycms/5-1P920110249603.jpg" /></a></div> <div class="swiper-slide"><a href="#"><img src="https://www.sooseo.net/skin/yycms/5-1Z6111F5094a.jpg" /></a></div> <div class="swiper-slide"><a href="#"><img src="https://www.sooseo.net/skin/yycms/5-1Z531144111463.jpg" /></a></div> <div class="swiper-slide"><a href="#"><img src="https://www.sooseo.net/skin/yycms/5-1Z5161Z403J4.jpg" /></a></div></div> <div class="swiper-pagination"> </div></div><script> var swiper = new Swiper('.swiper-container', { pagination: '.swiper-pagination', slidesPerView: 3, paginationClickable: true, spaceBetween: 30 }); </script>
上一篇:常用的响应式滚动轮播代码
下一篇:返回列表