出色的html滑動效果庫 swiper -例子1 橫向滑動，結束自動切換回第一欄
阿新 • • 發佈：2019-01-05
可以用於div滑動，圖片滑動等切換
例子程式碼以及所需資源：http://download.csdn.net/detail/feisy/6638105
官網例子：使用iframe來在同一個頁面裡面加入了很多各種不同的演示 http://www.idangero.us/sliders/swiper/demos.php
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Demo</title> <link rel="stylesheet" href="css/idangerous.swiper.css"> <style> /* Demo Syles */ body { margin: 0; font-family: Arial, Helvetica, sans-serif; font-size: 13px; line-height: 1.5; } .device { width: 640px; height: 300px; padding: 30px 40px; border-radius: 20px; background: #111; border: 3px solid white; margin: 5px auto; position: relative; box-shadow: 0px 0px 5px #000; } .device .arrow-left { background: url(img/arrows.png) no-repeat left top; position: absolute; left: 10px; top: 50%; margin-top: -15px; width: 17px; height: 30px; } .device .arrow-right { background: url(img/arrows.png) no-repeat left bottom; position: absolute; right: 10px; top: 50%; margin-top: -15px; width: 17px; height: 30px; } .swiper-container { height: 300px; width: 640px; } .content-slide { padding: 20px; color: #fff; } .title { font-size: 25px; margin-bottom: 10px; } .pagination { position: absolute; left: 0; text-align: center; bottom: 5px; width: 100%; } .swiper-pagination-switch { display: inline-block; width: 10px; height: 10px; border-radius: 10px; background: #999; box-shadow: 0px 1px 2px #555 inset; margin: 0 3px; cursor: pointer; } .swiper-active-switch { background: #fff; } </style> </head> <body> <div class="device"> <a class="arrow-left" href="#"></a> <a class="arrow-right" href="#"></a> <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide"> <img src="img/slider1-1.png"> </div> <div class="swiper-slide"> <img src="img/slider1-2.png"> </div> <div class="swiper-slide"> <div class="content-slide"> <p class="title">Slide with HTML</p> <p>You can put any HTML inside of slide with any layout, not only images, even another Swiper!</p> </div> </div> </div> </div> <div class="pagination"></div> </div> <script src="js/jquery-1.10.1.min.js"></script> <script src="js/idangerous.swiper-2.1.min.js"></script> <script> var mySwiper = new Swiper('.swiper-container', { pagination : '.pagination', loop : true, grabCursor : true, paginationClickable : true }) $('.arrow-left').on('click', function(e) { e.preventDefault() mySwiper.swipePrev() }) $('.arrow-right').on('click', function(e) { e.preventDefault() mySwiper.swipeNext() }) </script> </body> </html>