Follow me on Twitter or CodeCanyon to get notified about slider updates.

Thanks for purchasing RoyalSlider. If you have any questions that are beyond the scope of this help file, you've found a bug, need new feature, or you just want me to show your website using this slider, please feel free to email me via contact form on my profile.

Basic Usage

To use the Royal Slider you have to include the following files in your page:

<link rel="stylesheet" href="css/royalslider.css">
<link rel="stylesheet" href="css/royalslider-skins/default/default.css">
<script src='js/jquery-1.6.2.min.js'></script>
<script src="js/jquery.easing.1.3.min.js"></script>
<script src="js/royal-slider-8.1.min.js"></script>

Then add following HTML code in the body section ("default" CSS class means that slider is with default skin):

<div id="mySlider" class="royalSlider default">        
    <!-- Container of slides(images) -->       
    <ul class="royalSlidesContainer">
    	<!-- Slides -->
		<li class="royalSlide">
			<img class="royalImage" src="img/image1.jpg" width="650" height="300"/>
		</li> 
		<li class="royalSlide">
			<img class="royalImage" src="img/image2.jpg" width="650" height="300"/>
		    <div class="royalCaption">
		    	<!-- Caption items, can be <h2>, <p>, <div>, or other block -->
		        <div class="royalCaptionItem" data-move-offset="15">Caption 1 for image 2</div>
		        <h2 class="royalCaptionItem" data-show-effect="fade movetop">Caption 2 for image 2</h2>
		    </div> 
		 </li> 
		<li class="royalSlide">
			<img class="royalImage" src="img/image3.jpg" width="650" height="300"/>
		</li>
    </ul>
</div>

And finally initialize slider (updated in version 3.0):

<script>
$(document).ready(function() {
	$("#mySlider").royalSlider({
		captionShowEffects:["moveleft", "fade"],
	    directionNavAutoHide: true
		/* other options go here, view javascript options to learn more */			
	});  
});
</script>

HTML struture

<div id="mySlider" class="royalSlider default">
    <!-- Option loading(welcome screen), remove this tag if you don't need it. Isn't removed if JS is disabled. -->
    <div class="royalLoadingScreen"><p class="spinner">Loading slider...</p></div>         
    <!-- Container of slides -->       
    <ul class="royalSlidesContainer">    	  	
    	<!-- Simple slide with simple image (royalSlide class must be set) -->
        <li class="royalSlide">
        	<img class="royalImage" src="img/image.jpg" width="600" height="300"/>
        </li>
        
        <!-- Slide with lazy loaded image, use data-src attribute to set image path -->
        <li class="royalSlide" data-src="img/image.jpg"></li> 
        
        <!-- Slide with image and static content -->
        <li class="royalSlide">
        	<img class="royalImage" src="img/image.jpg" width="600" height="300"/>
        	<div>I'm a static content</div>
        </li>
        
        <!-- Slide with lazy loading and animated captions -->
        <li class="royalSlide" data-src="img/image.jpg">
            <div class="royalCaption">
            	<!-- Caption items, can be <h2>, <p>, <div>, or any other block tag. 
            		 Make sure each animated caption has royalCaptionItem class -->
                <div class="royalCaptionItem" data-move-offset="15">Caption 1 for image</div>
                <h2 class="royalCaptionItem" data-show-effect="fade movetop">Caption 2 for image</h2>
            </div> 
         </li> 
         
        <!-- Slide without image, but with static content and animated caption -->
        <li class="royalSlide">        	
            <div>I'm a static content</div>
            <div class="royalCaption">            	
                <div class="royalCaptionItem">I'm animated caption</div>               
            </div>
        </li>
    </ul>
    <!-- Controls (arrows, bullet nav, thumbs) will be added automatically by js here -->       
</div>

Skins & CSS styling

Setting width and height of slider (set size in '%' to make it fluid):

<style type="text/css" media="screen">
	/* Width and height of slider in %, px or em */
    #mySlider {
		width: 100%;			
		height: 900px;
	}
</style>

RoyalSlider plugin has three pre-build skins. To add skin just add its css class to main 'royalSlider' tag and include skin css file. Skins can be found in "css/royalslider-skins" folder. Each skin includes CSS, PNG and PSD file.

<!-- Default skin — white controls on black background. CSS class - "default". -->
<link rel="stylesheet" href="css/royalslider-skins/default/default.css">

<!-- iSkin — 3d-styled skin. CSS class - "iskin". -->
<link rel="stylesheet" href="css/royalslider-skins/iskin/iskin.css">

<!-- Minimal — simple skin with white controls. CSS class - "minimal". -->
<link rel="stylesheet" href="css/royalslider-skins/minimal/minimal.css">

You can edit these skins or create your own.

Javascript Options

Default options and their explanations:

