Skip to main content

How to position thumbnails, tabs or bullets above the slider?

Reorder navigation element via jQuery after slider is initialized, e.g.:

jQuery(document).ready(function($) {
    // initialize slider
    // $('.royalSlider').royalSlider( ... options ...);

    // reposition nav, you can use this trick to reposition any RoyalSlider controls and anywhere you wish
    var slider = $('.royalSlider');
    slider.prepend(slider.find('.rsNav'));
});

You can also do this just with help of CSS by applying absolute position to rsNav and moving it anywhere you wish. For example for bullets and default skin:

.rsNav {
    position: absolute;
    bottom: auto;
    top: -20px;
}

Also, if you use thumbnails, option fitInViewport (in thumbnails section) should be set to false. This option automatically reduces size of slider by size of thumbnails.

Additional CSS to move thumbnails from right to left side​

.royalSlider .rsThumbsVer {
    right: auto !important;
    left: 0 !important;
}
.royalSlider .rsOverflow {
    margin-left: 96px !important; /* width of thumbnails container */
}
/* surely, !important is not required if you're overriding styles from the skin */

If you're using WordPress version of slider:​

Instead of $('.royalSlider') you may put $('#new-royalslider-123') to select specific slider. CSS code can be added to any .css file on page with slider, e.g. in style.css of your theme.

Here is code that you may add in your functions.php to put thumbnails before the main sliding area via JS in WordPress version https://gist.github.com/dimsemenov/394bac2e45f28d7f8e01