JSFiddle - React, Tailwind, and code Playground

by Vadim

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/7.0.6/swiper-bundle.min.js"></script>
<!-- Slider main container -->
<div class="swiper" id="slider">
  <!-- 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 class="swiper-slide">Slide 6</div>
  </div>
</div>
<button id="btn">next</button>

CSS

.swiper-wrapper {
  display: flex;
}

JavaScript

var slider = document.querySelector('#slider')

new Swiper(slider, {
	slidesPerView: 1,
  speed: 400,
  spaceBetween: 100,
});

var swiper = slider.swiper

btn.addEventListener('click', () => swiper.slideNext())