16-3d · Swiper

# 3d ``` <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title></title> <link rel="stylesheet" href=""> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/css/swiper.min.css"> <style> .swiper-container{ height: 300px; width: 500px; } .swiper-slide{ height: 300px; width: 250px; border:1px solid #ccc; } .red{ background: red; } .green{ background: green; } .blue{ background: blue; } .orange{ background: orange; } .pink{ background: pink; } </style> </head> <body> <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide red"></div> <div class="swiper-slide green"></div> <div class="swiper-slide blue"></div> <div class="swiper-slide orange"></div> <div class="swiper-slide pink"></div> </div> <div class="swiper-pagination"></div> </div> <div class="swiper-container2"> <div class="swiper-wrapper"> <div class="swiper-slide red"></div> <div class="swiper-slide green"></div> <div class="swiper-slide blue"></div> <div class="swiper-slide orange"></div> <div class="swiper-slide pink"></div> </div> <div class="swiper-pagination"></div> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/js/swiper.min.js"></script> <script> var swiper = new Swiper('.swiper-container',{ pagination:'.swiper-pagination', loop:true, //autoplay:1000, //grabCursor:true, centeredSlides:true, slidesPerView:'auto', effect:'coverflow', coverflow:{ rotate:0,//滑動時旋轉角度 stretch:100,//聚合寬度 depth:100,//景深 modifier:1,//覆蓋疊加層數 slideShadows:false//是否陰影 } }); </script> <script> var swper2 = new Swiper('.swiper-container2', { direction: 'horizontal', spaceBetween : 10, loop: true, slidesPerView : 1.2, centeredSlides : true }); </script> </body> </html> ———————————————— 版權聲明：本文為CSDN博主「weixin_41978390」的原創文章，遵循 CC 4.0 BY-SA 版權協議，轉載請附上原文出處鏈接及本聲明。原文鏈接：https://blog.csdn.net/weixin_41978390/article/details/79977107 ```