Disable other div / span elements in royal slider

info's Avatar

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!

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

    Dmitry Semenov's Avatar

    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

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

    info's Avatar

    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.

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

    Dmitry Semenov's Avatar

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

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

    info's Avatar

    $(".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
         },

            });

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

    Dmitry Semenov's Avatar

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

    $('.royalSlider').append('<div id="bgmenu"></div>');
    
  6. 6 Posted by info on 31 Jul, 2018 12:37 PM

    info's Avatar

    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

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

    Dmitry Semenov's Avatar

    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>
    
  8. 8 Posted by info on 31 Jul, 2018 01:27 PM

    info's Avatar

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

    Many thanks for your help!

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

    Dmitry Semenov's Avatar

    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.

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

    info's Avatar

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

Reply to this discussion

Internal reply

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

Attaching KB article:

»

Already uploaded files

  • end.jpg 32.8 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