基本介紹： 中文文檔地址：https://www.swiper.com.cn/ 它是一個開源，免費，強大的觸摸滑動插件。 它是用純Javascript打造的滑動特效插件，既可用於PC端，也可用於移動端設備。 基本使用： 效果展示： 其他額外參數請參考中文文檔。 ...
基本介紹：
- 中文文檔地址：https://www.swiper.com.cn/
- 它是一個開源，免費，強大的觸摸滑動插件。
- 它是用純Javascript打造的滑動特效插件，既可用於PC端，也可用於移動端設備。
基本使用：
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8" /> <title>獨秀不愛秀</title> <link rel="stylesheet" type="text/css" href="swiper/css/swiper.css"> <style type="text/css"> * { margin: 0; padding: 0; } .swiper-container { width: 1000px; height: 500px; margin: 100px auto; background-color: green; } .swiper-slide { font-size: 30px; text-align: center; line-height: 500px; color: #fff; } </style> </head> <body> <div class="swiper-container"> <ul class="swiper-wrapper"> <li class="swiper-slide">1111</li> <li class="swiper-slide">2222</li> <li class="swiper-slide">3333</li> <li class="swiper-slide">4444</li> <li class="swiper-slide">5555</li> <li class="swiper-slide">6666</li> <li class="swiper-slide">7777</li> </ul> <!-- 分頁器 --> <div class="swiper-pagination"></div> <!-- 導航按鈕 --> <div class="swiper-button-prev"></div> <div class="swiper-button-next"></div> </div> <script src="swiper/js/swiper.js"></script> <script type="text/javascript"> // 初始化Swiper var mySwiper = new Swiper('.swiper-container', { // 迴圈輪播 loop: true, // 分頁器 pagination: { el: '.swiper-pagination', // 動態分頁器：當你的slide很多時，為true後，分頁器會有大小顯示 dynamicBullets: true, }, // 前進後退按鈕 navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', }, // 自動輪播 autoplay: { delay: 3000, /** * stopOnLastSlide => true: 當切換到最後一個slide時停止自動切換 */ stopOnLastSlide: true, /** * disableOnInteraction：用戶操作swiper之後，是否禁止自動輪播 * true(預設) => 停止 * false => 恢復自動輪播 */ disableOnInteraction: false, } }); </script> </body> </html>
效果展示：
其他額外參數請參考中文文檔。