<script>	
$(document).ready(function() {
	
  $("#mySlider").royalSlider({
    
    preloadNearbyImages:true,               // Preloads two nearby images, if they have lazy loading enabled
	imageScaleMode:"none",                  // Scale mode of all images. Can be "fill", "fit" or "none"
	imageAlignCenter:false,		    // Aligns all images to slide center
				
	keyboardNavEnabled:false,	            // Keyboard arrows navigation	
			
    directionNavEnabled: true,              // Direction(arrow) navigation
    directionNavAutoHide: false,            // Direction(arrow) navigation auto hide on hover. 
                                            // (On touch devices arrows are always shown)
    hideArrowOnLastSlide:true,              // Auto hide right arrow on last slide and left on first slide.
											// Always true for touch devices.
                                            
    slideTransitionType: "move",            // Slide transition type: Can be "fade" or "move".
    slideTransitionSpeed:400,               // Slide transition speed in ms (1s = 1000ms).
    slideTransitionEasing:"easeInOutSine",  // Easing type for slide transition. View supported easing types
    
    captionAnimationEnabled: true,          // Set to false if you want to remove all animations from captions  
    captionShowEffects:["fade","moveleft"], // Default array of show effects. 
                                            // Types: 'fade', 'movetop', 'movebottom', 'moveleft', 'moveright'.
                                            // e.g. ['fade', 'movetop'], ['fade'], ['movebottom']
                                            
    captionMoveOffset:20,                   // Default distance for move effect in px
    captionShowSpeed:400,                   // Default caption show speed in ms
    captionShowEasing:"easeOutCubic",       // Default caption show easing
    captionShowDelay:200,                   // Default delay between captions on one slide show
    
    controlNavEnabled: true,                // Control navigation (bullets, thumbs)  enabled
    controlNavThumbs: false,                // Use thumbs for control navigation
                                            // (use data-thumb="myThumb.jpg" attribute in html royalSlide div)
	controlNavThumbsNavigation:true,        // Enables navigation for thumbs
	controlNavThumbsSpeed:400,		    // Thumbnails navigation move speed (1000ms = 1s)
	controlNavThumbsEasing:"easeInOutSine", // Thumbnails navigation easing type
	
    slideshowEnabled: false,                // Autoslideshow enabled          
    slideshowDelay:5000,                    // Delay between slides in slideshow
    slideshowPauseOnHover: true,            // Pause slideshow on hover
    slideshowAutoStart:true,                // Auto start slideshow 
    
    lockAxis: true,                         // Drag navigation only on one axis at once
    
    welcomeScreenEnabled: false,            // Slider welcome(loading) screen enabled
    welcomeScreenShowSpeed:500,             // Welcome screen fade out speed
    
    minSlideOffset:20,                      // Minimum distance in pixels to show next slide while dragging    
    
    disableTranslate3d:false,               // Disables CSS3 transforms on touch devices
                                            
                                            
    autoScaleSlider: false,                 // Overrides css slider size settings. 
                                            // Sets slider height based on properties below
                                            // Slider CSS width must be set to dynamic value, for example 100%.
	autoScaleSliderWidth: 940,              // Base slider width
	autoScaleSliderHeight: 400,             // Base slider height

    startSlideIndex: 0,			    // Start slide index (starting from 0).
	slideSpacing: 0,			    // Distance between slides in pixels.
			
	blockLinksOnDrag: true,		    // Blocks all links when dragging.
	nonDraggableClassEnabled: false,        // Prevents dragging on all elements that have 'non-draggable' class.
                                            // Works only inside slides. Turned off by default to improve performance.
    
    dragUsingMouse:true,                    // Drag using mouse on devices with no touch support
    
    beforeSlideChange: function(){},        // Callback, triggers before slide transition
    afterSlideChange: function(){},         // Callback, triggers after slide transition	
    
    beforeLoadStart:function() {},	    // Callback, triggers before first image loading starts
	loadingComplete: function() {},         // Triggers after load complete and before welcome screen animation
	allComplete: function() {}	            // Callback, triggers after loading and welcome screen animation
  });	
});			  
</script>

Thumbnails

To enable thumbnails you have to add data-thumb attribute to each slide. And set javascript controlNavEnabled and controlNavThumbs properties to true.

<li class="royalSlide" data-thumb="img/mythumb1.jpg">
	<img class="royalImage" src="img/myimage1.jpg" width="600" height="350"/> 
</li>
<li class="royalSlide" data-thumb="img/mythumb2.jpg">
	<img class="royalImage" src="img/myimage2.jpg" width="600" height="350"/> 
</li>

To enable thumbnails scroller set controlNavThumbsNavigation to true. To change thumbnails spacing edit margin-right in slider css file, style .royalControlNavOverflow a.royalThumb. You can change thumbnails size here too.

HTML Captions

You can add unlimited number of captions with any content inside inside each slide, but don't use too much of them, because it can hurt slider performance.

These settings are optional and override default settings in javascript (remove comments before pasting):

