JSFiddle - React, Tailwind, and code Playground

by Trisox

HTML

<script src="https://raw.github.com/stephband/jquery.event.move/master/js/jquery.event.move.js"></script>
<script src="https://raw.github.com/stephband/jquery.event.swipe/master/js/jquery.event.swipe.js"></script>
<script src="http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js"></script>
<div class="slider-container" >
    <div class="slider-wrapper">
        <div class="slider-item"  data-background="http://www.natuurinfoto.nl/testsite/wp-content/uploads/Banner6.jpg">
            <div class="slider-item-main">
                <div class="demoText">
                    <h1>1.0 Pellentesque vestibulum</h1>
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent viverra nisi vel sem tempus adipiscing.
                        Nam quis orci eros, vel pharetra massa. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
                        Maecenas nunc ipsum, placerat tempus mollis id, ullamcorper accumsan magna. Morbi vehicula lorem rutrum quam placerat ut sagittis velit tristique.
                        Sed id dolor ipsum. Donec sodales venenatis eros sit amet ultrices. Curabitur mollis mattis posuere. Praesent vitae sem vel nibh pellentesque vestibulum.
                        Mauris est nisl, pharetra id dapibus quis, auctor quis dui. Phasellus ac gravida turpis.
                        Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
                        Curabitur viverra elit ac lectus egestas ornare. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
                    </p>
                </div>
            </div>
        </div>
        <div class="slider-item"  data-background="http://www.natuurinfoto.nl/testsite/wp-content/uploads/Banner5.jpg">
            <div class="slider-item-main">
                <div class="demoText">
                    <h1>2.0...

CSS

.slider-container{
    position:relative;
    /*width:1000px;<-- use plugin sizeOfSlide*/
    height:400px;
}
    .slider-wrapper{
        width:100%;
        height:100%;
        position:relative;
    }
        .slider-item{
            position:relative;
            float:left;
            /*width:1000px;<-- use plugin sizeOfSlide*/
            height:100%;
            text-align:center;
        }
            .slider-item-main{
                padding:20px;
                position:absolute;
                top:5px;
                left:5px;
                right:5px;
                bottom:5px;
                overflow:hidden;
            }

            .demoText{
                background:#FFFFFF;
                bottom: 15px;
                color: #000000;
                padding: 10px;
                position: absolute;
                right: 10px;
                text-align: left;
                width: 450px;
                border-left: 5px solid #BCBE1F;
            }
            .demoText h1{
                font-size: 20px;
            }


.slider-nav {
    bottom: 10px;
    left: 30px;
    /*margin-left: 1000px;<-- use plugin*/
    position: absolute;
    z-index: 999;
}
    .slider-nav span{
        height: 29px;
        width: 29px;
        background:transparent url(http://www.philomade.nl/img/arrow-left.gif) no-repeat top left;
        cursor:pointer;
        z-index:100;
        display: inline-block;
    }

        .slider-nav span.slider-nav-next{
        background:transparent url(http://www.philomade.nl/img/arrow-right.gif) no-repeat top left;
        }
        .slider-nav-prev,
        .slider-nav-next{  margin-right: 10px;}

.slide-progress{
    /*margin-left: 1000px;<-- use plugin sizeOfSlide*/
    position: absolute;
    z-index: 999;
    height: 6px;
    /*width: 1000px;<-- use plugin sizeOfSlide*/
    bottom: 0;
    background: #69003c;
}
    .progressnumber{
        z-index:100;
        display: inline-block;
        float: right;...

JavaScript

jQuery.extend( jQuery.easing,{
    def: 'easeOutExpo',
    easeOutExpo: function (x, t, b, c, d) {
        return (t==d) ? b+c : c * (-Math.pow(2, -10 * t/d) + 1) + b;
    }
});

(function($) {
    $.fn.bindWithDelay = function( type, data, fn, timeout, throttle ) {
        if ( $.isFunction( data ) ) {
            throttle = timeout;
            timeout = fn;
            fn = data;
            data = undefined;
        }
        // Allow delayed function to be removed with fn in unbind function
        fn.guid = fn.guid || ($.guid && $.guid++);
        // Bind each separately so that each element has its own delay
        return this.each(function() {
            var wait = null;
            function cb() {
                var e = $.extend(true, { }, arguments[0]);
                var ctx = this;
                var throttler = function() {
                    wait = null;
                    fn.apply(ctx, [e]);
                };
                if (!throttle) { clearTimeout(wait); wait = null; }
                if (!wait) { wait = setTimeout(throttler, timeout); }
            }
            cb.guid = fn.guid;
            $(this).bind(type, data, cb);
        });
    }
})(jQuery);

;(function($, window, undefined) {
    var aux = {
        // navigates left / right
        navigate: function(dir, $el, $wrapper, opts, cache) {
            var slide = opts.slide,
                factor = 1,
                idxClicked = 0;

            if (cache.expanded) {
                slide = 1; // slide is always 1 in full mode
                factor = 3; // the width of the expanded item will be 3 times bigger than 1 collapsed item
                idxClicked = cache.idxClicked; // the index of the clicked item
            }

            // clone the elements on the right / left and append / prepend them according to dir and slide
            if (dir === 1) {
                var $first = $wrapper.children().eq(2);
                var current =...