Incorrect height on mobile

abrcoelho's Avatar


11 Sep, 2017 03:40 AM — At this page I'm using RoyalSlider right below the "Vantagens do GeoEscola" section.

It works alright on desktop and tablets but on mobile the viewport height gets set to 45px and the images are not showing. If I open Chrome Inspector and set the height of .rsVisibleNearbyWrap to 465px the images are shown again. But for some reason it isn't setting the correct height from the start.

I'm using the code below to activate the slider.

    autoHeight: true,
    arrowsNav: true,
    arrowsNavAutoHide: false,
    controlsInside: false,
    controlNavigation: 'bullets',
    addActiveClass: 'current-slide',
    imageScaleMode: 'none',
    loop: false,
    loopRewind: true,
    numImagesToPreload: 6,
    usePreloader: false,
    autoPlay: {
      enabled: true,
      pauseOnHover: true,
      delay: 5000
    visibleNearby: {
      enabled: true,
      center: true,
      centerArea: 0.8,
      breakpoint: 650,
      breakpointCenterArea: 0.8,
      navigateByCenterClick: true
  1. Support Staff 1 Posted by Dmitry Semenov on 11 Sep, 2017 04:41 AM

    Dmitry Semenov's Avatar


    You're intiializing slider before images are loaded, thus autoHeight option does not always calculate the height correctly. Either:

    • disable the autoHeight option and use autoScaleSlider and CSS media queries to modify height,
    • or init slider after images are loaded,
    • or add rsImg class to images so slider will preload them by itself.

    Also, avoid using visibleNearby option with autoHeight if you apply transforms, use this technique instead (it's CSS-only and you may use media queries to toggle nearby slides).

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


? 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