shyft › Options

Setting Options

To make shyft as versatile as possible, there are multiple sources for defining options. From highest to lowest priority, they are:

Setting options via HTML data attributes
Setting options via the options object passed into the JS constructor
Default options as set in the plugin itself

The available options can be found in the table below.

Setting options via the data attribute

To set options via data attributes, add HTML attribute(s) to the wrapper element (the one you'll pass into the constructor). Data attributes should take the form of data-shyft<option_name>.

Note that you cannot set callback functions using this method. Callback functions can only be defined via the options object.

1
2
3
<div id="myshyft" data-shyftautoplay="true">
    <!-- items here -->
</div>

The options object

The options object is a plain JSON object that can set any of the following properties:

Property	Type	Default	Description
numtoshow	int	1	Number of slides to show at one time
numtoscroll	int	1	Number of slides to scroll when changing to next or previous
offset	int	1	Initial slide to show (beginning with 1)
loop	bool	true	Allow looping between first and last slides
autoplay	bool	false	Automatically play the slideshow
hoverpause	boolean	true	When slideshow is playing, pause the slideshow when the user hovers the mouse over the carousel
delay	int	5000	Delay in milliseconds before changing slides when slideshow is playing
usecss	boolean	false	Use CSS3 Transitions instead of jQuery animations for carousel transitions. Defaults to false for browser compatibility.
touch	boolean	true	Enable swipe gestures for touch-enabled devices (also enables mouse drag gestures for non-touch-enabled devices). If set to true, swiping left will change the carousel to the next slide; swiping right will change the carousel to the previous slide.
transition	string	800	Time in milliseconds for the transition between slides
prev	bool	true	Show the previous link
next	bool	true	Show the next link
nav	bool	true	Enable the navigation/pagination links
prevhtml	string	‹	Custom HTML for the previous link
nexthtml	string	›	Custom HTML for the next link
navhtml	string	{{i}}	Custom HTML to be used for all navigation links. If not provided, defaults to the number of the current slide. If you want to use custom HTML and want the slide # you can use `{{i}}` in your string and it will be replaced with the slide #.
prevanim	string	slide	Animation to use for changing to the previous slide.
nextanim	string	slide	Animation to use for changing to the next slide.
changeanim	string	fade	Animation to use for changing to an arbitrary slide.
easing	string	easeOutExpo	Easing function. 'easeOutExpo' is defined as part of shyft.js plugin. To use other easing functions you must define them manually or include an easing library like the one in jQuery UI
onload	function	null	Function to call when the carousel finishes loading.
onupdate	function	null	Function to call when the carousel is updated with new options.
ondestroy	function	null	Function to call when the carousel is destroyed.
onadd	function	null	Function to call when a new slide is added to the carousel.
onremove	function	null	Function to call when a slide is removed from the carousel.
onprechange	function	null	Function to call before a slide change.
onpostchange	function	null	Function to call after a slide change.
onplay	function	null	Function to call when autoplay status changes to play.
onpause	function	null	Function to call when autoplay status changes to pause.
onstart	function	null	Function to call when autoplay is started.
onstop	function	null	Function to call when autoplay is stopped.

1
2
3
4
5
6
7
// Example options object
var options = {
    autoplay: true,
    onload: function {
        alert('loaded');
    }
}