<div class="container">
  <p>Horizontal draggable scroll menu with <a href="https://swiperjs.com/get-started/" target="_blank">Swiper</a></p>
  <div class="swiper-container" id="scroll-tags">
    <ul class="swiper-wrapper">
      <li class="swiper-slide"><a href="#">item 1</a></li>
      <li class="swiper-slide"><a href="#">item 2</a></li>
      <li class="swiper-slide"><a href="#">item 3</a></li>
      <li class="swiper-slide"><a href="#">item 4</a></li>
      <li class="swiper-slide"><a href="#">item 5</a></li>
      <li class="swiper-slide"><a href="#">item 6</a></li>
      <li class="swiper-slide"><a href="#">item 7</a></li>
      <li class="swiper-slide"><a href="#">item 8</a></li>
      <li class="swiper-slide"><a href="#">item 9</a></li>
      <li class="swiper-slide"><a href="#">item 10</a></li>
      <li class="swiper-slide"><a href="#">item 11</a></li>
      <li class="swiper-slide"><a href="#">item 12</a></li>
      <li class="swiper-slide"><a href="#">item 13</a></li>
      <li class="swiper-slide"><a href="#">item 14</a></li>
      <li class="swiper-slide"><a href="#">item 15</a></li>
      <li class="swiper-slide"><a href="#">item 16</a></li>
      <li class="swiper-slide"><a href="#">item 17</a></li>
      <li class="swiper-slide"><a href="#">item 18</a></li>
      <li class="swiper-slide"><a href="#">item 19</a></li>
      <li class="swiper-slide"><a href="#">item 20</a></li>
    </ul>
    <div class="swiper-scrollbar"></div>
  </div>
</div>

body {
  background: #000;
  color: #f0f0f0;
}
.container {
  max-width: 1027px;
  width: 90vw;
  margin: auto;
  text-align: center;
  padding: 15px;
}

.swiper-container {
  width: 100%;
  max-width: 800px;
  height: auto;
  padding-bottom: 5px;
  /*space for the scrollbar*/
}
.swiper-wrapper {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
.swiper-slide {
  width: auto;
  background-color: #333;
}
.swiper-slide a {
  display: block;
  color: white;
  text-align: center;
  padding: .3em .8em;
  text-decoration: none;
}
.swiper-slide a:hover {
  color: yellow;
}

/* Styling the scroll bar for dark mode */
.swiper-scrollbar {
  background: #FFFFFF2a;
}
.swiper-scrollbar-drag {
  background: #FFFFFF80;
}

var swiper = new Swiper(".swiper-container", {
  slidesPerView: "auto",
  freeMode: true,
  slideToClickedSlide: true,
  spaceBetween: 10,
  scrollbar: {
    el: ".swiper-scrollbar",
    draggable: true,
    dragSize: 100
  },
  mousewheel: true
});