text: <!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="utf-8">
      <title>Swiper demo</title>
      <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
  
      <!-- Link Swiper's CSS -->
      <link rel="stylesheet" href="../css/swiper.min.css">
  
      <!-- Demo styles -->
      <style>
      body {
          background: #eee;
          font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
          font-size: 14px;
          color:#000;
          margin: 0;
          padding: 0;
      }
      .swiper-container {
          width: 100%;
          height: 300px;
          margin: 20px auto;
      }
      .swiper-slide {
          text-align: center;
          font-size: 18px;
          background: #fff;
          width: 60%;
  
          /* Center slide text vertically */
          display: -webkit-box;
          display: -ms-flexbox;
          display: -webkit-flex;
          display: flex;
          -webkit-box-pack: center;
          -ms-flex-pack: center;
          -webkit-justify-content: center;
          justify-content: center;
          -webkit-box-align: center;
          -ms-flex-align: center;
          -webkit-align-items: center;
          align-items: center;
      }
      .swiper-slide:nth-child(2n) {
          width: 40%;
      }
      .swiper-slide:nth-child(3n) {
          width: 20%;
      }
      </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 class="swiper-slide">Slide 4</div>
              <div class="swiper-slide">Slide 5</div>
              <div class="swiper-slide">Slide 6</div>
              <div class="swiper-slide">Slide 7</div>
              <div class="swiper-slide">Slide 8</div>
              <div class="swiper-slide">Slide 9</div>
              <div class="swiper-slide">Slide 10</div>
          </div>
          <!-- Add Pagination -->
          <div class="swiper-pagination"></div>
      </div>
  
      <!-- Swiper JS -->
      <script src="../js/swiper.min.js"></script>
  
      <!-- Initialize Swiper -->
      <script>
      var swiper = new Swiper('.swiper-container', {
          pagination: '.swiper-pagination',
          slidesPerView: 4,
          centeredSlides: true,
          paginationClickable: true,
          spaceBetween: 30,
          grabCursor: true
      });
      </script>
  </body>
  </html>