Swiper之滑塊2

時間 2019-11-11

標籤 swiper 滑塊简体版

原文原文鏈接

對比以前Swiper滑塊1來講，咱們添加一下背景顏色來看看：javascript

<!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> css

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。