0

私はRoyalsliderを使用しています。親指の1つをクリックするか、次のボタンを押す/矢印キーを使用する/スワイプすると、サムネイルがクラスを変更して「強調表示された」サムネイルになる外部サムネイルリストを設定しようとしています。サムネイルをクリックするとうまく機能しますが、スワイプ/キーボード/または次/前の矢印では機能しません。

このためのスクリプトを作成するためにパブリック メソッドを使用しようとしましたが、苦労しています:スライド id
mySliderInstance.sliderWidth // スライダーの幅 mySliderInstance.sliderHeight // スライダーの高さ

この例を見ると

<script>
//Example, replacing arrows with arrow symbols and adding "1 / 5" naigation
var mySliderInstance = $('#sliderId').royalSlider({
    slideTransitionSpeed:400,
    beforeLoadStart:function() {                    
        $("p.navId").text((this.currentSlideId+1) + "/"  +   (this.numSlides) );
        this.arrowLeft.html("&larr;");
        this.arrowRight.html("&rarr;");
    },
    beforeSlideChange:function() {
        $("p.navId").text((this.currentSlideId+1) + "/"  +   (this.numSlides) );
    }       
}).data("royalSlider");
</script>

何かを思いつく。私が使う

$("#makingof_goto").click(function() {
    sliderInstance.goTo(0);
});

スライド番号とサムネイルを一致させる方法で mySliderInstance.currentSlideId を使用してスクリプトを変更する方法はありますか。onslide 3 で #this_thumb のクラスを .current_class に変更してから、li リスト内の他のすべての Thumb を .unselected に変更すると、次のようになります。

$(function() {
$(".hd ul li").click(function(){
$(this).addClass("current").siblings().removeClass("current");
$("#space_goto").click(function() {
    sliderInstance.goTo(1);
    });
})
});

これは、ポートフォリオを送信する前に行う必要がある最後のことであり、運がなくても数日間これと戦っています。これに関する助けがあれば大歓迎です.

4

1 に答える 1

0

これを使用できます

slider.ev.on('rsAfterSlideChange', function(event) {
// triggers after slide change
 // Add class to the current thumbnail
 $(".thumb:eq("+slider.currSlideId+")").addClass("current");
});
于 2013-03-14T15:22:12.940 に答える