首页 > 技术文章 > Swiper之滑块4
caidupingblogs 2016-10-08 11:50 原文
最炫3D走一波：
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Swiper之滑块3</title> <link rel="stylesheet" href="https://files.cnblogs.com/files/caidupingblogs/swiper2.min.css"> <!--Swiper3.0.4--> <style> * { margin: 0; padding: 0; } .blue-slide { background: #4390EE; } .red-slide { background: #CA4040; } .orange-slide { background: #FF8604; } .green-slide{ background: #00FF7F; } .violet-slide{ background: #A020F0; } .swiper-slide { line-height: 300px; color: #fff; font-size: 36px; text-align: center; } element.style { transform: translate3d(-800px, 0px, 0px); transition-duration: 2000ms; } #swiper-container3 .swiper-wrapper { transition-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1); } .swiper-container-android .swiper-slide, .swiper-wrapper { -webkit-transform: translate3d(0,0,0); -moz-transform: translate3d(0,0,0); -o-transform: translate(0,0); -ms-transform: translate3d(0,0,0); transform: translate3d(0,0,0); } .swiper-wrapper { position: relative; width: 100%; height: 100%; z-index: 1; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-transition-property: -webkit-transform; -moz-transition-property: -moz-transform; -o-transition-property: -o-transform; -ms-transition-property: -ms-transform; transition-property: transform; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; } </style> </head> <body> <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide blue-slide">第一页</div> <div class="swiper-slide red-slide">第二页</div> <div class="swiper-slide orange-slide">第三页</div> <div class="swiper-slide green-slide">第四页</div> <div class="swiper-slide violet-slide">第五页</div> </div> </div> <script src="https://files.cnblogs.com/files/caidupingblogs/swiper.min.js"></script> <script type="text/javascript"> var mySwiper = new Swiper('.swiper-container',{ effect : 'coverflow', slidesPerView: 3, centeredSlides: true, }); </script> </body> </html>