0

Slidedeck プラグインの古いバージョン (v.1.4.5) を使用していますが、使用しているスキンの 1 つに JavaScript の問題があります。より正確には、水平方向のスライドがつなぎ合わされており、これを修正する方法がわかりません。次または前のスライドのコンテンツがアクティブなスライドに表示されないように、各スライドを独立させたいと考えています。

下のスクリーンショットで、中央のスライドに前のスライドと次のスライドのコンテンツが表示されていることがわかりますが、これは明らかに表示したくありません。

ここに画像の説明を入力

私は javascript / jQuery の知識が非常に限られていることに言及する必要があります。CSS はすべてのスキンで同じであるため、js の問題であると思われます。唯一の変数は、各スキンで使用されるスクリプトです。

この Web サイトでスライダーの動作を確認できます。以下は、スライダー スキンに使用される完全なスクリプトです。これについて何か助けていただければ幸いです。スライドを変更するには、左側または右側から各スライド矢印をクリックするか、キーボードの方向キーを使用できます。 

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

1 に答える 1

1

以下はうまくいくかもしれませんが、あなたがやろうとしていることの例なしでテストするのは難しいです.

私がしたことは、ns変数に一意の番号を追加することです (名前空間のためだと思います)。この番号は、各関数のコールバックに渡されます。(ドキュメント)

(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);
于 2012-07-01T19:50:19.997 に答える