Transform Nearby Slides?

info's Avatar

info

01 Dec, 2020 07:40 AM

System: WordPress and RoyalSlider up-to-date.

I am wondering if it is possible to warp each nearby slide seperatly.

For example:

Left nearby: transform: perspective(100vw) rotateY(45deg);
Right nearby: transform: perspective(100vw) rotateY(-45deg);

Thanks in advance.

@Dimitry thank you for this awesome slider and keep up your great work.

  1. Support Staff 1 Posted by Dmitry Semenov on 01 Dec, 2020 07:10 PM

    Dmitry Semenov's Avatar

    Hello,

    There is a class that's added to the active slide, but not "left" nearby or "right" nearby, you'll need to use JS API to add a specific class, there is an example with using rsAfterSlideChange event here http://help.dimsemenov.com/kb/wordpress-royalslider-advanced/wp-whe...

  2. 2 Posted by info on 02 Dec, 2020 08:13 AM

    info's Avatar

    Hello,

     

    thanks for your quick answer. I have read the article, but it seems that my Javascript knowledge is not sufficient. I don't want to waste your time, but could you possibly help me with the code?

     

    How can I assign different classes to the previous and next slider? In a way that the previous slide (left) to the active slide has the class "rsSlidePrev" and the next slide (right) to the active slide has the class "rsSlideNext"? For clarification I have visualized it in the „RoyalSlider-add-class.pdf“ attachment.

     

    I am really sorry for bothering you with this and thank you in advance.

     

    Michael

     

    Von: Dmitry Semenov <[email blocked]>
    Gesendet: Dienstag, 1. Dezember 2020 20:11
    An: [email blocked]
    Betreff: Re: Transform Nearby Slides? [RoyalSlider WordPress Issues #49716]

  3. Support Staff 3 Posted by Dmitry Semenov on 02 Dec, 2020 02:39 PM

    Dmitry Semenov's Avatar

    Here is a basic example that adds prev-slide class to the content of the previous slide after slides are switched, you may expand it further.

    var slider = $('.royalSlider').data('royalSlider');
    var prevSlide;
    slider .ev.on('rsAfterSlideChange', function() {
      var currentSlideIndex = slider.currSlideId; // index of the current slide
      var currentSlide = slider.slides[currentSlideIndex].content; // content of the current slide
    
      if (prevSlide) {
        prevSlide.removeClass('prev-slide');
      }
    
      if (currentSlideIndex >= 1) {
        prevSlide = slider.slides[currentSlideIndex - 1].content;
        prevSlide.addClass('prev-slide');  
      }
    
    
    });
    
  4. 4 Posted by info on 02 Dec, 2020 04:51 PM

    info's Avatar

    OK, I added the code to my functions.php

     

    function add_additional_rs_code() {

        

        var slider = $('.royalSlider').data('royalSlider');

        var prevSlide;

        slider .ev.on('rsAfterSlideChange', function() {

        var currentSlideIndex = slider.currSlideId; // index of the current slide

        var currentSlide = slider.slides[currentSlideIndex].content; // content of the current slide

        if (prevSlide) {

            prevSlide.removeClass('prev-slide');

        }

        if (currentSlideIndex >= 1) {

            prevSlide = slider.slides[currentSlideIndex - 1].content;

            prevSlide.addClass('prev-slide');

        }

        });

     

    }

    add_action('new_rs_after_js_init_code', 'add_additional_rs_code');

     

     

    But then I get „Parse error: syntax error, unexpected 'var' (T_VAR)“

     

     

     

    Von: Dmitry Semenov <[email blocked]>
    Gesendet: Mittwoch, 2. Dezember 2020 15:40
    An: [email blocked]
    Betreff: Re: Transform Nearby Slides? [RoyalSlider WordPress Issues #49716]

  5. Support Staff 5 Posted by Dmitry Semenov on 02 Dec, 2020 08:14 PM

    Dmitry Semenov's Avatar

    It's a javascript code, not php, it should be added to JS file or as described here http://help.dimsemenov.com/kb/wordpress-royalslider-advanced/wp-whe...

  6. 6 Posted by info on 03 Dec, 2020 08:29 AM

    info's Avatar

    Ok. Now I added this in a seperate js file included via „wp_enqueue_scripts“. JS file is correctly loaded, but the „prev-slide“ is not showing up.

     

    jQuery(document).ready(function($) {

    var slider = $('.royalSlider').data('royalSlider');

        var prevSlide;

        slider .ev.on('rsAfterSlideChange', function() {

        var currentSlideIndex = slider.currSlideId; // index of the current slide

        var currentSlide = slider.slides[currentSlideIndex].content; // content of the current slide

        if (prevSlide) {

            prevSlide.removeClass('prev-slide');

        }

        if (currentSlideIndex >= 1) {

            prevSlide = slider.slides[currentSlideIndex - 1].content;

            prevSlide.addClass('prev-slide');

        }

        });

    });

     

    As I said Javascript is not really my playground, sorry 

     

     

     

    Von: Dmitry Semenov <[email blocked]>
    Gesendet: Mittwoch, 2. Dezember 2020 21:15
    An: [email blocked]
    Betreff: Re: Transform Nearby Slides? [RoyalSlider WordPress Issues #49716]

  7. Support Staff 7 Posted by Dmitry Semenov on 03 Dec, 2020 03:23 PM

    Dmitry Semenov's Avatar

    Please note that class is added to the content of the slide (such as image), not the slide (.rsSlide element) itself. Also, the code is executed only after slides are switched, not on first initialization, it's just an example.

  8. 8 Posted by info on 04 Dec, 2020 03:31 PM

    info's Avatar

    Got it. Thanks for your support ;)

  9. info closed this discussion on 04 Dec, 2020 03:31 PM.

Comments are currently closed for this discussion. You can start a new one.

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