JSFiddle - React, Tailwind, and code Playground

by isimpledesign

HTML

<div class="scrollWrapper">
<ul id="scroll">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
    <li>11</li>
    <li>12</li>
      <li>13</li>
    <li>14</li>
    <li>15</li>
    <li>16</li>
    <li>17</li>
    <li>18</li>
    <li>19</li>
    <li>20</li>
    <li>21</li>
    <li>21</li>
    <li>23</li>
    <li>24</li>
</ul>
</div>
<a href="#" class="left" id="left">left</a>
<a href="#" class="right" id="right">right</a>

CSS

body {font-family:arial;font-style:bold}
      a {color:#666; text-decoration:none}
        #menu {list-style:none;width:160px;padding-left:10px;}
        #menu li {margin:0;padding:5px;cursor:hand;cursor:pointer}
        li { list-style:none; }
        ul { margin:0; padding:0; position:absolute;}
        .scrollWrapper { margin:0; padding:0; position:relative;overflow:auto;}

JavaScript

(function($){
    $.fn.extend({ 
        //plugin name - animatemenu
        animateMenu: function(options) {
 
            var defaults = {
                scrollWidth: 100,
                scrollHeight: 100,
                containerWidth: 100,
                wrapperWidth: 1200,
                fl: "left",
                evenColor: '#ccc',
                oddColor: '#eee',
            };
             
            var options = $.extend(defaults, options);
            
            var elNums = $('li').length;
            
            var cw = elNums * options.scrollWidth;
            
            console.log(cw);
            
            $(".scrollWrapper").scrollLeft(3000);
            
            $(".scrollWrapper").css('width', options.wrapperWidth + "px");
            $(".scrollWrapper").css('height', options.scrollHeight + "px");
            $(".scrollWrapper").css('overflow', "scroll");
            $("ul").css('width', cw + "px");
            $("ul").css('height', options.scrollHeight + "px");

         
            return this.each(function() {
                  var obj = $(this);                

                  $("li", obj).css('width', options.scrollWidth + "px");
                  $("li", obj).css('height', options.scrollHeight + "px");
                  $("li", obj).css('float', options.fl);                  
                  $("li:even", obj).css('background-color', options.evenColor);               
                  $("li:odd", obj).css('background-color', options.oddColor);                   
                   
                   
                  $("a#left").click(function() {
                  
                      var position = $("ul").position();
                      
                      console.log( "pos left " + position.left);
                      
                       var scrollLeft = position.left - options.wrapperWidth;
                       
                       console.log( "Scroll left " + scrollLeft);
            ...