JSFiddle - React, Tailwind, and code Playground

by Colin Soderstrom

HTML

<div class="carousel">
  <div class="slides">
    <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>

CSS

.carousel {
  width: 100%;
  height: 50px;
  overflow: hidden;
}

.slides {
  display: flex;
  width: 1200px;
  animation: slide-animation 12s linear infinite;
}

.slide {
  width: 100px;
  height: 50px;
  background-color: red;
  margin-right: 10px;
}

@keyframes slide-animation {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100px);
  }
}

JavaScript

$(document).ready(function(){
  setInterval(function(){
    $('.slides').animate({'margin-left':'-100px'},1000, function(){
      $(this).css({'margin-left':'0px'}).find('.slide:last').after($(this).find('.slide:first'));
    });
  }, 12000);
});