出色的html滑動效果庫 swiper -例子4 超長單欄橫向滑動
阿新 • • 發佈：2019-01-03
可以用於div滑動，圖片滑動等切換
例子程式碼以及所需資源：http://download.csdn.net/detail/feisy/6638105
例子程式碼以及所需資源：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"> <link rel="stylesheet" href="css/idangerous.swiper.scrollbar.css"> <style> /* Demo Styles */ body { margin: 0; font-family: Arial, Helvetica, sans-serif; font-size: 13px; line-height: 1.5; } .swiper-container { width: 640px; height: 300px; text-align: center; } .swiper-slide { width: 1520px; padding: 20px; background: #fff; } .red-slide { background: #ca4040; } .blue-slide { background: #4390ee; } .orange-slide { background: #ff8604; } .green-slide { background: #49a430; } .pink-slide { background: #973e76; } .swiper-scrollbar { width: 100%; height: 4px; position: absolute; left: 0; bottom: 5px; z-index: 1; } </style> </head> <body> <div class="swiper-container"> <div class="swiper-scrollbar"></div> <div class="swiper-wrapper"> <div class="swiper-slide"> <div class="red-slide" style="width:250px; float:left; font-size:25px; line-height:30px; text-align:center"> <p style="color:#fff; font-weight:bold; font-style:italic;">Your dreams come true:) That is a simple single scrollable area! No slides, no nothing, just pure area!</p> </div> <div style="width:300px; float:left; margin-left:20px"> <p>Here goes some text</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam dictum ipsum auctor nulla consectetur sed porta nunc placerat.</p> <p>Nulla dui augue, sollicitudin egestas consequat a, consequat quis neque. Sed at mauris nunc. Donec rutrum leo id risus congue convallis. Maecenas ultrices condimentum velit, nec tincidunt lorem convallis consequat. Nulla elementum consequat quam eu euismod</p> </div> <div style="width:500px; float:left; margin-left:20px"> <p>Here goes wide image</p> <p><img src="img/bb.jpg"></p> </div> <div class="blue-slide" style="width:350px; float:left; font-size:28px; line-height:30px; text-align:center; margin-left:20px; padding:25px"> <p style="color:#fff; font-weight:bold; font-style:italic;">You can make it any width/height, horizontal (like this one) or vertical, with any styling and with any HTML content!</p> </div> </div> </div> </div> <script src="js/jquery-1.10.1.min.js"></script> <script src="js/idangerous.swiper-2.1.min.js"></script> <script src="js/idangerous.swiper.scrollbar-2.1.js"></script> <script> var mySwiper = new Swiper('.swiper-container',{ scrollContainer: true, scrollbar: { container: '.swiper-scrollbar' } }) </script> </body> </html>