可以用于div滑动，，图片滑动等切换例子代码以及所需资源：
官网例子：使用iframe来在同一个页面里面加入了很多各种不同的演示
<!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>
即使没有收获的希望也心平气和的继续。
