設置jQuery的滑塊功能

Question

我想設置一個函數，如果我使用的滑塊（皇家滑塊）是在某個幻燈片上發生.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> 

Answer 1

編輯：更新，以顯示如何與當前的代碼

首先的整合，我從來沒有使用過皇家滑塊免責聲明但我一直在文檔中徘徊。你有沒有嘗試過使用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'); 
     } 
    }); 

}