HTML


<div class="sample sample03">
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide"><img src="./img/img01.png"></div>
      <div class="swiper-slide"><img src="./img/img02.png"></div>
      <div class="swiper-slide"><img src="./img/img03.png"></div>
    </div>
      
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>

    <div class="swiper-pagination"></div>
  </div>
</div>

CSS


.swiper-slide {
  cursor: pointer;
}

.sample03 .swiper-button-prev,
.sample03 .swiper-button-next {
  display: none;
}

@media (min-width: 768px) {
  .sample03 .swiper-button-prev,
  .sample03 .swiper-button-next {
    display: block;
  }
}

JavaScript


window.addEventListener('DOMContentLoaded', function() {
  var swiper03 = new Swiper('.sample03 .swiper-container', {
    pagination: '.swiper-pagination',
    paginationClickable: true,
    nextButton: '.swiper-button-next',
    prevButton: '.swiper-button-prev',
    loop: true,
    slidesPerView: 3,
    loopedSlides: 3,
    centeredSlides : true,
    slideToClickedSlide: true,
    spaceBetween: 10,
    breakpoints: {
      543: {
        slidesPerView: 2,
      }
    }
  });
}, false);