JSFiddle - React, Tailwind, and code Playground

by oceog

HTML

<script src="http://malsup.github.com/jquery.cycle.all.js"></script>
<div id="container">


            <div id="box1" class="box">
            <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRljbM2tRJ0RTYjzE9hMX1e1huNwISG7cUpDTfbp6IAcfUtWoLpdqHdJA"/>
            <img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcS1isjNP5KormV8QMRVtPJEFQAD3oCVcMiuOPiQ9dBsQp512J1biSxZ39Q" alt="images/van.jpg"/>
            </div>


            <div id="box2" class="box">
            <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRljbM2tRJ0RTYjzE9hMX1e1huNwISG7cUpDTfbp6IAcfUtWoLpdqHdJA"/>
            <img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcS1isjNP5KormV8QMRVtPJEFQAD3oCVcMiuOPiQ9dBsQp512J1biSxZ39Q" alt="images/van.jpg"/>
            </div>

            <div id="box3" class="box">
            <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRljbM2tRJ0RTYjzE9hMX1e1huNwISG7cUpDTfbp6IAcfUtWoLpdqHdJA"/>
            <img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcS1isjNP5KormV8QMRVtPJEFQAD3oCVcMiuOPiQ9dBsQp512J1biSxZ39Q" alt="images/van.jpg"/>
            </div>
    </div>

CSS

#container {
position: absolute;
width: 800px;
height: 200px;
margin-top: 40px;
}


.box {

width: 260px;
height: 200px;
float: left;
margin-right: 4px;
}

JavaScript

$(function() {
    $('.box').each(function() {
        var $this = $(this);
        $this.cycle({
            fx: 'fade',
            speed: 300,
            timeout: 0,
            next: $this,
            pause: 1
        });
    });
});