slide with nested divs with flexbox styling

patrick's Avatar

patrick

15 Aug, 2020 03:21 PM

dear dimitri

i would like to create a simple slideshow. where i have two divs per slide, one with text, the other with an image. and i would like to style them using flexbox. in a horizontal viewport, i would have the two next to each other. and in a vertical viewport i would like to have them on top of each other. is this feasible with royalslider? can i nest divs into a slide div?

thank you very much for your support, with kind regards, patrick

  1. Support Staff 1 Posted by Dmitry Semenov on 16 Aug, 2020 04:20 AM

    Dmitry Semenov's Avatar

    Hello,

    Sure, you may place any HTML content in each slide, for example:

    <div class="royalSlider rsDefault">
    
        <!-- slide 1 -->
        <div class="rsContent">
            Put any HTML content here
        </div>
    
         <!-- slide 2 -->
        <div class="rsContent">
            Put any HTML content here
        </div>
    
    
    </div>
    

    This also might be handy http://help.dimsemenov.com/kb/royalslider-jquery-plugin-faq/how-to-...

  2. 2 Posted by patrick on 18 Aug, 2020 02:00 PM

    patrick's Avatar

    great, thank you very much. got it to run.... two more questions though:

    1. custom delay does not work on first slide. once running, it works nicely. but the first appearance is always very short? what could that be?

    2. i use a couple of sliders on my index page. for one of them, i would like to randomize slides. but just for this single one. is there a possibility to inject this directly into my mark up?

    thank you so much, appreciate your help...

  3. Support Staff 3 Posted by Dmitry Semenov on 18 Aug, 2020 04:09 PM

    Dmitry Semenov's Avatar

    custom delay does not work on first slide. once running, it works nicely. but the first appearance is always very short? what could that be?

    I'm not able to reproduce the issue, can you please link to an example? Possibly some other option or API call is interfering?

    1. i use a couple of sliders on my index page. for one of them, i would like to randomize slides. but just for this single one. is there a possibility to inject this directly into my mark up?

    There is no such option, you'll need to adjust init code or shuffle slides manually before slider is initialized.

  4. 4 Posted by patrick on 19 Aug, 2020 12:56 PM

    patrick's Avatar

    thank you dimitri. i figured it out and it works like a charm. in your documentation, i found the possibility of having two sliders through javascript.

    http://help.dimsemenov.com/kb/royalslider-jquery-plugin-faq/how-to-add-multiple-sliders-to-one-page-and-style-them-differently

    i now put the javascript twice in my main.js. once with

    $(".royalSlider").royalSlider

    and once with

     $('#PopUp').royalSlider

    the second one works nice, but all the others on the page stop working is there a way to specify, that the first script is for all other sliders?

    thanks again, such a help.

  5. Support Staff 5 Posted by Dmitry Semenov on 19 Aug, 2020 06:04 PM

    Dmitry Semenov's Avatar

    CSS selector with # can select only a single slider on a page. If you want multiple - use class selector (starts with a dot), or use multiple different ID selectors (like $('#PopUp1, #PopUp2').

Reply to this discussion

Internal reply

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

Attaching KB article:

»

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