0

我正在尝试设置一个功能，如果我正在使用的滑块（皇家滑块）在某个幻灯片上，则会发生 .load 功能。我只是不知道如何设置它，并且一直在四处寻找，似乎无法得到它。

sliderInstance.currSlideId // 当前幻灯片索引

你将如何使用它来设置它，所以当 sliderInstance.currSlideId 等于幻灯片值时，在本例中为 2，然后 

function () {
    $('#light_content_container').load('http://www.klossal.com/portfolio/lightseries_content.html');
});

启动。 http://dimsemenov.com/plugins/royal-slider/documentation/?s=dp#api这是滑块的 api，我不知道如何让它工作，所以任何帮助将不胜感激。

我目前拥有的所有脚本：

<script>            

jQuery(document).ready(function($) {
    var sliderInstance = $('#mySlider').royalSlider({
                    captionShowEffects:["moveleft", "fade"],
                    directionNavAutoHide: false,
                    autoScaleSlider: false,
                    imageScaleMode:"fit",                  // Scale mode of all images. Can be "fill", "fit"  
or "none"
                    imageAlignCenter:true,
                    navigateByClick:false,
                    keyboardNavEnabled:true,
                    controlNavThumbs:true,
                    directionNavEnabled: true,  
                    startSlideId: 1,
    deeplinking: {
        // fullscreen options go gere
        enabled: true,
        prefix: 'slider_port-'
    },                  
                    afterSlideChange:function() {
        xx=this.currSlideId;
        $('#thumb_scroll li').removeClass('library_thumb_active');
        $('#thumb_scroll li').eq(xx).addClass('library_thumb_active');


    },      


    }).data('royalSlider');             
    $("#makingof_goto").click(function() {
        sliderInstance.goTo(0);
    });
    $("#space_goto").click(function() {
        sliderInstance.goTo(1);
    });
    $("#light_goto").click(function() {
        sliderInstance.goTo(2);
    });
    $("#faces_goto").click(function() {
        sliderInstance.goTo(3);
    });
    $("#color_goto").click(function() {
        sliderInstance.goTo(4);
    });

$(document).keydown(function(e){
if (e.keyCode == 37) { 
     var leftPos = $('#thumb_scroll').scrollLeft();
     if(leftPos==0){
           $("#thumb_scroll").animate({scrollLeft: leftPos + 348}, 800);

     }
     else{
$("#thumb_scroll").animate({scrollLeft: leftPos - 150}, 800);
     }
      }


 if (e.keyCode == 39) { 

     var leftPos = $('#thumb_scroll').scrollLeft();

if(leftPos ==348){
           $("#thumb_scroll").animate({scrollLeft: leftPos - 348}, 800);

     }
     else{
$("#thumb_scroll").animate({scrollLeft: leftPos + 150}, 800);
     }

      }


});






});
</script>
4

1 回答 1

1

编辑：更新以显示如何与您当前的代码集成

首先，免责声明我从未使用过 Royal Slider，但我一直在查看文档。您是否尝试过使用 rsAfterSlideChange 事件？例如：

$(document).ready(function() {
    // initialize slider
    var sliderInstance = ($('#mySlider').royalSlider({ ... }).data('royalSlider');

    // bind the rsAfterSlideChange event
    sliderInstance.ev.on('rsAfterSlideChange', function() {
        if(sliderInstance.currSlideId == 2) {
            // your code here!
           $('#light_content_container').load('http://www.klossal.com/portfolio/lightseries_content.html');
        }
    });

}
于 2012-08-16T13:16:31.607 回答