JSFiddle - React, Tailwind, and code Playground

by kwoxer

HTML

<div id="test">
    <div id="slider">
        <figure>
            <img src="http://demosthenes.info/assets/images/austin-fireworks.jpg" alt="">
            <img src="http://demosthenes.info/assets/images/taj-mahal.jpg" alt="">
            <img src="http://demosthenes.info/assets/images/ibiza.jpg" alt="">
        </figure>
    </div>
</div>

CSS

@keyframes slidy {
    0% { left: 33.3%; }
    20% { left: 33.3%; }
    25% { left: 0%; }
    45% { left: 0%; }
    50% { left: -33.3%; }
    70% { left: -33.3%; }
    100% { left: 33.3%; }
}

body { margin: 0; }
div#slider { overflow: hidden; }
div#slider figure img { width: 33.3%; float: left; }
div#slider figure {
    position: relative;
    width: 100%;
    margin: 0;
    left: 0;
    text-align: left;
    font-size: 0;
    animation: 20s slidy infinite;
}