Question

我正在尝试设置一个函数，如果我正在使用的滑块（Royal Slider）在某个幻灯片上，则会发生.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

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

首先，免责声明我从未使用过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');
        }
    });

}

设置jquery滑块功能

1 个答案: