UnicornSlider

Features

• requires jQuery 1.7
• works with IE9 and up
• powered by unicorns
• 5 predefined Styles

UnicornSlider Properties

Property	Default	Type	Description
debug	false	Boolean	Debug mode displays infos to the console, values true or false
wrapAround	true	Boolean	Show arrows across borders, values true or false
leanWrapper	false	Boolean	Shrink wrapper to minmal size, values true or false
orientation	"horizontal"	String	Select the animation direction, values "horizontal" or "vertical"
namespace	"unicornslider‑"	String	Prefix string attached to the class of every element generated by the plugin
easing	"swing"	String	Determines the easing method used in jQuery transitions. jQuery easing plugin is supported!
prevText	"prev"	String	Will be inserted in prev tag
nextText	"next"	String	Will be inserted in next tag
style	""	String	Additional class for style in parent element. There are 4 predefined styles ("pinkelephant, earlgrey, lattemacchiato and gargleblaster"), allthough you can of course define your own.
centerActive	"on"	String	Select if active element is centered, values "off", "mobile", "desktop" or "on"
buttonHeight	50	Integer	Height of button element in px
buttonWidth	50	Integer	Width of button element in px
visibleItems	1	Integer	The maximal number of items visible
scrollItems	1	Integer	The maximal number of items to scroll on button click
speed	1000	Integer	Animation speed in Milliseconds
startFrom	0	Integer	The item active on init
init	function() {}	Function	Callback function that fires on init done
button	function() {}	Function	Callback function that fires on button "prev" or "next" before button click is processed
animationStart	function() {}	Function	Callback function that fires on animation started
animationEnd	function() {}	Function	Callback function that fires on animation ended
destroyed	function() {}	Function	Callback function that fires on slider destroyed

debug

debug is a boolean property that will determine if the slider logs actions to the console.

Default: false
Accepts: Boolean

                    
$(".unicornslider").unicornslider({
    debug: true
});
                    
                

wrapAround

wrapAround is a boolean property that will determine if the navigation buttons are shown across borders.

Default: true
Accepts: Boolean

                    
$(".unicornslider").unicornslider({
    wrapAround: false
});
                    
                

leanWrapper

leanWrapper is a boolean property that will determine if the wrapper is shrinked to a minimal width.

Default: false
Accepts: Boolean

                    
$(".unicornslider").unicornslider({
    leanWrapper: true
});
                    
                

orientation

orientation will determine the orientation of the slider.

Default: "horizontal"
Accepts: "horizontal" or "vertical"

                    
$(".unicornslider").unicornslider({
    orientation: "vertical"
});
                    
                

namespace

namespace is a prefix string attached to the class names of all elements generated by the plugin.

Default: "unicornslider-"
Accepts: String

                    
$(".unicornslider").unicornslider({
    namespace: "different-namespace" // adjust css also if you do this!
});
                    
                

easing

easing allows support for jQuery easing! Default options provided by jQuery are "swing" and "linear" but more can be used by included the jQuery Easing plugin. If you choose a non-existent easing method, the slider will use "swing" as a fallback.

Default: "swing"
Accepts: String

                    
$(".unicornslider").unicornslider({
    easing: "linear"
});
                    
                

prevText

prevText defines the text that is shown in the prev button.

Default: "prev"
Accepts: String

                    
$(".unicornslider").unicornslider({
    prevText: "back"
});
                    
                

nextText

nextText defines the text that is shown in the next button.

Default: "next"
Accepts: String

                    
$(".unicornslider").unicornslider({
    nextText: "forth"
});
                    
                

style

style defines additional classes that are added to slider for styling.

Default: ""
Accepts: String

                    
$(".unicornslider").unicornslider({
    style: "my-own-style"
});
                    
                

centerActive

centerActive defines if selected element is centered.

Default: "on"
Accepts: "off", "mobile", "desktop" or "on"

                    
$(".unicornslider").unicornslider({
    centerActive: "off"
});
                    
                

scrollItems

scrollItems defines the maximal number of items to scroll on nav button click (is reduced to number of visible items).

Default: 1
Accepts: Integer

                    
$(".unicornslider").unicornslider({
    scrollItems: 3
});
                    
                

buttonHeight

buttonHeight defines height of the navigation buttons.

Default: 50
Accepts: Integer

                    
$(".unicornslider").unicornslider({
    buttonHeight: 70
});
                    
                

buttonWidth

buttonWidth defines width of the navigation buttons.

Default: 50
Accepts: Integer

                    
$(".unicornslider").unicornslider({
    buttonWidth: 70
});
                    
                

visibleItems

visibleItems defines number of maximal visible items (is reduced to number of visible items).

Default: 1
Accepts: Integer

                    
$(".unicornslider").unicornslider({
    visibleItems: 99 // show as many items as can be shown
});
                    
                

scrollItems

visibleItems defines number of maximal visible items to scroll (is reduced to number of visible items).

Default: 1
Accepts: Integer

                    
$(".unicornslider").unicornslider({
    scrollItems: 99 // scroll as many items as can be scrolled
});
                    
                

speed

speed defines animation speed in ms.

Default: 1000
Accepts: Integer

                    
$(".unicornslider").unicornslider({
    speed: 500 // faster animation
});
                    
                

startFrom

startFrom defines the active element on init.

Default: 0
Accepts: Integer

                    
$(".unicornslider").unicornslider({
    startFrom: 2 // zero based, so third element is 2
});
                    
                

init

init fires on unicornslider init.

Default: function() {}
Accepts: Function

                    
$(".unicornslider").unicornslider({
    init: function() {
        console.log("slider init");
    }
});
                    
                

button

button fires on unicornslider button click.

Default: function() {}
Accepts: Function

                    
$(".unicornslider").unicornslider({
    button: function() {
        console.log("button clicked"); // e.g. bind sounds to this event
    }
});
                    
                

animationStart

animationStart fires on unicornslider animation start.

Default: function() {}
Accepts: Function

                    
$(".unicornslider").unicornslider({
    animationStart: function() {
        console.log("animation started");
    }
});
                    
                

animationEnd

animationEnd fires on unicornslider animation end.

Default: function() {}
Accepts: Function

                    
$(".unicornslider").unicornslider({
    animationEnd: function() {
        console.log("animation ended");
    }
});
                    
                

destroyed

destroyed fires on unicornslider destroyed.

Default: function() {}
Accepts: Function

                    
$(".unicornslider").unicornslider({
    destroyed: function() {
        console.log("slider destroyed");
    }
});