JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<ul id="slider">
    <li><img src="http://lorempixel.com/700/300/food/1" alt="slider_1"/></li>
    <li><img src="http://lorempixel.com/700/300/food/2" alt="slider_2"/></li>
    <li><img src="http://placekitten.com/200/300" alt="slider_3"/></li>
    <li><img src="http://placekitten.com/200/300" alt="slider_4"/></li>
    <li><img src="http://placekitten.com/200/300" alt="slider_4"/></li>
</ul>

CSS

#sdSlider-wrapper {
    position: relative;
    text-align: center;
    z-index: 1;
}

#slider {
    overflow: hidden;
    position: relative;
    list-style: none outside none;
    padding: 0;
    margin: 0;
    white-space: nowrap;
    font-size: 0;
}

#slider > li {
    display: inline-block;
    position: relative;
    padding: 0;
    margin: 0;
}

#slider > li > img {
    margin: auto;
    display: inline-block;
    padding: 0;
    margin: 0;
}

#slider > li:not(.active) {
    /*display: none;*/
}

.control-wrapper {
    position: relative;
}

.control-wrapper span {
    border-radius: 50%;
    background-color: #ccc;
    width: 10px;
    height: 10px;
    display: inline-block;
    cursor: pointer;
    margin: 10px;
}

.control-wrapper span.active {
    background-color: #146;
}

.control-wrapper span:hover {
    border: 1px solid #146;
}

i.sdArrow {
    color: #ccc;
    position: absolute;
    z-index: 2;
    top: 50%;
    margin-top: -24px;
    margin-right: 10px;
    margin-left: 10px;
}

i.sdArrow:not(.disabled):hover {
    color: #146;
    cursor: pointer;
}

i.sdArrow.disabled {
    opacity: 0.25;
    pointer-events: none;
}

JavaScript

// PLUGIN DEFINITION (1/2)
;(function($) {

    $.fn.extend({
        sdSlider: function(options) {
            if (options && typeof(options) == 'object') {
                options = $.extend({}, $.sdSlider.defaults, options);
            }

            if($(this).length == 1) {
                new $.sdSlider(this, options);
            } else if($(this).length > 1) {
                console.error($.messages.severalElements);
            } else if($(this).length == 0) {
                console.error($.messages.zeroElement);
            }

            return this;
        }
    });

    $.messages = {
        imgAndLiMismatch: '[jQuery.sdSlider] Error: the number of list items and the number of <img src> mismatch.',
        severalElements: '[jQuery.sdSlider] Error: several DOM element have been detected. Are you sure you\'re using the right selector?',
        noImgFound: '[jQuery.sdSlider] Error: no <img> tag was found within the <li>.',
        zeroElement: '[jQuery.sdSlider] Error: couldn\'t find the slider. It seems you have targetted no element.'
    };


    $.sdSlider = function(el, option) {
        $(window).on('load', function() {

            var options  = option || $.sdSlider.defaults
            , $li = $(el).find('> li')
            , $img = $li.find('> img')
            , imgSrcs = []
            , imgHeights = []
            , imgWidths = []
            , $wrapper
            , i
            , index;

            if(!$img.length) {
                console.error($.messages.noImgFound);
                return;
            }
            $(el).find('> li:first-child').addClass('active');


            if(options.border && typeof(options.border) === 'object') {
                $img.css('border', options.border.width + 'px solid ' + options.border.color);
            }


            $img.each(function(i) {
                $(this).attr('data-image', i);
                imgSrcs.push($(this).attr('src'));
               ...