Javascript horizontal slider not working

Question

I'm using an old version of the Slidedeck Plugin (v.1.4.5) and I have a javascript problem with one of the skins I'm using. More precisely, the horizontal slides are stitched together and I can't figure out how to fix this. I want each slide to be independent, without any content from the next or previous slide to be seen on the active slide.

You can see in the screenshot from below that the middle slide has visible content from the previous and next slide, which obviously I don't want to be visible.

I should mention that I have very limited knowledge of javascript / jQuery, and I suspect it's a js problem because the CSS is the same for all skins - the only variable is the script used by each skin.

You can see the slider behavior on this website and below is the full script used for the slider skin. I would appreciate any help on this. To change the slides click on each slide arrow from left or right side, or you can use the directional keys on the keyboard.

(function($){
SlideDeckSkin['fullwidth-sexy'] = function(slidedeck){
    var ns = 'fullwidth-sexy';
    var elems = {};
        elems.slidedeck = $(slidedeck);
        elems.frame = elems.slidedeck.closest('.skin-' + ns);

    // Disable spines as this skin is not meant to function with spines on
    elems.slidedeck.slidedeck().setOption('hideSpines', true);

    elems.frame.append('<a href="#prev" class="sd-' + ns + '-nav prev">Previous</a><a href="#next" class="sd-' + ns + '-nav next">Next</a>');
    elems.slidedeck.append('<div class="' + ns + '-mask left"></div><div class="' + ns + '-mask right"></div>');

    elems.frame.find('.sd-' + ns + '-nav').bind('click', function(event){
        event.preventDefault();
        var $this = $(this);
        elems.slidedeck.slidedeck().options.pauseAutoPlay = true;
        if($this.hasClass('prev')){
            elems.slidedeck.slidedeck().prev();
        } else {
            elems.slidedeck.slidedeck().next();
        }
    });
};

$(document).ready(function(){
    $('.skin-fullwidth-sexy .slidedeck').each(function(){
        if(typeof($.data(this, 'skin-fullwidth-sexy')) == 'undefined' || $.data(this, 'skin-fullwidth-sexy') == null){
            $.data(this, 'skin-fullwidth-sexy', new SlideDeckSkin['fullwidth-sexy'](this));
        }
    });
});
})(jQuery);

Answer 1

The following might work, but it is hard to test without an example of what you are trying to do.

What I did is added a unique number to the ns variable (for namespace I assume.) This number is passed to the callback of the each function. ( doc )

(function($){
SlideDeckSkin['fullwidth-sexy'] = function(slidedeck,uniqueName){
    var ns = 'fullwidth-sexy'+uniqueName;
    var elems = {};
        elems.slidedeck = $(slidedeck);
        elems.frame = elems.slidedeck.closest('.skin-' + ns);

    // Disable spines as this skin is not meant to function with spines on
    elems.slidedeck.slidedeck().setOption('hideSpines', true);

    elems.frame.append('<a href="#prev" class="sd-' + ns + '-nav prev">Previous</a><a href="#next" class="sd-' + ns + '-nav next">Next</a>');
    elems.slidedeck.append('<div class="' + ns + '-mask left"></div><div class="' + ns + '-mask right"></div>');

    elems.frame.find('.sd-' + ns + '-nav').bind('click', function(event){
        event.preventDefault();
        var $this = $(this);
        elems.slidedeck.slidedeck().options.pauseAutoPlay = true;
        if($this.hasClass('prev')){
            elems.slidedeck.slidedeck().prev();
        } else {
            elems.slidedeck.slidedeck().next();
        }
    });
};

$(document).ready(function(){
    $('.skin-fullwidth-sexy .slidedeck').each(function(n){
        if(typeof($.data(this, 'skin-fullwidth-sexy')) == 'undefined' || $.data(this, 'skin-fullwidth-sexy') == null){
            $.data(this, 'skin-fullwidth-sexy', new SlideDeckSkin['fullwidth-sexy'+n](this,n));
        }
    });
});
})(jQuery);