1. <!DOCTYPE html>
    2. <html lang="en">
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Document</title>
    8.     <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.css">
    9. </head>
    11. <body>
    12.     <div class="swiper-container">
    13.         <div class="swiper-wrapper">
    14.             <div class="swiper-slide">Slide 1</div>
    15.             <div class="swiper-slide">Slide 2</div>
    16.             <div class="swiper-slide">Slide 3</div>
    17.         </div>
    18.         <!-- 如果需要分页器 -->
    19.         <div class="swiper-pagination"></div>
    21.         <!-- 如果需要导航按钮 -->
    22.         <div class="swiper-button-prev"></div>
    23.         <div class="swiper-button-next"></div>
    25.         <!-- 如果需要滚动条 -->
    26.         <div class="swiper-scrollbar"></div>
    27.     </div>
    28.     <script src="https://unpkg.com/swiper/swiper-bundle.js"> </script>
    29.     <script>
    30.         var mySwiper = new Swiper('.swiper-container', {
    31.             direction: 'horizontal', // 垂直切换选项
    32.             loop: true, // 循环模式选项
    34.             // 如果需要分页器
    35.             pagination: {
    36.                 el: '.swiper-pagination',
    37.             },
    39.             // 如果需要前进后退按钮
    40.             navigation: {
    41.                 nextEl: '.swiper-button-next',
    42.                 prevEl: '.swiper-button-prev',
    43.             },
    45.             // 如果需要滚动条
    46.             scrollbar: {
    47.                 el: '.swiper-scrollbar',
    48.             },
    49.         })        
    50.     </script>
    51. </body>
    53. </html>