中文教程：https://swiper.com.cn/
使用示例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Swiper Example</title> <!-- 引入 Swiper CSS --> <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css"> <!-- 引入 Swiper JS --> <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script> <style> /* 设置 Swiper 容器的样式 */ .swiper-container {width: 600px;height: 300px;} </style> </head> <body> <!-- Swiper --> <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide">Slide 1</div> <div class="swiper-slide">Slide 2</div> <div class="swiper-slide">Slide 3</div> </div> <!-- 添加分页器 --> <div class="swiper-pagination"></div> <!-- 添加导航按钮 --> <div class="swiper-button-next"></div> <div class="swiper-button-prev"></div> </div> <script> // 初始化 Swiper var swiper = new Swiper('.swiper-container', { loop: true, pagination: { el: '.swiper-pagination', clickable: true, }, navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', }, }); </script> </body> </html> end.