JSFiddle - React, Tailwind, and code Playground

by isimpledesign

HTML

<div class="scrollWrapperAll"> 
<div class="scrollWrapper">
</div>
<div class="scrollNav">
<a href="#" class="left" id="left">left</a>
<p class="count">1/1</p>
<a href="#" class="right" id="right">right</a>
</div>
</div>

CSS

body {font-family:arial;font-style:bold}
      a {color:#666; text-decoration:none}
        li { list-style:none; }
        ul { margin:0; padding:0; position:absolute;}
        .scrollWrapperAll { width:auto; height:auto; }
        .scrollWrapperAll .scrollNav { width:auto; height:auto; margin:auto; }
        .scrollWrapperAll .scrollNav a.left { float:left; }
        .scrollWrapperAll .scrollNav a.right { float:right; }
        .scrollWrapperAll .scrollNav p {width: 20px;height: auto;margin: auto;float: left;margin-left: 48%;}
        .scrollWrapper { margin:0; padding:0; position:relative;overflow:auto;}
        
        .scrollWrapper ul#scroll li h2 { margin:0; padding:0; font-size:14px; }
        .scrollWrapper ul#scroll li p { margin:0; padding:0; font-size:12px; }
        .scrollWrapper ul#scroll li img { margin:auto; }

JavaScript

(function($){
    $.fn.extend({ 
        //plugin name - scrollMe
        scrollMe: function(options) {
 
            var defaults = {
                scrollWidth: 520,
                scrollHeight: 100,
                containerWidth: 100,
                wrapperHeight: 300,
                fl: "none",
                speed: "slow", 
                evenColor: '#ccc',
                oddColor: '#eee',
            };
             
            var options = $.extend(defaults, options);
            
            var elNums = $('li').length;
            
            var cw = elNums * options.scrollHeight;

            $(".scrollWrapperAll").css('height', options.wrapperHeight + "px");
            $(".scrollWrapper").css('height', options.wrapperHeight + "px");
            $(".scrollWrapper").css('overflow', "hidden");
            $("ul").css('height', cw + "px");
            $("ul").css('width', options.scrollWidth + "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);                   
                   
                    var count = 2;
                  $("a#left").click(function() {
                  
                      var position = $("ul").position();
                      
                      console.log( "pos top " + position.top);
                      
                       var scrollLeft = position.top - options.wrapperHeight;
                       
                       console.log( "Scroll top " + scrollLeft);
                      
                      
                      
                ...