swiper 立體3D相簿滑動效果
阿新 • • 發佈:2018-12-17
<link rel="stylesheet" type="text/css" href="https://www.swiper.com.cn/dist/css/swiper.min.css"> body { margin: 0; padding: 0; } .swiper-container { width: 100%; padding-top: 10px; padding-bottom: 30px; } .swiper-slide { background-position: center; background-size: cover; width: 240px; height: 320px; } .swiper-slide img{ width: 100%; height: 100%; }
<div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide"> <img src="http://www.yuetuvip.com/img/banner4.jpg" > </div> <div class="swiper-slide"> <img src="http://www.yuetuvip.com/img/banner4.jpg" > </div> <div class="swiper-slide"> <img src="http://www.yuetuvip.com/img/banner4.jpg" > </div> <div class="swiper-slide"> <img src="http://www.yuetuvip.com/img/banner4.jpg" > </div> </div> </div>
<script src="https://www.swiper.com.cn/dist/js/swiper.min.js"></script> <script type="text/javascript"> var mySwiper = new Swiper('.swiper-container', { effect: 'coverflow', //3d滑動 grabCursor: true, centeredSlides: true, slidesPerView: 'auto', loop:true, slidesPerView: 2, coverflow: { rotate: 0, //設定為0 stretch: 0, depth: 200, modifier: 2, slideShadows : true } }); </script>
歡迎討論!!~~~