对比之前Swiper滑块1来说，我们添加一下背景颜色来看看：
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Swiper之滑块2</title> <link rel="stylesheet" href="http://files.cnblogs.com/files/caidupingblogs/swiper2.min.css"> <style> * { margin: 0; padding: 0; } .blue-slide { background: #4390EE; } .red-slide { background: #CA4040; } .orange-slide { background: #FF8604; } .swiper-slide { line-height: 300px; color: #fff; font-size: 36px; text-align: center; } </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> </div> <script src="http://files.cnblogs.com/files/caidupingblogs/swiper.min.js"></script> <script type="text/javascript"> var mySwiper = new Swiper('.swiper-container',{ loop: true, autoplay: 3000, }); </script> </body> </html>