JSFiddle - React, Tailwind, and code Playground

by mkerny45

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Easy Slider jQuery Plugin Demo</title>
    <meta http-equiv="content-type" content="text/html;charset=UTF-8" />    
    <script type="text/javascript">
        $(document).ready(function(){    
                jQuery("#slider").easySlider({
            auto:             true, 
            continuous:     true,
            prevId:         'left-arrow',
            prevText:         'Previous',
            nextId:         'right-arrow',    
            nextText:         'Next',
            controlsShow:    true,
            controlsBefore:    '',
            controlsAfter:    '',    
            controlsFade:    true,
            firstId:         'firstBtn',
            firstText:         'First',
            firstShow:        false,
            lastId:         'lastBtn',    
            lastText:         'Last',
            lastShow:        false,                
            vertical:        false,
            speed:             3200,
            pause:            5000,
            numeric:         false,
            numericId:         'controls',
            hoverpause:     true
          });
        });    
    </script>
    
    
</head>
<body>

<div id="container">

    <div id="content">
    
        <div id="slider">
            <ul>                                  
                <li><img src="http://placehold.it/940x400/000" alt="" /></li>                                    <li><img src="http://placehold.it/940x400/eee" alt="" /></li>
                <li><img src="http://placehold.it/940x400/555" alt="" /></li>
                <li><img src="http://placehold.it/940x400/010101" alt="" /></li>
<li><img src="http://placehold.it/940x400" alt="" /></li>
        </div>
            
        
    
        
    </div>

</div>
<script type="text/javascript">
   ...

CSS

body {
        background:#fff url(../images/bg_body.gif) repeat-x;
        font:80% Trebuchet MS, Arial, Helvetica, Sans-Serif;
        color:#333;
        line-height:180%;
        margin:0;
        padding:0;
        text-align:center;
    }
    h1{
        font-size:180%;
        font-weight:normal;
        margin:0;
        padding:0 20px;
        }
    h2{
        font-size:160%;
        font-weight:normal;
        }    
    h3{
        font-size:140%;
        font-weight:normal;
        }    
    img{border:none;}
    pre{
        display:block;
        font:12px "Courier New", Courier, monospace;
        padding:10px;
        border:1px solid #bae2f0;
        background:#e3f4f9;    
        margin:.5em 0;
        width:674px;
        }    
            
    /* image replacement */
        .graphic, #prevBtn, #nextBtn, #slider1prev, #slider1next{
            margin:0;
            padding:0;
            display:block;
            overflow:hidden;
            text-indent:-8000px;
            }
    /* // image replacement */
            
    #container{    
        position:relative;
        width:100%;
        }    
    #header{
        height:80px;
        line-height:80px;
        background:#5DC9E1;
        color:#fff;
        }                
    #content{
        position:relative;
        }            

/* Easy Slider */
    #slider{
    padding:0px 0px 0px 0px;
    display: block;
    height: 100% !important;
    width:100% !important;
}

#slider li{
    position: relative;
    width:696px;
    height:241;
    overflow:hidden; 
}
#slider li img{
    /*position:absolute;*/
    top:0;
    width:100%;
}

    #slider ul, #slider li,
    #slider2 ul, #slider2 li{
        margin:0;
        padding:0;
        list-style:none;
        }
    #slider2{margin-top:1em;}
    #slider li, #slider2 li{ 
        /* 
            define width and height of list item (slide)
            entire slider area will adjust according to the parameters provided here
        */ 
...

JavaScript

/*
 *     Easy Slider 1.7 - jQuery plugin
 *    written by Alen Grakalic    
 *    http://cssglobe.com/post/4004/easy-slider-15-the-easiest-jquery-plugin-for-sliding
 *
 *    Copyright (c) 2009 Alen Grakalic (http://cssglobe.com)
 *    Dual licensed under the MIT (MIT-LICENSE.txt)
 *    and GPL (GPL-LICENSE.txt) licenses.
 *
 *    Built for jQuery library
 *    http://jquery.com
 *
 */

(function($) {

    $.fn.easySlider = function(options) {

        // default configuration properties
        var defaults = {
            prevId: 'prevBtn',
            prevText: 'Previous',
            nextId: 'nextBtn',
            nextText: 'Next',
            controlsShow: true,
            controlsBefore: '',
            controlsAfter: '',
            controlsFade: true,
            firstId: 'firstBtn',
            firstText: 'First',
            firstShow: false,
            lastId: 'lastBtn',
            lastText: 'Last',
            lastShow: false,
            vertical: false,
            speed: 2100,
            auto: true,
            pause: 500,
            continuous: true,
            numeric: false,
            numericId: 'controls',
            pagination: '#pag a'

        };

        var options = $.extend(defaults, options);

        this.each(function() {
            var obj = $(this);
            var s = $("li", obj).length;
            var w = $("li", obj).width();
            var h = $("li", obj).height();
            var clickable = true;
            obj.width(w);
            obj.height(h);
            obj.css("overflow", "hidden");
            var ts = s - 1;
            var t = 0;
            $("ul", obj).css('width', s * w);


            if (options.continuous) {
                $("ul", obj).prepend($("ul li:last-child", obj).clone().css("margin-left", "-" + w + "px"));
                $("ul", obj).append($("ul li:nth-child(2)", obj).clone());
                $("ul", obj).css('width', (s + 1) * w);
            };

            if (!options.vertical)...