JSFiddle - React, Tailwind, and code Playground

by schrodingers

HTML

<div id="gallery">
  <figure class="slider">
    <figure><img src="https://unsplash.it/600/400?image=645"></figure>
    <figure><img src="https://unsplash.it/600/400?image=660"></figure>
    <figure><img src="https://unsplash.it/600/400?image=404"></figure>
    <figure><img src="https://unsplash.it/600/400?image=701"></figure>
    <figure><img src="https://unsplash.it/600/400?image=696"></figure>
    <figure><img src="https://unsplash.it/600/400?image=730"></figure>
    <figure><img src="https://unsplash.it/600/400?image=780"></figure>
    <figure><img src="https://unsplash.it/600/400?image=779"></figure>

  </figure>
</div>

CSS

@keyframes slidy {
  0% {
    left: 0%;
  }
  20% {
    left: 0%;
  }
  25% {
    left: -100%;
  }
  45% {
    left: -100%;
  }
  50% {
    left: -200%;
  }
  70% {
    left: -200%;
  }
  75% {
    left: -300%;
  }
  95% {
    left: -300%;
  }
  100% {
    left: -400%;
  }
}

div#gallery {
  width: 100%;
  overflow: hidden;
  background: #101010;
  font-family: Istok Web, Avenir, sans-serif;
  font-weight: 100;
}

figure.slider {
  position: relative;
  width: 500%;
  font-size: 0;
  animation: 30s captionedslidy infinite;
}

figure.slider figure {
  width: 20%;
  height: auto;
  display: inline-block;
  position: inherit;
}

figure.slider img {
  width: 100%;
  height: auto;
}

figure.slider figure figcaption {
  position: absolute;
  bottom: 0;
  background: rgba(0, 0, 0, 0.4);
  color: #fff;
  width: 100%;
  font-size: 2rem;
  padding: .6rem;
  margin: 0;
  text-align: left;
}

@media screen and (max-width: 600px) {
  figure.slider figure figcaption {
    font-size: 1.2rem;
  }
}

JavaScript

//Slider from Dudley Storey tutorial