...
<div class="royalCaptionItem" 
	data-show-effect="fade movetop"   // Show effects separated by one space.
                                      // Types: 'fade', 'movetop', 'movebottom', 'moveleft', 'moveright'
                                      // e.g. 'fade movetop', 'fade', 'movebottom', 'fade moveleft'
	data-move-offset="15"             // Distance for move* effect in pixels
	data-delay="500"                  // Delay before caption is shown in ms. (1s = 1000ms)
	data-easing="easeOutBack"         // Caption show easing. View supported easing types
	data-speed="2000"                 // Caption show animation speed in ms. 
>Caption item content.(text,image or other)</div>
...

To position captions on slide use CSS properties. For animated captions use left and top CSS properties to position them.

...
<li class="royalSlide" style="background-image:url(image.jpg);"> 
	<div class="royalCaption" style="left:25%; top:120px; color:#C00;">
		<div class="royalCaptionItem" data-show-effect="fade moveleft">Caption one</div>
		<div class="royalCaptionItem" data-show-effect="fade movetop" data-speed="400">Caption two</div>
		<div class="royalCaptionItem" data-show-effect="fade">Caption three</div>
	</div>
</li>
...

Lazy Loading

To enable lazy loading add data-src attribute with path to image to slide. Do not add image tag with royalImage class inside slide.

<li class="royalSlide" data-src="img/image1.jpg"></li>
<li class="royalSlide" data-src="img/image2.jpg"></li>

If you want to disable preloading of two nearby images after current is loaded set preloadNearbyImages javascript property to false.

Public Methods, Properties

<script>
        
    // Getting RoyalSlider instance (new in update 3.0)
    var mySliderInstance = $("#mySlider").royalSlider({
    	/* options go here */
    }).data("royalSlider");	
    //or
    var mySliderInstance = $("#mySlider").data("royalSlider");
    
        
	
	// Public methods
	mySliderInstance.goTo(1);            // Go to to second slide. 
										 // Make sure that you pass integer to this function.
										 
	mySliderInstance.goToSilent(0)       // Go to first slide without animation
	
	mySliderInstance.next();             // Go to next slide
	mySliderInstance.prev();
	
	mySliderInstance.resumeSlideshow();  // Play slideshow 									     						     
	mySliderInstance.stopSlideshow();    // Stop slideshow	
	
	mySliderInstance.updateSliderSize(); // Update slider size (use it if you've got sizing issues)	
	mySliderInstance.destroy();          // Destroy all slider events and remove slider element
	
	
	// Public properties			
	mySliderInstance.numSlides           // Number of slides
	mySliderInstance.currentSlideId      // Current slide id
	mySliderInstance.lastSlideId         // Last(previous) slide id    
	mySliderInstance.sliderWidth		 // Slider width
	mySliderInstance.sliderHeight		 // Slider height
    
</script>

Examples:

<script>
	//Example, replacing arrows with arrow symbols and adding "1 / 5" naigation
	var mySliderInstance = $('#sliderId').royalSlider({
		slideTransitionSpeed:400,
		beforeLoadStart:function() {					
			$("p.navId").text((this.currentSlideId+1) + "/"  +   (this.numSlides) );
			this.arrowLeft.html("&larr;");
			this.arrowRight.html("&rarr;");
		},
		beforeSlideChange:function() {
			$("p.navId").text((this.currentSlideId+1) + "/"  +   (this.numSlides) );
		}		
	}).data("royalSlider");
	
	
    // Example, adding toogle slideshow button (button id is "myToogleSlideshowButton")
	$("#myToogleSlideshowButton").click(function(){
        if(mySliderInstance.isSlideshowRunning) {
            $(this).html("Play slideshow");
            mySliderInstance.stopSlideshow();          
        } else {
            $(this).html("Stop slideshow");
            mySliderInstance.resumeSlideshow();
        }
    });
</script>

FAQ

Element inside slide isn't displayed properly, but works correctly outside the slider.

Usually this problem appears with input or audio tags. Try to set nonDraggableClassEnabled js property to true and add non-draggable class to element.

How do I put full-size link in each slide?

You can wrap img tag with a tag, or create empty full-size overlay with link inside slide. Also make sure that blockLinksOnDrag js property is set to true.

How do I resize slider proportionally?

Set "autoScaleSlider" js propertty to true. Slider CSS width must be set to dynamic value, such as "100%", or should change with help of media queries. If you want images in slides scale down and center too, so set "imageAlignCenter" to true and "imageScaleMode" to "fill" or "fit".

I have black border around slider, how can I get rid of it?

This border is likely slider background, which pops up because of mobile browser scaling issue. You need to set viewport meta tag to no-scale, or remove slider background (royalslider.css line 30).

Changelog

Version 8.1

Version 8.0

Version 7.9.1

Version 7.9

Version 7.8

Version 7.7

Version 7.5

Version 7.0

Version 6.0

Version 5.1

Version 5.0

Version 4.0

Version 3.0

Version 2.1

Version 2.0

Version 1.1

Designed and developed by Dmitry Semenov.