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 - they're intended to be full-width.
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>
$(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:
maxWidth : 800, // Max slider width - should be set to image width
transition : 'cubeV', // String (default 'cubeV'): Transition type ('custom', 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)
customTransitions : [], // Arr (Custom transitions wrapper)
perspective : 1000, // Perspective (used for 3d transforms)
useThumbs : true, // Bool (default true): Navigation type thumbnails
useArrows : false, // Bool (default false): Navigation type previous and next arrows
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 : '', // 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)
