JSFiddle - React, Tailwind, and code Playground

by duopixel

HTML

<div id="carousel">
<div id="stage">
    <div class="slide"></div>
    <div class="slide"></div>
     <div class="slide"></div>
    <div class="slide"></div>
     <div class="slide"></div>
    <div class="slide"></div>
    <div class="slide"></div>
    <div class="slide"></div>
    <div class="slide"></div>
     <div class="slide"></div>
    <div class="slide"></div>
     <div class="slide"></div>
    <div class="slide"></div>
    <div class="slide"></div>
    <div class="slide"></div>
    <div class="slide"></div>
     <div class="slide"></div>
    <div class="slide"></div>
     <div class="slide"></div>
    <div class="slide"></div>
    <div class="slide"></div>
</div>
<div id="dots">
    <div id="wrapper">
    <a href="#" class="active"></a>
    <a href="#"></a>
    <a href="#"></a>
    <a href="#"></a>
    <a href="#"></a>
    <a href="#"></a>
    <a href="#"></a>
    <a href="#"></a>
    <a href="#"></a>
    <a href="#"></a>
        <a href="#"></a>
    <a href="#"></a>
    <a href="#"></a>
    <a href="#"></a>
    <a href="#"></a>
    <a href="#"></a>
    <a href="#"></a>
    <a href="#"></a>
    <a href="#"></a>
    </div>
</div>
</div><a href="#" id="next">Swipe next</a> </div>

CSS

#carousel {
  background-color: #ddd;
  height: 320px;
  width: 450px;
  overflow: hidden;
  position: relative;
}

#stage {
  width: 10000px;
   -webkit-transition: all ease 1s;
}

.slide {
  background-color: #ccc;
  height: 270px;
  width: 200px;
  float: left;
  margin: 10px;
}

#dots {
  position: absolute;
  bottom: 10px;
  text-align: center;
  width: 100%;
}

#dots a {
  height: 5px;
  width: 5px;
  border-radius: 5px;
  background-color: #bbb;
  margin: 0 10px 0 0;
  display: inline-block;
}

#dots a.active {

  background-color: #999;

}

#actions {
width: 450px;
margin-top: 10px;
text-align: center;
}

#dots {
width: 200px;
margin-left: 100px;
overflow: hidden;
}

#wrapper {
width: 400px;
-webkit-transition: all ease 1s;
}

JavaScript

$('#next').click(function(){

  $('#dots a.active').next().addClass("active").prev().removeClass("active");
  $('#stage').css("-webkit-transform", "translate3d("+$('#dots a.active').index() * -450+"px, 0, 0)");

   if ($('#dots a.active').index() == 9) {
    $("#wrapper").css("-webkit-transform", "translate3d(-180px, 0, 0)");
    } 
    
});