Add Class rsActiveSlide to previous and next slides

shannonephelps's Avatar

shannonephelps

30 Sep, 2014 04:15 AM

Hi,

Could you tell me the code to add the rsActiveSlide class to the previous and next image of the active image in the carousel slider? I'm trying to achieve the effect shown in the attached image. I've tried using .next and .prev jQuery but was unable to get it to work, could you point me in the right direction?

Thanks.

  1. Support Staff 1 Posted by Dmitry Semenov on 30 Sep, 2014 03:12 PM

    Dmitry Semenov's Avatar

    Hi,

    There is no such option, you'll need to do this manually via slider JS API - http://dimsemenov.com/plugins/royal-slider/documentation/#api

    Consider implementing such layout just via CSS by placing some transparent bars over right and left side, or use this technique http://help.dimsemenov.com/discussions/problems/4068-visiblenearby-...

    Dmitry

  2. 2 Posted by shannonephelps on 30 Sep, 2014 08:14 PM

    shannonephelps's Avatar

    Hi Dmitry,

    Would I use the following code to add class rsActiveSlide to the immediate previous and immediate next slides?

    jQuery(document).ready(function($) {
        slider.next().addClass( "rsActiveSlide" )
    });

  3. Support Staff 3 Posted by Dmitry Semenov on 01 Oct, 2014 12:07 PM

    Dmitry Semenov's Avatar

    No, use events like rsAfterSlideChange or rsOnUpdateNav, or rsBeforeMove. To access content of slides you may use slides array, each its item has content property.

    $('.royalSlider').data('royalSlider').slides[0].content // content of first slide
    
  4. 4 Posted by shannonephelps on 11 Oct, 2014 07:20 PM

    shannonephelps's Avatar

    Hi Dimitry,

    I've tried multiple methods to add the class .rsActiveSlide to both the previous and next slides. Could you provide me with the jQuery code to do so?

    Thank you.

  5. Support Staff 5 Posted by Dmitry Semenov on 13 Oct, 2014 01:12 PM

    Dmitry Semenov's Avatar

    Please post the code that didn't work for you and I'll take a look what's wrong.

  6. 6 Posted by shannonephelps on 13 Oct, 2014 08:39 PM

    shannonephelps's Avatar

    I used a lot of different combinations that I did not get a chance to save to a text file and did a lot of research on stackoverflow and google, but most recently I have up:

    'jQuery('#new-royalslider-1').rsAfterInit( function(){ jQuery(this).addClass('rsActiveSlide') }, );'

    You can see what I'm attempting to do at mod.hawkhorne.com. The first slider. The next slide and previous slide before and after the rsActiveSlide should also have the rsActiveSlide class.

    I know it's missing slider.next, I'm running off only a few hours sleep in the past few days so bare with me. I'm stumped so I really appreciate your help.

    Thanks for your help.

  7. Support Staff 7 Posted by Dmitry Semenov on 14 Oct, 2014 11:04 AM

    Dmitry Semenov's Avatar

    Here is example for one slide:

    var slider = $('#new-royalslider-1').data('royalSlider'),
          prevIndex;
    
    var updateClasses = function() {
         // slider.currSlideId - is current index
    
         if(prevIndex) {
              slider.slides[ prevIndex ].holder.removeClass('rsActiveSlide'); // remove class from prev slide
         }
    
         slider.slides[ slider.currSlideId ].holder.addClass('rsActiveSlide'); // add class to current slide
        
         prevIndex = slider.currSlideId;
    };
    slider.ev.on('rsAfterSlideChange', updateClasses);
    updateClasses();
    

    Also, I'd recommend to disable default add-active-class feature, so it won't conflict with your implementation.

    If you're not experienced in JS, consider hiring a dev.

    Dmitry

  8. 8 Posted by shannonephelps on 15 Oct, 2014 07:06 PM

    shannonephelps's Avatar

    Great, thanks. This is getting me almost there. Just one thing, I'm getting an error in FireBug "TypeError: slider is undefined". I'm searching for a fix but can't seem to come up with anything yet, any ideas? I tried loading the script as the last script after the slider has been loaded, I even used several different classes and ID on the var slider line

    #new-royalslider-1 .new-royalslider-1 .royalslider

  9. Support Staff 9 Posted by Dmitry Semenov on 15 Oct, 2014 07:14 PM

    Dmitry Semenov's Avatar

    Please link to test page with error.

  10. 10 Posted by shannonephelps on 15 Oct, 2014 11:27 PM

    shannonephelps's Avatar
  11. Support Staff 11 Posted by Dmitry Semenov on 16 Oct, 2014 05:27 AM

    Dmitry Semenov's Avatar

    You're running the code before slider is initialized http://help.dimsemenov.com/kb/wordpress-royalslider-advanced/wp-whe...

  12. 12 Posted by Jose on 20 Mar, 2018 03:35 PM

    Jose's Avatar

    I want to do the same but not directly in jQuery but in WordPress

  13. Support Staff 13 Posted by Dmitry Semenov on 20 Mar, 2018 05:08 PM

    Dmitry Semenov's Avatar

    Please refer to http://help.dimsemenov.com/kb/wordpress-royalslider-advanced/wp-whe... on where to place JS code in WordPress version.

Reply to this discussion

Internal reply

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

Attaching KB article:

»

Already uploaded files

  • slider.png 494 KB

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