JSFiddle - React, Tailwind, and code Playground

by Marco Abate

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.4.2/js/swiper.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.4.2/css/swiper.css">
<div class="wrapper">
  <div class="tabs">
    <button type="button" class="tab">
      Tab 1
    </button>
    <button type="button" class="tab">
      Tab 2
    </button>
    <button type="button" class="tab">
      Tab 3
    </button>
  </div>
  <div class="underline"></div>
</div>
<div class="swiper-container slides">
  <div class="swiper-wrapper">
    <div class="swiper-slide">Slide 1</div>
    <div class="swiper-slide">Slide 2</div>
    <div class="swiper-slide">Slide 3</div>
  </div>
</div>

SCSS

.wrapper {
  position: relative;
}

.swiper-slide {
  background-color: red;
  color: black;
  height: 220px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.tabs {
  display: flex;
  .tab {
    flex: 1;
    border: none;
    padding: 20px;
    cursor: pointer;
    outline: none;
  }
}

.underline {
  height: 2px;
  background-color: blue;
  position: absolute;
  left: 0;
  bottom: 0;
}

JavaScript

var swiper = new Swiper ('.swiper-container.slides', {
	spaceBetween: 15
});
var underline = document.querySelectorAll('.underline')[0];
swiper.on('setTranslate', function(position) {
	if(position <= 0 && Math.abs(position) >= swiper.snapGrid[0] && Math.abs(position) <= swiper.snapGrid[swiper.snapGrid.length - 1]) {
		underline.style.transform = 'translate3d(' + Math.abs(position / swiper.slides.length) + 'px, 0, 0)';
  }
});
swiper.on('transitionStart', function(position) {
	underline.style.transition = 'transform .3s ease';
});
swiper.on('transitionEnd', function(position) {
	underline.style.transition = 'inherit';
});
underline.style.width = (swiper.size / swiper.slides.length) + 'px';

document.getElementsByClassName('tab')[0].addEventListener('click',function () {
	swiper.slideTo(0);
},false);

document.getElementsByClassName('tab')[1].addEventListener('click',function () {
	swiper.slideTo(1);
},false);

document.getElementsByClassName('tab')[2].addEventListener('click',function () {
	swiper.slideTo(2);
},false);