JSFiddle - React, Tailwind, and code Playground

by BurpmanJunior

HTML

<div class="ec-slider">
    <ul>
        <li>
            <img src="http://lorempixel.com/1280/800/city/" />
        </li>
        <li>
            <img src="http://lorempixel.com/1280/800/nature/" />
        </li>
        <li>
            <img src="http://lorempixel.com/1280/800/abstract/" />
        </li>
        <li>
            <img src="http://lorempixel.com/1280/800/city/" />
        </li>
        <li>
            <img src="http://lorempixel.com/1280/800/nature/" />
        </li>
        <li>
            <img src="http://lorempixel.com/1280/800/abstract/" />
        </li>
        <li>
            <img src="http://lorempixel.com/1280/800/city/" />
        </li>
        <li>
            <img src="http://lorempixel.com/1280/800/nature/" />
        </li>
        <li>
            <img src="http://lorempixel.com/1280/800/abstract/" />
        </li>
    </ul>
</div>

CSS

/* NOSCRIPT FALLBACKS */
 .ec-slider > ul {
    margin: 0 auto;
    padding: 0;
}
.ec-slider > ul > li {
    list-style-type: none;
    padding: 0;
    margin: 0;
    display: none;
}
.ec-slider > ul > li:first-child {
    display: block;
}
.ec-slider > ul > li img {
    max-width: 100%;
}

/* MAIN WRAP */
.ec-slider-init{
    
}
.ec-slider-init > ul.ec-slider-main{
    width: calc(100% - 75px);
    float: left;
}

/* THUMBS CONTROL */

JavaScript

var ecSlider = {
    init: function () {
        var _s = ecSlider;
        $('.ec-slider').each(function () {
            _s.buildDom($(this));
        });
    },
    buildDom: function (elem) {
        var list = $('> ul', elem).addClass('ec-slider-main').html();
        elem.addClass('ec-slider-init').append(
            $('<ul />').addClass('ec-slider-thumbs').html(list)
        );
    }
}

ecSlider.init();