-
Linked slides
To make a slide into a link, just wrap the <img> inside an <a> and set the href attribute to the destination page.
<ul class="rs-slider">
<li>
<a href="#">
<img src="img1.jpg" alt="" />
</a>
</li>
</ul>
-
Captions
Captions are set by including <div class="rs-caption rs-bottom"> inside the slide <li>. Orientation can be altered by changing the direction class ('rs-bottom', 'rs-top', 'rs-left', 'rs-right', 'rs-bottom-left', 'rs-bottom-right', 'rs-top-left' or 'rs-top-right'). For example: <div class="rs-caption rs-right">.
<ul class="rs-slider">
<li>
<img src="img1.jpg" alt="" />
<div class="rs-caption rs-bottom">
</div>
</li>
</ul>
Additionally, the width of captions can be adjusted using the captionWidth setting when calling the slider. Captions with 'top' and 'bottom' classes will be unaffected as they are full-width by design.
-
Adjusting settings
You'll likely want to have a tinker with the settings to get the slider set up for your needs. You can override default settings when calling the slider - as in the example below, where the slider is used as a slowly fading slideshow without any controls.
<script>
$(document).ready(function () {
$('.rs-slider').refineSlide({
transition : 'fade',
transitionDuration : 7000,
autoPlay : true,
keyNav : false,
delay : 0,
controls : null
});
});
</script>
Here's an exhaustive list of the plugin settings along with their defaults:
transition : 'cubeV', // String (default 'cubeV'): Transition type ('random', 'cubeH', 'cubeV', 'fade', 'sliceH', 'sliceV', 'slideH', 'slideV', 'scale', 'blockScale', 'kaleidoscope', 'fan', 'blindH', 'blindV')
fallback3d : 'sliceV', // String (default 'sliceV'): Fallback for browsers that support transitions, but not 3d transforms (only used if primary transition makes use of 3d-transforms)
controls : 'thumbs', // String (default 'thumbs'): Navigation type ('thumbs', 'arrows', null)
thumbMargin : 3, // Int (default 3): Percentage width of thumb margin
autoPlay : false, // Int (default false): Auto-cycle slider
delay : 5000, // Int (default 5000) Time between slides in ms
transitionDuration : 800, // Int (default 800): Transition length in ms
startSlide : 0, // Int (default 0): First slide
keyNav : true, // Bool (default true): Use left/right arrow keys to switch slide
captionWidth : 50, // Int (default 50): Percentage of slide taken by caption
arrowTemplate : '<div class="rs-arrows"><a href="#" class="rs-prev"></a><a href="#" class="rs-next"></a></div>', // String: The markup used for arrow controls (if arrows are used). Must use classes '.rs-next' & '.rs-prev'
onInit : function () {}, // Func: User-defined, fires with slider initialisation
onChange : function () {}, // Func: User-defined, fires with transition start
afterChange : function () {} // Func: User-defined, fires after transition end
-
User-defined functions/callbacks
There are events where you can tie into the slider to extend/adjust functionality. onInit() - fires on slider initialisation, onChange() - fires at start of slide transition, afterChange() - fires after slide transition.
To reference the slider object inside callbacks use this.slider. This enables you to access internal methods and properties. For example, calling this.slider.next() will advance to the next slide. Here's a list of props/methods you might find useful:
this.slider.$slider // Elem: The slider elem ('.rs-slider')
this.slider.$slides // Elem Arr: Array of slide elems ('.rs-slider > li')
this.slider.$sliderBG // Elem: Slider wrap elem ('.rs-slide-bg')
this.slider.$sliderWrap // Elem: Outer wrap elem - wraps slider, thumbs, arrows ('.rs-wrap')
this.slider.$currentSlide // Elem: The current slide
this.slider.$nextSlide // Elem: The next slide (if one has been specified)
this.slider.totalSlides // Int: Number of slides
this.slider.currentPlace // Int: Index of current slide (starts at 0)
this.slider.cssTransitions // Bool: Whether browser supports CSS transitions
this.slider.cssTransforms3d // Bool: Whether browser supports 3D CSS transforms
this.slider.inProgress // Bool: Whether slider is mid-transition
this.slider.settings // Obj: The settings object (can access individual settings with e.g. - this.slider.settings['transition'])
this.slider.next() // Method: Call transition to next slide
this.slider.prev() // Method: Call transition to next slide
this.slider.transition(slideNum); // Method: Call a transition (param slideNum = int: array position of the new slide)
Below is a quick and dirty example use-case for these props/methods. See here for the live version.
Captions are extracted from the slider, added to an '#info' element and given an 'active' class when their slide is visible.
<script>
$(document).ready(function () {
$('.rs-slider').refineSlide({
onInit : function () {
var i = this.slider.totalSlides;
while (i--) {
var $caption = $(this.slider.$slides[i]).find('div.rs-caption');
if (i === this.slider.currentPlace) $caption.addClass('active');
$caption.removeClass('rs-caption').attr('id', 'info-block-' + i).prependTo('#info');
}
},
onChange : function () {
$('#info').find('> div').removeClass('active');
$('#info').find('#info-block-'+ this.slider.currentPlace).addClass('active');
}
});
});
</script>
