rsAfterContentSet is not fireing

Jan's Avatar

Jan

08 Jun, 2021 01:53 AM

Hi,
I used the jQuery fade-effect to fade-in elements afterSlideChange.
For that I set these Elements through css to display: none.
But on the first Slide the Elements will not be shown so I tried to set

slider.slides[1].holder.on('rsAfterContentSet', function() {
    $('.rsHeadline').show();
    $('.rsArtistImg').show();
    console.log('slide 01 loaded');
});

But the log is not showing so I have to assume that these event is not firing. What do I wrong?

Cheers

  1. Support Staff 1 Posted by Dmitry Semenov on 08 Jun, 2021 04:08 AM

    Dmitry Semenov's Avatar

    Hello,

    If you execute the code directly after slider initialization, content would be already set. The amount of slides in DOM is controlled via numImagesToPreload option.

    Possibly rsBeforeMove event will help? http://help.dimsemenov.com/discussions/royalslider-wordpress/2398-a...

  2. 2 Posted by Jan on 10 Jun, 2021 09:34 PM

    Jan's Avatar

    Hi,
    thanks. I use the rsBeforeMove for all slides but on the first slide it doesn't work.
    I have also deleted the display: none from the css to control it complete over js. ´
    here is my complete script:

        $('.rsHeadline').hide();
        $('.rsArtistImg').hide();

    $('.royalSlider').royalSlider({
        loop: true,
        transitionSpeed: 1500,
        easeInOut: 'easeInOutSine',
        controlNavigation: 'none',
        arrowsNav: true,
        arrowsNavAutoHide: false,
        addActiveClass: true,
        keyboardNavEnabled: true,
        autoPlay: {
            // autoplay options go gere
            enabled: true,
            pauseOnHover: true
        },
        deeplinking: {
            enabled: true,
            change: true,
            prefix: 'gallery-'
        }
    });
    
    let slider = $('.royalSlider').data('royalSlider');
    
    slider.slides[1].holder.on('rsAfterContentSet', function() {
        $('.rsHeadline').show();
        $('.rsArtistImg').show();
        console.log('slide 01 loaded');
    });
    
    slider.ev.on('rsBeforeMove', function() {
        var currentSlideContent = slider.currSlide.content;
        currentSlideContent.find('.rsHeadline').fadeOut('slow');
        currentSlideContent.find('.rsArtistImg').fadeOut('slow');
    });
    
    slider.ev.on('rsDragStart', function() {
        var currentSlideContent = slider.currSlide.content;
        currentSlideContent.find('.rsHeadline').fadeOut('slow');
        currentSlideContent.find('.rsArtistImg').fadeOut('slow');
    });
    
    slider.ev.on('rsAfterSlideChange', function() {
        var currentSlideContent = slider.currSlide.content;
        currentSlideContent.find('.rsHeadline').fadeIn('slow');
        currentSlideContent.find('.rsArtistImg').fadeIn('slow');
    });</code>
    
    
    
    

Reply to this discussion

Internal reply

Formatting help / Preview (switch to plain text) No formatting (switch to Markdown)

Attaching KB article:

»

Attached Files

You can attach files up to 10MB

If you don't have an account yet, we need to confirm you're human and not a machine trying to post spam.

Keyboard shortcuts

Generic

? Show this help
ESC Blurs the current field

Comment Form

r Focus the comment reply box
^ + ↩ Submit the comment

You can use Command ⌘ instead of Control ^ on Mac