Javascript水平滑塊不起作用

Question

我正在使用舊版本的Slidedeck插件（v.1.4.5），並且我使用的一種皮膚遇到了JavaScript問題。 更准確地說，水平滑軌是縫合在一起的，我不知道該如何解決。 我希望每個幻燈片都是獨立的，而下一個或上一個幻燈片的任何內容都不會在活動幻燈片上顯示。

您可以從下面的屏幕截圖中看到，中間的幻燈片具有上一張和下一張幻燈片的可見內容，顯然我不希望看到該內容。

我應該提及的是，我對javascript / jQuery的了解非常有限，並且我懷疑這是一個js問題，因為所有皮膚的CSS都是相同的-唯一的變量是每個皮膚使用的腳本。

您可以在此網站上看到滑塊行為，下面是用於滑塊皮膚的完整腳本。 我將不勝感激。 要更改幻燈片，請從左側或右側單擊每個幻燈片箭頭，或者可以使用鍵盤上的方向鍵。

(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

以下內容可能會起作用，但是如果沒有您要嘗試執行的示例，很難進行測試。

我所做的是在ns變量中添加了一個唯一的數字（我假設是命名空間。）此數字傳遞給每個函數的回調。 （ 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);