How to add multiple sliders to one page and style them differently?

Use different CSS selectors to style and initialize sliders separately. You can add any number of sliders to one page.

HTML:

<div id="slider1" class="royalSlider rsDefault">
   <!-- slides for first slider go here... -->
</div>
<div id="slider2" class="royalSlider rsDefault">
   <!-- slides for second slider go here... -->
</div>

JavaScript: jQuery(document).ready(function($) { $('#slider1').royalSlider({ controlNavigation:'bullets' }); $('#slider2').royalSlider({ controlNavigation:'thumbnails' }); });

CSS: #slider1 { width: 300px; height: 200px; background: red; } #slider1 .some-button { color: green; }

#slider2 {
    width: 700px;
    height: 400px;
}

Alternative javascript code if options on your sliders are same: jQuery(document).ready(function($) { $('#slider1, #slider2').royalSlider({ controlNavigation:'bullets' }); });