Home → RoyalSlider WordPress Issues →

Transform Nearby Slides?

• Edit

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.

• nearby-slide.jpg 35.1 KB

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

   

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

   • Edit

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

   

   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]

   • RoyalSlider-add-class.pdf 666 KB
   • Edit

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

   

   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');  
     }
   
   
   });
   

   • Edit

4. 4 Posted by info on 02 Dec, 2020 04:51 PM

   

   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]

   • Edit

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

   

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

   • Edit

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

   

   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]

   • Edit

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

   

   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.

   • Edit

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

   

   Got it. Thanks for your support ;)

   • Edit

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