Initialise RoyalSlider only when in viewport

Question

I have a page that displays multiple Royalslider slideshows, each at 100% width and height. Currently, all the slideshows initialise on page load, meaning that I only see the first slider fade into place (they are all supposed to fade in, but the first one is the only one visible to see this effect).

I am also using Scrollify to snap to each section, but I'm not sure if this is relevent or not, as I think I need to adjust the below script to literally only initialise the slideshows upon coming into viewport.

Any help would be greatly appreciated!

HTML

<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>

JS

jQuery(document).ready(function($) {
    $('.slideshow').royalSlider({
        transitionType:         'move',
        randomizeSlides:        false,
        imageScaleMode:         'fill'
    });         
});

// Scrollify (snap to section)
$(function() {
    $.scrollify({
        section : "section",
        easing: "easeOutExpo",
        scrollSpeed: 1000,
        scrollbars: true,
        before:function() {},
        after:function() {}
    });

    $(".scroll-down").click(function(e) {
        e.preventDefault();
        $.scrollify.next();
    });
});

SergkeiM · Answer 1 · 2016-02-25T11:47:17.393

0

scrollify has a callback after that is fired after a new section is scrolled to. Arguments include the index of the section and an array of all section elements (from Documentation). So you can check the index after(index)

if(index == 'value'){
   //init slider for current section
}

More over you can write a function like start_slider() and call with parameters like:

start_slider('#div_id', options)

function start_slider(div, options){
   $(div).royalSlider(options);
}

Or check if it initiated already

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

I am not sure if royalsldier have a pause function (like bootstrap slider) but you can find out, and pause the slider if you are not on active section.

Hope my answered helped you to get an idea of what you can do. This is a fiddle https://jsfiddle.net/urhfrw44/4/ But I can't use RoyalSlider cz is not free)))

after:function(index) {
       //if ($('.royalslider'+index).children().length > 0) {
       //       this.slider();
       //}
}

As you can see you have slider div with class royalslider + number so you can make them as royalslider0 = first section starts from 0 and use as in code above $('.royalslider'+index)

edited Feb 25 '16 at 11:47

answered Feb 25 '16 at 09:15

SergkeiM

3,934
6
36
69

HI @Froxz. Thank you very much for taking the time to reply. I think I very loosely follow what you are saying, and it's great that the after callback already exists in scrollify. However, I'm a total JS novice, is there any way you could help me to alter the code supplied above to achieve the desired results? It would be greatly appreciated! Thanks – dungey_140 Feb 25 '16 at 09:44
@dungey_140 give me some minutes I'll try to create JSFiddle for you – SergkeiM Feb 25 '16 at 10:02
Hi @Froxz. Thanks for the fiddle. Is it possible to initialise whichever slider is next, rather than specifying a specific slider for each section? I've not yet been able to get your code to work on my site, if you are able to elaborate on your answer that would be brilliant – dungey_140 Feb 25 '16 at 10:58
Hello @Froxz. I've updated my question with some new JS (a different way of initialising the slider). I haven't had any luck with implementing your code as of yet, would you mind helping me to resolve the problem? You can use Royalslider in a Fiddle by working on top of this one: http://jsfiddle.net/DmitrySemenov/9w0r021c/ – dungey_140 Mar 02 '16 at 11:14

Initialise RoyalSlider only when in viewport

1 Answers1