JSFiddle - React, Tailwind, and code Playground

by LOOnny

HTML

<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
<!-- Slider main container -->
<div class="swiper-container">
  <!-- Additional required wrapper -->
  <div class="swiper-wrapper">
    <!-- Slides -->
    <div class="swiper-slide"></div>
    <div class="swiper-slide"></div>
    <div class="swiper-slide"></div>
    <div class="swiper-slide"></div>
    <div class="swiper-slide"></div>
    <div class="swiper-slide"></div>
    <div class="swiper-slide"></div>
    <div class="swiper-slide"></div>
    <div class="swiper-slide"></div>
    <div class="swiper-slide"></div>
    <div class="swiper-slide"></div>
    <div class="swiper-slide"></div>
  </div>
</div>

CSS

body {
  margin: 0;
  padding: 0;
}

.swiper-container {
  width: 100vw;
  height: 200px;
  padding: 2rem 0;
}

.swiper-slide {
  border-radius: 1rem;
  margin-right: 2rem;
  background: #ff4400;
}

.swiper-slide:nth-child(2n) {
  background: #000;
}

JavaScript

const swiper = new Swiper('.swiper-container', {
  // Optional parameters
  direction: 'horizontal',
  mousewheel: true,
  freeMode: true,
  width: 300
});