Home → RoyalSlider HTML version issues →

Disable other div / span elements in royal slider

• Edit

info

30 Jul, 2018 12:34 PM

Hello,

to make things easy I've put a div after the last slide (3rd) in my royal slider. It acts as a fixed background for the slider text. But the problem is, the slider sees this as an extra slide. How can I disable this last div (which is not an actual slide) please? I've tried with $(".royalSlider").removeSlide(3); but that just broke the whole slider.

Any advice is very welcome.

Thanks in advance!

• end.jpg 32.8 KB

1. Support Staff 1 Posted by Dmitry Semenov on 30 Jul, 2018 02:13 PM

   

   Hello,

   The plugin will always treat all child elements as slides. Add your #bgmenu after slider is initialized (after $().royalSlider() method) or place element outside of root slider element.

   Dmitry

   • Edit

2. 2 Posted by info on 30 Jul, 2018 02:32 PM

   

   Hi! Thanks for your fast reply!

   Placing it outside the root slider element is not really an option, everything is working so nice now, it would mean a huge setback.

   This:
   "Add your #bgmenu after slider is initialized (after $().royalSlider() method) "

   I don't know how to do that... any help on that would be greatly appreciated.

   • Edit

3. Support Staff 3 Posted by Dmitry Semenov on 30 Jul, 2018 03:39 PM

   

   Post JS code that you're using to initialize slider.

   • Edit

4. 4 Posted by info on 31 Jul, 2018 07:29 AM

   

   $(".royalSlider").royalSlider({
               // options go here
               // as an example, enable keyboard arrows nav
               keyboardNavEnabled: true,
   usePreloader: true,
   sliderTouch: true,
   transitionSpeed: 1000,
   slidesSpacing: 0,
   navigateByClick: false,
   easeInOut: "easeInOutExpo",
   imageScaleMode: "fill",
   imageAlignCenter: true,
   transitionType: 'move',
               sliderDrag: false,
               arrowsNav: false,

   autoPlay: {
        enabled: true,
        pauseOnHover: false,
   delay: 4000
        },

           });

   • Edit

5. Support Staff 5 Posted by Dmitry Semenov on 31 Jul, 2018 12:15 PM

   

   You can add code that adds your element right after it, e.g.:

   $('.royalSlider').append('<div id="bgmenu"></div>');
   

   • Edit

6. 6 Posted by info on 31 Jul, 2018 12:37 PM

   

   If I put this code before initializing the slider, it's the same -> extra empty slide at the end.
   After init, the text in .rsABlock is not visible, it's behind #bgmenu.

   I'm using #bgmenu as a background for the text in .rsABlock.
   I need #bgmenu to be fixed in the slider on top of the image, but under .rsBlock.

   I hope it's a bit clear.

   Here is an example: http://9.imaxxweb.be/index.html

   • Edit

7. Support Staff 7 Posted by Dmitry Semenov on 31 Jul, 2018 01:25 PM

   

   I need #bgmenu to be fixed in the slider on top of the image, but under .rsBlock.

   Ah, if you need it between image and animated block - you'll need to place it in each slide, wtih structure like:

   <div class="royalSlider">
   
      <!-- slide 1 -->
      <div>
        <img ... />
        <div>background</div>
        <div>animated block</div>
      </div>
   
       <!-- slide 2 -->
      <div>
        <img ... />
        <div>background</div>
        <div>animated block</div>
      </div>
   
   </div>
   

   • Edit

8. 8 Posted by info on 31 Jul, 2018 01:27 PM

   

   Thanks, but then the background moves with the slide. I'll see what I can do from here.

   Many thanks for your help!

   • Edit

9. Support Staff 9 Posted by Dmitry Semenov on 31 Jul, 2018 01:48 PM

   

   You can't create such layout with just one slider. Create one slider with just images, then place your background, and on top of that add another element that contains animated blocks.

   You'll need to implement the animated blocks manually, either via the second slider or via simple CSS animations and transitions. Take a look at API examples such as http://jsfiddle.net/ty1ognwj/ to sync your blocks with the image slider.

   • Edit

10. 10 Posted by info on 31 Jul, 2018 01:59 PM

    

    Ok great, will do. Thanks for the extra info!

    • Edit