0

我正在使用 Royalslider，我正在尝试设置一个外部缩略图列表，当您单击其中一个拇指或点击下一个按钮/使用箭头键/滑动该缩略图更改类以成为“突出显示”缩略图时。单击缩略图时效果很好，但我无法使用滑动/键盘/或下一个/上一个箭头。

我一直在尝试通过公共方法为此提出一个脚本，但我遇到了困难： mySliderInstance.numSlides // 幻灯片数 mySliderInstance.currentSlideId // 当前幻灯片 id mySliderInstance.lastSlideId // Last(previous) slide 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 列表中的所有其他拇指更改为 .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 回答