How to change options depending on media query browser width?

Christian's Avatar

Christian

18 Oct, 2021 01:04 PM

Hi Dmitry,

I need to make the controlNavigation set to mobile (or < 480px), and then set to thumbnails for > 480px - how do I achieve this within the JS call?

Also, I have the autoScaleSlider set to true. On larger screens I want thumbnail navigation to show - my image size is 668 x 768. How do I know what the autoScaleSliderWidth and autoScaleSliderHeight should be set to? The thumbnails and spacing seemingly are included in this, as setting these values to 668 and 768 doesn't look right.

Finally, how do I make the thumb arrows always show for mobiles and tablets? i.e. touch devices only

  1. Support Staff 1 Posted by Dmitry Semenov on 18 Oct, 2021 04:33 PM

    Dmitry Semenov's Avatar

    Hello,

    You can control thumbnail visibility via CSS (.rsNav element). Also set thumbs.fitInViewport to false, so the size of the sliding area is calculated correctly. https://dimsemenov.com/plugins/royal-slider/documentation/#thumbnails Same for any navigation elements.

    How do I know what the autoScaleSliderWidth and autoScaleSliderHeight should be set to?

    The size of the viewport can also be controlled via CSS. If you need non-linear scaling, this should help http://help.dimsemenov.com/kb/royalslider-jquery-plugin-faq/how-to-...

  2. 2 Posted by Christian on 19 Oct, 2021 03:31 PM

    Christian's Avatar

    Hi Dmitry,

    Thank you for your quick response. Apologies, I made a mistake in my original query regarding the thumbnails. Corrected query below:

    I need to make the controlNavigation set to bullets for mobile (or < 480px), and then set to thumbnails for when the browser width > 480px - how do I achieve this within the JS call?

  3. Support Staff 3 Posted by Dmitry Semenov on 19 Oct, 2021 06:13 PM

    Dmitry Semenov's Avatar

    There is no option for this, you may enable thumbnails by default and implement your own version of bullets navigation via slider JS API.

  4. 4 Posted by Christian on 19 Oct, 2021 06:47 PM

    Christian's Avatar

    Will do, thanks Dmitry :)

  5. 5 Posted by Christian on 20 Oct, 2021 04:12 PM

    Christian's Avatar

    Hi Dmitry,

    Do you have any example code please for creating the bullets navigation using the JS API?

  6. Support Staff 6 Posted by Dmitry Semenov on 20 Oct, 2021 07:56 PM

    Dmitry Semenov's Avatar

    You may check the source of the default bullets module. You don't need that much - rsAfterSlideChange event, goTo method and currSlideId property.

  7. 7 Posted by Christian on 21 Oct, 2021 02:15 PM

    Christian's Avatar

    Sorry Dmitry need a bit more guidance here please. Have you got any examples? I can copy/paste the markup of the bullets to then create my own version, but not sure what the JS should look like.

  8. 8 Posted by Christian on 21 Oct, 2021 03:01 PM

    Christian's Avatar

    This is the markup I have created that is sitting just outside the .royalslider container:

    <div class="custom-bullets">
        <div class="rsNavItem rsBullet rsNavSelected"><span></span></div>
        <div class="rsNavItem rsBullet"><span></span></div>
        <div class="rsNavItem rsBullet"><span></span></div>
    </div>
    
  9. Support Staff 9 Posted by Dmitry Semenov on 21 Oct, 2021 06:57 PM

    Dmitry Semenov's Avatar

    Sorry, that's out of the support scope. You may check the source of the bullets-navigation, but you need JS knowledge to implement it.

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