<div class="swiper swiper-product" data-ident="product" data-speed="1000" data-delay="4000" data-slidesPerView="2" data-slidesPerGroup="1" data-spaceBetween="5" data-effect="slide" data-breakpoints='{"768":{"slidesPerView":4,"spaceBetween":5}}'>
  <div class="swiper-wrapper">
    <div class="swiper-slide">
      <div class="item-col img-col">
        <img src="https://static.hongcdn.com/images/swiper-1.jpg" class="img-fluid" alt="swiper" width="600" height="400" loading="lazy" />
      </div>
    </div>
    <div class="swiper-slide">
      <div class="item-col img-col">
        <img src="https://static.hongcdn.com/images/swiper-2.jpg" class="img-fluid" alt="swiper" width="600" height="400" loading="lazy" />
      </div>
    </div>
    <div class="swiper-slide">
      <div class="item-col img-col">
        <img src="https://static.hongcdn.com/images/swiper-3.jpg" class="img-fluid" alt="swiper" width="600" height="400" loading="lazy" />
      </div>
    </div>
    <div class="swiper-slide">
      <div class="item-col img-col">
        <img src="https://static.hongcdn.com/images/swiper-4.jpg" class="img-fluid" alt="swiper" width="600" height="400" loading="lazy" />
      </div>
    </div>
    <div class="swiper-slide">
      <div class="item-col img-col">
        <img src="https://static.hongcdn.com/images/swiper-5.jpg" class="img-fluid" alt="swiper" width="600" height="400" loading="lazy" />
      </div>
    </div>
    <div class="swiper-slide">
      <div class="item-col img-col">
        <img src="https://static.hongcdn.com/images/swiper-6.jpg" class="img-fluid" alt="swiper" width="600" height="400" loading="lazy" />
      </div>
    </div>
  </div>
  <div class="swiper-pagination" id="swiper-pagination-product"></div>
  <div class="swiper-button-next" id="swiper-button-next-product"></div>
  <div class="swiper-button-prev" id="swiper-button-prev-product"></div>
</div>