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.
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>
<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>
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: 400px;
}
</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.
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>
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.
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>
...
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.
<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("←");
this.arrowRight.html("→");
},
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>
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).
Added "autoScaleSlider" property. It overrides default slider height, sets it based on "autoScaleSliderWidth" and "autoScaleSliderHeight". Slider CSS width must be set to dynamic value such as "100%", or should change with help of media queries. This allows to scale slider down proportionally down to mobile.
Improved navigation logic. Slides move with speed of your swipe.
Fixed swiping on orientation change bug.
Fixed !important issue, when slide spacing is applied.
Added !important to margins, paddings, list-styles of royalSlidesContainer, royalSlide and royalImage.
Fixed touch navigation in iOS with jQuery 1.4 and lower.
Fixed BlackBerry image loading bug.
Fixed fade transition bug in some browsers.
Improved navigation logic. Added lockAxis
javascript property that allows touch-dragging simultaneously only on one axis.
Fixed slideshow pause on hover bug on some devices.
Added fade transition. slideTransitionType
javascript property can be set to "fade" or "move".
Added background gradient to each slide (royalslider.css line 28).
Added three new skins. Now you need to include skin CSS file. See skins & CSS styling section.
Added spinner graphics instead of 'Loading image...' text.
Dragging cursor is now set using CSS and uses .png cursor by default.
Thumbnails scroller now can be fluid.
Thumbnails scroller with arrows is wrapped into thumbsAndArrowsContainer
CSS class.
Added dragUsingMouse
js property that adds/removes dragging functionality using mouse, but leaves dragging with touch.
hideArrowOnLastSlide
js property is now set to true
by default.
welcomeScreenEnabled
js property is now set to false
by default.
Added startSlideIndex
js property to set start slider index.
Added slideSpacing
js property to set spacing between slides in pixels.
Added blockLinksOnDrag
js property that blocks navigating to url when dragging slides (turned on by default).
Added nonDraggableClassEnabled
js property prevents dragging completely on all elements that have non-draggable
css class inside slide.
Added goToSilent
public method, works exactly like goTo
method but navigates to slide without animation.
Improved destroy()
method that removes slider element and cleans up all events.
Fixed sizing issue, when 100% height is set.
Fixed stop and resume slideshow public methods when pause on hover is enabled.
Major performance optimization for iOS, Android and Blackberry touch devices that support CSS3 3d transforms. You can set disableTranslate3d
option to true
if you want to remove this behaviour. When CSS3 transform is applied advanced easing functions are removed for better performance.
Added keyboard arrows navigation option, see keyboardNavEnabled
javascript property.
Javascript properties imageScaleMode
and imageAlignCenter
are now set to none
and false
by default.
Other small performance improvements.
Added smart lazy loading option with ability to preload nearby images, when current is loaded.
Updated thumbnails scroller navigation logic. Now you can use easilly change size and spacing of thumbnails. See thumbnails section to learn more.
Added ability to change images scale mode. Javascript options added: imageScaleMode
and imageAlignCenter
.
Changed basic HTML structure, now you can add data-src
attribute to royalSlide
to enable lazy loading. See lazy loading section to learn more.
Added disabled
style to navigation arrow if disabled, instead of removing visibility.
Other minor performance improvements and bug fixes.
Added optional thumbnails scroller. New javascript properties: controlNavThumbsNavigation
, controlNavThumbsSpeed
amd controlNavThumbsEasing
.
Completely rewritten class and changed intialization, to comply with jQuery plugin standarts.
Fixed "jumping" on top when clicking navigation.
Fixed resizing of multiple slider instances on one page.
Other minor performance improvements and bug fixes.
Fixed some compability issues.
Fixed pixelated captions with fade animation in ie8 and lower. (see "removeCaptionsOpacityInIE8" js option)
Added "slideshowAutoStart" javascript option.
Added new skin and new example (content slider).
Some minor performance improvements and bug fixes.
Added option to auto hide right arrow on last slide and left on first slide. Always applied for touch devices.
Some minor performance improvements.
Follow me on Twitter or CodeCanyon to get notified about slider updates.