Add a class to body based on slide?

Jez's Avatar

Jez

09 Oct, 2017 06:51 PM

Is it possible to add a class to the body related to each slide?

For the purpose of changing the text colour over the top of each slide i/e white text for a dark image and dark text for a light image.

I have a simple full screen slider set up.

var resize = function() {
            $('.royalSlider').css({
                width: $(window).width(),
                height: $(window).height()
            });
        };
        
        $(window).on('resize', resize);
        resize();
        
        var rs = $('.royalSlider').royalSlider({
            autoScaleSlider:false,
            autoHeight: false,
            arrowsNav: true,
            imageScaleMode: 'fill',
            keyboardNavEnabled: true,
            numImagesToPreload: 2,
            fadeinLoadedSlide: false,
            sliderDrag: false,
            controlNavigation: 'none',
            transitionType: 'fade',
            transitionSpeed: 1000,
            loop: true,
            autoPlay: {
                        // autoplay options go gere
                        enabled: true,
                        delay: 5000
                    }
        }).data('royalSlider’);
  1. Support Staff 1 Posted by Dmitry Semenov on 10 Oct, 2017 06:32 AM

    Dmitry Semenov's Avatar

    Hello,

    var updateColor = function() {
      // current slide element is rs.currSlide.content
    );
    rs.ev.on('rsAfterSlideChange', updateColor);
    updateColor();
    

    Hope it helps.

  2. 2 Posted by Jez on 10 Oct, 2017 08:04 AM

    Jez's Avatar

    Thank you do i put this within the main RS functions, how will your example know what slider to use?

    Also do i have to put anything in your commented out area, i assume i do?

    Thank you again.

  3. Support Staff 3 Posted by Dmitry Semenov on 10 Oct, 2017 08:22 AM

    Dmitry Semenov's Avatar

    Thank you do i put this within the main RS functions, how will your example know what slider to use?

    If you put the code right after:

    var rs = $('.royalSlider').royalSlider({
         ...
        }).data('royalSlider’);
    

    ... and it'll use rs variable, thus single element with royalSlider class will be used.

    If you have multiple sliders on page - you'll need to create a loop, so each will get a separate instance (rs variable).

    Also do i have to put anything in your commented out area, i assume i do?

    Sure, rs.currSlide.content will give you only reference to current slide element. You may parse it (e.g. retrieve some attribute with color value in it) and then apply it to body.

  4. 4 Posted by Jez on 10 Oct, 2017 09:04 AM

    Jez's Avatar

    Sorry the rs.currSlide.content function is what i’m struggling with.

    Ideally i’d have a .slide-1, .slide-2 etc classes added to the body as each slide changes, would that be possible or too complex?

  5. Support Staff 5 Posted by Dmitry Semenov on 10 Oct, 2017 01:41 PM

    Dmitry Semenov's Avatar

    If you want just index, you may use something like:

    var updateClass = function() {
      document.body.className = 'slide-' + rs.currSlideId;
    );
    rs.ev.on('rsAfterSlideChange', updateClass);
    updateClass();
    
  6. 6 Posted by Jez on 10 Oct, 2017 06:41 PM

    Jez's Avatar

    Unfortunately that doesn't seem to work... :(

    I get an error..

    Uncaught TypeError: rs.on is not a function

    var resize = function() {
                $('.royalSlider').css({
                    width: $(window).width(),
                    height: $(window).height()
                });
            };
            
            $(window).on('resize', resize);
            resize();
            
            var rs = $('.royalSlider').royalSlider({
                autoScaleSlider:false,
                autoHeight: false,
                arrowsNav: true,
                imageScaleMode: 'fill',
                keyboardNavEnabled: true,
                numImagesToPreload: 2,
                fadeinLoadedSlide: false,
                sliderDrag: false,
                controlNavigation: 'none',
                transitionType: 'fade',
                transitionSpeed: 1000,
                loop: true,
                autoPlay: {
                            // autoplay options go gere
                            enabled: true,
                            delay: 5000
                        }
            }).data('royalSlider');
            
            var updateClass = function() {
              document.body.className = 'slide-' + rs.currSlideId;
            };
            rs.on('rsAfterSlideChange', updateClass);
            updateClass();
    
  7. Support Staff 7 Posted by Dmitry Semenov on 10 Oct, 2017 06:59 PM

    Dmitry Semenov's Avatar

    Apologies, there was a typo, should be rs.ev.on('rsAfterSlideChange', updateClass); instead of rs.on(...

  8. 8 Posted by Jez on 11 Oct, 2017 11:38 AM

    Jez's Avatar

    Brilliant thank you.

    It was stripping out all the other classes (which i still need) so tweaked it a little, so its adding the classes, but one at a time so slide-1 slide-2 slide-3 rather than removing the old one and just adding the one you’re on.

    I’m assuming `toggleClass is the wrong thing to use?

    var updateClass = function() {
                    $('body').toggleClass('rslide-'+rs.currSlideId);
            };
            rs.ev.on('rsAfterSlideChange', updateClass);
            
            updateClass();
    
  9. Support Staff 9 Posted by Dmitry Semenov on 11 Oct, 2017 02:44 PM

    Dmitry Semenov's Avatar

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