JQuery Horizontal Slider v2 - Algebraic

Updated version of the HSlider that allows for more flexibility with math

HTML

<div class="showcase">
    <button class="show-back">&laquo; Back</button>
    <div class="show-window">
        <div class="show-container">
            <div class="show-el">The Invisibles</div>
            <div class="show-el">Doom Patrol</div>
            <div class="show-el">All-Star Superman</div>
            <div class="show-el">Flex Mentallo</div>
            <div class="show-el">Batman Inc</div>
            <div class="show-el">Starblazer</div>
            <div class="show-el">The Filth</div>
            <div class="show-el">Joe the Barbarian</div>
        </div>
    </div>
    <a class="show-forward" href="#">Forward &raquo;</a>
</div>

CSS

* {
    box-sizing: border-box
}

.showcase .show-window, .showcase .show-container {
    border:0;
    margin:0;
    padding:0;
}

.showcase .show-window {
    float:left;
    position: relative;
    overflow: hidden;
    height: 100px;

    /* width is very important. You SHOULD override it using "window" or "windowSteps" */
}

.showcase .show-container {
    position: absolute; 

    background:red;
}
.showcase .show-el {
    float: left;
    height: 100px;

    width: 100px; /* weigth is very important. You SHOULD override it using "el" */
}
.showcase .show-forward,
.showcase .show-back {
    float:left;
}




/* EXTRA STYLE */
.showcase .show-el {
    background:grey;
}
    padding: 4px; /* border and padding MUST be reported in "space" */

JavaScript

(function ( $ ) {
    $.fn.horizontalShowcase = function( options ) {
        var opts = $.extend( {}, $.fn.horizontalShowcase.defaults, options );

        var $showcase = this;

        // Specified element's width
        opts.space = opts.space || opts.spaceRight + opts.spaceLeft;
        $els = this.find(opts.elSelector);
        opts.el = (opts.el || $els.first().width()) + opts.space;
        $els.width(opts.el);

        // Specified window's width
        opts.window = opts.window || opts.windowEls * opts.el;
        this.find(opts.windowSelector).width(opts.window);

        // Calculated container's width
        var containerWidth = $els.length * opts.el;
        this.find(opts.containerSelector).width(containerWidth);

        // Calculated scroll limit (when you can see the last part of the container and it can turn around)
        var slideLimit = opts.window - containerWidth;

        var $btnBack = this.find(opts.btnBackSelector);
        $btnBack.click(function(event) {
            var $showContainer = $(this).parent().find(opts.containerSelector);
            var x = $showContainer.position();
            var y = x.left;
            var yy = y + opts.el * opts.step;

            if(opts.preventDefault) {
                event.preventDefault();
            }

            if(y >= 0 || opts.__animating === true) {
                return;
            }
            
            opts.__animating = true;
            opts.click.call(this, $showcase);
            $showContainer.animate({left: yy}, opts.delay, function() {
                opts.__animating = false;
                opts.done.call($btnBack, $showcase);
            });
        });

        var $btnForward = this.find(opts.btnForwardSelector);
        $btnForward.click(function(event) {
            var $showContainer = $(this).parent().find(opts.containerSelector);
            var x = $showContainer.position();
            var y = x.left;
            var yy = y - opts.el * opts.step;
        ...