JSFiddle - React, Tailwind, and code Playground

by vlit

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.2.6/css/swiper.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.2.6/js/swiper.min.js"></script>
<!-- Slider main container -->
<div class="swiper-container">
    <!-- Additional required wrapper -->
    <div class="swiper-wrapper">
        <!-- Slides -->
        <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>
    <!-- If we need pagination -->
    <div class="swiper-pagination"></div>

    <!-- If we need navigation buttons -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>

</div>

CSS

.swiper-wrapper .swiper-slide {
  background-color: #eee;
  height: 250px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.swiper-wrapper{
overflow: hidden;
}
.swiper-button-prev,
.swiper-button-next {
  display: none;
}
.swiper-container{
  padding: 0 70px 0 70px;
}

JavaScript

var mySwiper = new Swiper('.swiper-container', {
  slidesPerView: 4,
  slidesPerGroup: 4,

  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
  breakpoints: {
    1200: {
      slidesPerView: 4,
      loopedSlides: 4,
      spaceBetween: 10
    },
    1024: {
      slidesPerView: 3,
      loopedSlides: 3,
      spaceBetween: 10
    },
    768: {
      slidesPerView: 2,
      loopedSlides: 2,
      spaceBetween: 10
    },
    675: {
      slidesPerView: 1,
      loopedSlides: 1,
      spaceBetween: 20,
    }
  },
  on: {
    init: function() {
			checkArrow();
    },
    resize: function () {
			checkArrow();
    }
  }
});

function checkArrow() {
  var swiperPrev = document.querySelector('.swiper-button-prev');
  var swiperNext = document.querySelector('.swiper-button-next');
  if ( window.innerWidth < 1024  ) {
    console.log('Success', window.innerWidth);
    swiperPrev.style.display = 'block';
    swiperNext.style.display = 'block';
  } else {
    swiperPrev.style.display = 'none';
    swiperNext.style.display = 'none';
  }
}