Question

我有一个显示多个Royalslider幻灯片的页面，每个幻灯片都有100％的宽度和高度。目前，所有幻灯片都在页面加载时初始化，这意味着我只看到第一个滑块淡入到位（它们都应该淡入，但第一个是可见的唯一一个看到此效果）。

我也使用Scrollify来捕捉每个部分，但我不确定这是否相关，因为我认为我需要调整下面的脚本，只是在进入视口时才初始化幻灯片。

非常感谢任何帮助！

HTML

 /**
 * @var string
 *
 * @ORM\Column(name="data", type="array", length=250, nullable=false,
 *      options={"comment" = "Data of notification."})
 */
protected $data;

JS

<section >
    <div class="slideshow royalSlider">
        <div class="rsContent">Slider content here</div>
    </div>              
</section>

<section >
    <div class="slideshow royalSlider">
        <div class="rsContent">Slider content here</div>
    </div>              
</section>

<section >
    <div class="slideshow royalSlider">
        <div class="rsContent">Slider content here</div>
    </div>              
</section>

Answer 1

scrollify有一个回调after，在新部分滚动到之后会触发回调after(index)。参数包括节的索引和所有节元素的数组（来自文档）。因此，您可以检查索引if(index == 'value'){ //init slider for current section }

start_slider()

此外，您可以编写类似start_slider('#div_id', options) function start_slider(div, options){ $(div).royalSlider(options); }的函数，并使用以下参数进行调用：

function start_slider(div, options){
    if(!$(div).hasClass('class_royal_slider')){
       $(div).royalSlider(options);
    }
}

或检查是否已启动

pause function

我不确定royalsldier是否有after:function(index) { //if ($('.royalslider'+index).children().length > 0) { // this.slider(); //} }（如引导滑块），但你可以找到，如果你不在活动部分，则暂停滑块。

希望我的回答能帮助您了解自己能做些什么。这是一个小提琴https://jsfiddle.net/urhfrw44/4/ 但我不能使用RoyalSlider cz不是免费的）））

div

正如您所看到的，您有一个带有royalslider + number类的滑块royalslider0，因此您可以将它们设为first section starts from 0 = $('.royalslider'+index)并使用上面的代码$scope.pinCode

仅在视口中初始化RoyalSlider

1 个答案: