JSFiddle - React, Tailwind, and code Playground

by nachiket

HTML

<div>
    <ul id="scroller">
            <li><img src="http://logicbox.net/jquery/simplyscroll/assets/20080608_9N3H5GYL_tb.jpg" width="290" height="200"></li>
    </ul>
</div>    

<div>
    <button id="moveLeft">Resume</button>
    <button id="moveRight">Stop</button>
</div>

CSS

/* Container DIV - automatically generated */
.simply-scroll-container { 
    position: relative;
}

/* Clip DIV - automatically generated */
.simply-scroll-clip { 
    position: relative;
    overflow: hidden;
    z-index: 2;
}

/* UL/OL/DIV - the element that simplyScroll is inited on
Class name automatically added to element */
.simply-scroll-list { 
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    overflow: hidden;
    margin: 0;
    padding: 0;
    list-style: none;
}
    
.simply-scroll-list li {
    padding: 0;
    margin: 0;
    list-style: none;
}
    
.simply-scroll-list li img {
    border: none;
    display: block;
}

/* Custom class modifications - adds to / overrides above

.simply-scroll is default base class */

/* Container DIV */
.simply-scroll { 
    width: 125px;
    height: 200px;
    margin-bottom: 1em;
}

/* Clip DIV */
.simply-scroll .simply-scroll-clip {
    width: 125px;
    height: 200px;
}
    
/* Explicitly set height/width of each list item */    
.simply-scroll .simply-scroll-list li {
    float: left; /* Horizontal scroll only */
    width: 290px;
    height: 200px;
}

JavaScript

(function($) {

$.fn.simplyScroll = function(options,args) {
    
    if (options && typeof(options) == 'object') {
                options = $.extend( {}, $.simplyScroll.defaults, options );
    }
    this.o = $.extend({}, $.simplyScroll.defaults, options || {});
    return this.each(function() {
        new $.simplyScroll(this,options,args);
    });
};
    
$.simplyScroll = function(el,o,args) {
    if (o && typeof(o) == 'string') {
           if ( this.methods[o] ) {   
             return this.methods[ o ](args);//.apply( this, Array.prototype.slice.call( arguments, 1 ));
            }
           return;
    }
    
    var self = this;
    this.o = $.extend({}, $.simplyScroll.defaults, o || {});
    this.auto = this.o.autoMode!=="off" ? true : false;
    
    //called on ul/ol/div etc
    this.$list = $(el);
    
    //generate extra markup
    this.$list.addClass('simply-scroll-list')
        .wrap('<div class="simply-scroll-clip"></div>')
        .parent().wrap('<div class="' + this.o.className + ' simply-scroll-container"></div>');
    
    if (!this.o.auto) { //button placeholders
        this.$list.parent().parent()
        .prepend('<div class="simply-scroll-forward"></div>')
        .prepend('<div class="simply-scroll-back"></div>');
    }
    
    //load image data
    if (this.o.flickrFeed) {
        $.getJSON(this.o.flickrFeed + "&format=json&jsoncallback=?",
            function(data) {
                json = [];
                $.each(data.items, function(i,item) {
                    json.push({
                        "src": item.media.m,
                        "title": item.title,
                        "link": item.link
                    });
                });
                self.renderData(json);
            }
        );
    } else if (this.o.localJsonSource) {
        $.getJSON(this.o.localJsonSource,
            function(json) {
                self.renderData(json);
            }
        );
    } else {
        if...