JSFiddle - React, Tailwind, and code Playground

by adishardis

HTML

<div class="ui-widget-content hoverscroll horizontal">
    <div class="listcontainer">
        <ul id="my-list" class="list ui-helper-clearfix">
            <li class="item"><img style="width:100px;height:100px;" src="http://hardis.synology.me/portalen/foretag/Effectris/Presentationer/Effectris/MCI%2096/enheter/1.png" /></li>
            <li class="item"><img  style="width:100px;height:100px;" src="http://hardis.synology.me/portalen/foretag/Effectris/Presentationer/Effectris/MCI%2096/enheter/1.png" /></li>
            <li class="item"><img  style="width:100px;height:100px;" src="http://hardis.synology.me/portalen/foretag/Effectris/Presentationer/Effectris/MCI%2096/enheter/1.png" /></li>
            <li class="item"><img  style="width:100px;height:100px;" src="http://hardis.synology.me/portalen/foretag/Effectris/Presentationer/Effectris/MCI%2096/enheter/1.png" /></li>
            <li class="item"><img  style="width:100px;height:100px;" src="http://hardis.synology.me/portalen/foretag/Effectris/Presentationer/Effectris/MCI%2096/enheter/1.png" /></li>
            <li class="item"><img  style="width:100px;height:100px;" src="http://hardis.synology.me/portalen/foretag/Effectris/Presentationer/Effectris/MCI%2096/enheter/1.png" /></li>
            <li class="item"><img  style="width:100px;height:100px;" src="http://hardis.synology.me/portalen/foretag/Effectris/Presentationer/Effectris/MCI%2096/enheter/1.png" /></li>
            <li class="item"><img  style="width:100px;height:100px;" src="http://hardis.synology.me/portalen/foretag/Effectris/Presentationer/Effectris/MCI%2096/enheter/1.png" /></li>
            <li class="item"><img  style="width:100px;height:100px;" src="http://hardis.synology.me/portalen/foretag/Effectris/Presentationer/Effectris/MCI%2096/enheter/1.png" /></li>
            <li class="item"><img  style="width:100px;height:100px;" src="http://hardis.synology.me/portalen/foretag/Effectris/Presentationer/Effectris/MCI%2096/enheter/1.png" /></li>
       ...

CSS

/**
 * HoverScroll Style Sheet
 *
 * @author RasCarlito <[email protected]>
 * @version 0.2.4
 * @revision 21
 */

/* Main container */
div.hoverscroll {
    position:relative;
}


/* List container */
div.hoverscroll div.listcontainer {
    overflow:hidden;
}
div.hoverscroll div.fixed-listcontainer {
    overflow: hidden;
    float: left;
}

/* Actual list containing items */
div.hoverscroll ul.list {
    list-style:none;
    margin:0;
    padding:0;
}

/* Items contained in the list */
div.hoverscroll ul.list li.item {
    display:block;
    padding:0;
}
div.hoverscroll.horizontal ul.list li.item {
    float:left;
}
div.hoverscroll.horizontal.rtl ul.list li.item {
    float: right;
}



/* Arrows */
div.hoverscroll div.arrow {
    position:absolute;
    float:none;
    background-color:#ccc;
    background-position:center;
    background-repeat:no-repeat;
    opacity:0.8;
    filter:alpha(opacity=80);
}
div.hoverscroll div.fixed-arrow {
    display: block;
    float: left;
    background-color: #ccc;
    background-position: center;
    background-repeat: no-repeat;
}

div.hoverscroll div.arrow.left,
div.hoverscroll div.arrow.right,
div.hoverscroll div.fixed-arrow.left,
div.hoverscroll div.fixed-arrow.right {
    top:0px;
    width:40px;
    height:100%;
}
div.hoverscroll div.arrow.left,
div.hoverscroll div.fixed-arrow.left {
    left:0px;
    background-image:url('gfx/arrow-left-small.png');
}
div.hoverscroll div.arrow.right,
div.hoverscroll div.fixed-arrow.right {
    right:0px;
    background-image:url('gfx/arrow-right-small.png');
}

div.hoverscroll div.arrow.top,
div.hoverscroll div.arrow.bottom,
div.hoverscroll div.fixed-arrow.top,
div.hoverscroll div.fixed-arrow.bottom {
    left:0px;
    width:100%;
    height:40px;
}
div.hoverscroll div.arrow.top,
div.hoverscroll div.fixed-arrow.top {
    top:0px;
    background-image:url('gfx/arrow-up-small.png');
    
}
div.hoverscroll div.arrow.bottom,
div.hoverscroll div.fixed-arrow.bottom {
    bottom:0px;
   ...

JavaScript

$(document).ready(function() {
    $('#my-list').hoverscroll();
});

/**
 * HoverScroll jQuery Plugin
 *
 * Make an unordered list scrollable by hovering the mouse over it
 *
 * @author RasCarlito <[email protected]>
 * @version 0.2.4
 * @revision 21
 *
 * 
 *
 * FREE BEER LICENSE VERSION 1.02
 *
 * The free beer license is a license to give free software to you and free
 * beer (in)to the author(s).
 * 
 *
 * Released: 09-12-2010 11:31pm
 *
 * Changelog
 * ----------------------------------------------------
 *
 * 0.2.4    - Added "Right to Left" option, only works with horizontal lists
 *          - Optimization of arrows opacity control (Thanks to Josef Körner)
 *
 * 0.2.3    - Added fixed arrows option
 *          - Binded startMoving and stopMoving functions to the HoverScrolls HTML object for external access
 *
 * 0.2.2    Bug fixes
 *          - Backward compatibility with jQuery 1.1.x
 *          - Added test file to the archive
 *          - Bug fix: The right arrow appeared when it wasn't necessary (thanks to <admin at unix dot am>)
 *        
 * 0.2.1    Bug fixes
 *          - Backward compatibility with jQuery 1.2.x (thanks to Andy Mull for compatibility with jQuery >= 1.2.4)
 *          - Added information to the debug log
 * 
 * 0.2.0    Added some new features
 *          - Direction indicator arrows
 *          - Permanent override of default parameters
 * 
 * 0.1.1    Minor bug fix
 *          - Hover zones did not cover the complete container
 *
 *          note: The css file has not changed therefore it is still versioned 0.1.0
 *
 * 0.1.0    First release of the plugin. Supports:
 *          - Horizontal and vertical lists
 *          - Width and height control
 *          - Debug log (doesn't show useful information for the moment)
 */
 
(function($) {

/**
 * @method hoverscroll
 * @param    params {Object}  Parameter list
 *     params = {
 *         vertical {Boolean},    // Vertical list or not ?
 *         width {Integer},    //...