Scroller (jQuery-UI) 2

HTML

<div id="tabs-wrap">
            <ul id="tabs-ul">
                
            </ul>
        </div>
        <div id="tab-content-wrap">
            
        </div>
        
        <div id="tab-content-template" class="tab-content">
        <button class="left"> < </button>
      <div class="scroller">
        <ul class="scroll-content">
            
        </ul>
      </div>
      <button class="right"> > </button>
      </div>

CSS

ul {
                list-style-type:none;
            }
            ul li {
                display: inline-block;
            }
            .scroller {
                width: 500px;
                height: 60px;
                max-height:60px;
                overflow:hidden;
            }
            .scroll_content {
                display:inline-block;
                max-height: 60px;
            }

JavaScript

(function( $ ) {
    
    var defaults = {
        scroller : ".scroller",
        panels : "li",
        direction : "vertical",
        leftTrigger : ".left",
        rightTrigger : ".right",
        seamless : true,
        step : 500
    }
    
    var methods = {
        init : function ( options) {
            var that = this;
            var data = $(that).data('scroller');
            
            if ( !data ) {
                $(this).data('scroller', options);
                $(this).data("scroller").target = this;
            } 
            else {
                console.log("else");
                console.log( data );
            }
            methods.fixLayout(that);
    
            $(options.target).find(options.leftTrigger).on("click", function(e){
                //console.log($(options.target).find(options.leftTrigger));
                $(options.target).scrollLeft(options.step);
            })
        },
        
        fixLayout : function(elm) {
            var options = $(elm).data('scroller');

            //console.log("options.target");
            //console.log(options.target);
            //console.log($(options.target).find(options.panels));

            var gridWidth = ( $(options.target).width() 
                         / 
                     $(options.target).find(options.panels).width()
                     );
           
            var gridHeight = ( $(options.target).height() 
                         / 
                     $(options.target).find(options.panels).height()
                     );
            console.log("gridWidth = " + gridWidth + " elms and gridHeight = " + gridHeight );
            
            
            if ( options.type == "horizontal" ) {
                 console.log("hor height:");
                 console.log($(options.target).height());
                console.log($(options.target).children("ul").children("li").height());                                             
                var new_width =...