JSFiddle - React, Tailwind, and code Playground

by andrey90vs

HTML

<div id="slideshow">
        <div class="slide-item"><img src="http://dummyimage.com/300&text=1" /></div>
        <div class="slide-item"><img src="http://dummyimage.com/300&text=2" /></div>
        <div class="slide-item"><img src="http://dummyimage.com/300&text=3" /></div>
        <div class="slide-item"><img src="http://dummyimage.com/300&text=4" /></div>
        <div class="slide-item"><img src="http://dummyimage.com/300&text=5" /></div>
        <!-- <div class="slide-item">content slide</div> -->
    </div>

CSS

*{
    margin:0;
    padding: 0;
} 
html,body{width:100%;height:100%;}
.clearfix{
    clear: both;
}
.slide-item{
    position: absolute;
    display: block;
    z-index: 50;
    top:0;
    img{
        width:100%;
        height:100%;
    }
}
#slideshow{
    position: relative;
    margin:0 auto;
    overflow: hidden;
}
.active{
    z-index: 100 !important;
}
#settings-bar{
    display: none;
    width:100%;
    height:auto;
    position:relative;
    margin:0 auto;
    background-color:rgba(0,0,0,0.2);
    z-index: 999;
    font-size:10px;
    text-align: center;
    color:#fff;
}

.settings{
    top:0;
    left:0;
    display: block;
    position:absolute;
    width: 60px;
    height:20px;
    font-size:12px;
    color:black;
    z-index:9999;
    opacity: 0.1;
    z-index:999;
    transition: all .5s ease-in-out;
}

.settings-item:first-child{
    margin-left:65px;
    border-left:1px solid grey;

}

.settings-item{
    display:inline-block;
    float:left;
    border-right:1px solid grey;
    margin:0 4px;
    text-align: center;
    width: 20%;
    height:auto;
}

.settings:hover{
    opacity: 0.7;
}

.options{
    display:block;
    background-color:rgba(0,0,0,0.5);
    height:25px;
}
.options-item{
    margin-top:5px;
    display: inline-block;
    float:left;
    margin-right:3px;
    width:30%;
    height:auto;
    .content{
        color:black;
    }
}
.arrows{
    top:0;
    width:50%;
    height:100%;
    position:absolute;
    z-index: 999;
    opacity: 0.2;
    cursor: pointer;
}
.arrows:hover{
    opacity: 0.1;
}
#left{
    left:0;
    background-color: rgba(244, 168, 4,1);
}
#right{
    right:0;
    background-color: rgba(2, 244, 30,1);
}
.icon{
    position: absolute;
    width:100px;
    height:100px;
    top:50%;
    transform:translateY(-50%);
}
.icon-left{background-image:url(http://i.share.pho.to/8806ac39_o.png);left:0;}
.icon-right{background-image:url(http://i.share.pho.to/54fda87b_o.png);right:0;}

JavaScript

'use strict';
(function ( $ ) {


    $.fn.slideshow = function(options) {

        this.activeSlide = 0;
        this.animateDir = 'left';
        var autoPlayParam = {
                timer: 2000,
                dir: 'top'
            },
            defaults = {
                slideWidth: '100%',
                slideHeight: '200px'
            },
            _this = this,
            settings = $.extend(defaults, options);

        function init(){

             if($('#set-autoplay').prop('checked') == false){
                    $('.op-autoplay').hide();
                }


            $('#slideshow, #slideshow .slide-item').css({
                width: settings.slideWidth,     
                height: settings.slideHeight
            });

            _this.slideCount = $('#slideshow .slide-item').length;

            $('#slideshow .slide-item').each(function(){
                var ind = $(this).index() + 1;
                $(this).attr('data-unic','slide-'+ind);
            });

            $('#slideshow .slide-item').eq(_this.activeSlide).addClass('active');

            $('#slideshow .slide-item').on('click', function(){
                changeSlide(1);
            });

            $('#set-autoplay').on('change', function(){

                $('.op-autoplay').show();


                if($('#set-autoplay').prop('checked') == true){
                    //stopAutoplay();
                    autoPlay(autoPlayParam);
                        $('.op-autoplay').show('slow');
                }else{
                    //autoPlay(autoPlayParam);
                    stopAutoplay();
                        $('.op-autoplay').show('slow');
                }
            });

            $(document).on('keyup', function(e){
                stopAutoplay();
                switch(e.keyCode){
                    case 37: 
                        changeSlide(-1,e.keyCode);
                        break;
                    case 38: 
                       ...