JSFiddle - React, Tailwind, and code Playground

by Oleg Serebryakov

HTML

<div id="carousel">
  <div class="carousel-prev"></div>
  <div class="carousel-next"></div>
  <div class="carousel-holder">
    <div class="carousel-slider">
      <div class="catousel-item" style="background:yellow;">1</div>
      <div class="catousel-item" style="background:red;">2</div>
      <div class="catousel-item" style="background:blue;">3</div>
    </div>
  </div>
</div>

CSS

#carousel {width:400px; height:200px; position:relative;}
  .carousel-prev,
  .carousel-next {position:absolute; top:50%; margin-top:-25px; width:0; height:0; border:25px solid transparent; cursor:pointer; z-index:1;}
  .carousel-prev {border-right-color:#000; left:0;}
  .carousel-next {border-left-color:#000; right:0;}

  .carousel-holder {width:400px; height:200px; overflow:hidden;}
    .carousel-slider {position:relative;}
      .catousel-item {width:400px; height:200px; float:left;}

JavaScript

var slider = $('#carousel .carousel-slider');
var item = $('#carousel .catousel-item');
var total = item.length;
var width = item.width();
var index = 0;
var speed = 500;

slider.width( total * width );

function carouselSlide(index) {
  slider.stop().animate({left: -index * width +'px'}, speed);
};

$('.carousel-prev').on('click', function() {
  index -= 1;
  carouselSlide( index = (index < 0) ? total - 1 : index );
});

$('.carousel-next').on('click', function() {
  index += 1;
  carouselSlide( index = (index > total - 1) ? 0 : index );
});