Question

我正在使用旧版本的Slidedeck插件（v.1.4.5），我正在使用其中一个皮肤的javascript问题。更确切地说，水平滑块缝合在一起，我无法弄清楚如何解决这个问题。我希望每个幻灯片都是独立的，在活动幻灯片上看不到下一张或上一张幻灯片中的任何内容。

您可以在下面的屏幕截图中看到中间幻灯片包含上一张和下一张幻灯片中的可见内容，显然我不希望这些内容可见。

enter image description here

我应该提一下，我对javascript / jQuery的了解非常有限，我怀疑它是一个js问题，因为所有皮肤的CSS都是相同的 - 唯一的变量是每个皮肤使用的脚本。

您可以在this website上看到滑块行为，以下是用于滑块外观的完整脚本。我将不胜感激任何帮助。要更改幻灯片，请单击左侧或右侧的每个幻灯片箭头，或者您可以使用键盘上的方向键。

(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);

Javascript水平滑块无法正常工作

1 个答案: