jQuery.slidizle (1.3.23)
This plugin allows you to create fully customizable slider. Slidizle is focused on managing your slider by just applying some classes on each of your html elements so you can have the full control over your slider look.
Install
You can download or clone the repo, or just use bower like this
bower install jquery.slidizle Demo
You can find some demos here : http://olivierbossel.github.io/slidizle/
Get Started
First, you need to include the scripts and css in your page
<script src="jquery.js"></script> <script src="jquery.slidizle.js"></script>The html part
You will need some html to describe your slider. This can be fully changed. You will just need the different slidizle attributes...
<div class="my-cool-slider" data-slidizle> <ul class="my-cool-slider-content" data-slidizle-content> <li class="my-cool-slide"> Hello world </li> <li class="my-cool-slide"> Hello world </li> <li class="my-cool-slide"> Hello world </li> </ul> <ul class="my-cool-navigation" data-slidizle-navigation> <!-- automagically filled with some li for your navigation --> <!-- can be custom too (cf. sample index.html) --> </ul> <button class="my-cool-next-button" data-slidizle-next>Next</button> <button class="my-cool-previous-button" data-slidizle-next>Previous</button> </div>The javascript part
Then, you have multiple options to use slidizle :
Use as a normal jQuery plugin
This is of course a jQuery plugin, so you can use it as it
jQuery(function($) { // init slidizle on all data-overlizle elements var $sliders = $('[data-slidizle]').slidizle(); // you can pass options directly at instanciation like this var $sliders = $('[data-slidizle]').slidizle({ pauseOnHover : true, timeout : 5000 // etc... }); // use the api through jquery element $sliders.filter(':first').slidizle('next'); // get the api from element and use it : var api = $sliders.filter(':first').data('slidizle_api'); api.next();Use as an object
You can also use slidizle as a "Class" directly in your javascript code. The dependence to jQuery remain of course...
// instanciate slidizle : var mySlider = new Slidizle($('#mySlider'), { timeout : 5000 // etc... }); // using the api : mySlider.goto(2); // go to slide with index 2 (mean third slide) // etc...The CSS part
This is totally under your control. You just need to know that slidizle will apply the classes described bellow on each elements of your slider.
Classes
There are the different classes that are applied on your html
Base classes
- slidizle : applied on the container
- slidizle-content : applied on the content container
- slidizle-slide : applied on each of your slides
- slidizle-next : applied on the next button
- slidizle-previous : applied on the previous button
- slidizle-navigation : applied on the navigation container
These classes are applied at the initialisation
States classes
There classes describe the state of your slider
- active : applied on the active slide
- loading : applied on the container and the slide that is currently loading
- forward : applied on the container when go forward
- backward : applied on the container when go backward
- disabled : applied on the next and previous element when need to be disabled
- played : applied on the container when the slider is in play mode
- paused : applied on the container when the slider is in pause mode
- stoped : applied on the container when the slider is in stop mode
- slide-{index} : applied on the container (slide-0, slide-1, etc...)
- loaded-slide-{index} : same as slide-{index} but applied only when the slide is loaded
- first : applied on the first slide
- last : applied on the last slide
- previous : applied on the previous slide
- next : applied on the next slide
- before-active : applied on all the slides that are before the active one
- after-active : opposite of before-active
Options
Here's the list of all the available options :
classes : { // class applied on content wrrapper content : 'slidizle-content', // class applied on next navigation element next : 'slidizle-next', // class applied on previous navigation element previous : 'slidizle-previous', // class applied on all slides that are before the active one beforeActive : 'before-active', // class applied on all slides that are after the active one afterActive : 'after-active', // class applied on the next active slide nextActive : 'next', // class applied on the previous active slide previousActive : 'previous', // class applied on container when the slider is in forward mode forward : 'forward', // class applied on container when the slider is in backward mode backward : 'backward', // class applied on navigation element navigation : 'slidizle-navigation', // class applied on timer element timer : 'slidizle-timer', // not documented // class applied on each slide slide : 'slidizle-slide', // class applied on the next and previous navigation, or the all slider when disabled disabled : 'disabled', // the class applied on container when the slider is at his first slide first : 'first', // the class applied on container when the slider is at his last slide last : 'last', // the play class applied on the container play : 'played', // the pause class applied on the container pause : 'paused', // the stop class applied on the container stop : 'stoped', // an class to access the slider slider : 'slidizle', // the className to add to active navigation, slides, etc... active : 'active', // the className to add to the slider and slides when it is in loading mode loading : 'loading' }, // the slider interval time between each medias timeout : null, // set if the slider has to make pause on mouse hover pauseOnHover : false, // set if the slider has to go next on mouse click nextOnClick : false, // set if the slider has to go first item when next on last loop : false, // set if the slider has to play directly or not if a timeout is specified autoPlay : true, // activate or not the keyboard keyboardEnabled : true, // activate or not the touch navigation for mobile (swipe) touchEnabled : true, // specify if need to load the next content before the transition loadBeforeTransition : true, // specify if the slider is disabled or not (can be a function that return true or false) disabled : false, // callback when the slider is inited onInit : null, // callback when a slide is clicked onClick : null, // callback before the slider change from one media to another beforeChange : null, // callback when the slider change from one media to another onChange : null, // callback after the slider change from one media to another afterChange : null, // callback before the slider begin to load the slide beforeLoading : null, // callback during the loading progress onLoading : null, // callback after the slider has loaded the next slide (before the actual change) afterLoading : null, // callback when the slider change for the next slide onNext : null, // callback when the slider change for the previous slide onPrevious : null, // callback when the slider change his state to play onPlay : null, // callback when the slider change his state to pause onPause : null, // callback when the slider resume after a pause onResume : null All the options can be set directly on the DOM element using the pattern : data-overlizle-{option-separated-with-dash}="{value}"
<div data-slidizle data-slidizle-pause-on-hover="true" data-slidizle-classes-loading="myLoadingClass"> <!-- slider content here... --> </div>
##Â Attributes
Slidizle provide some attributes that you need to apply on your different html elements in order to describe it. Here's the list
- data-slidizle-content : has to be applied on the element that contains your slides (slides need to be direct childs)
- data-slidizle-navigation : applied on the element where you need (or have) your navigation
- data-slidizle-next : make the marked element a trigger to go to the next slide
- data-slidizle-previous : make the marked element a trigger to go to the previous slide
- data-slidizle-slide-id="..." : link a slide with a navigation element (cf the doc bellow)
- data-slidizle-timeout="..." : has to be applied on a slide to specify a custom timeout (milisecond)
Events
Slidizle trigger some events that you can catch to make what you want at certain point of the code execution
- slidizle.init : when ready
- slidizle.beforeChange : before the change happens
- slidizle.change : when change to another slide
- slidizle.afterChange : after the change has been done
- sliditle.beforeLoading : before the loading of next slide is launched (if loadBeforeTransition is at true)
- sliditle.onLoading : during the loading of next slide (if loadBeforeTransition is at true)
- sliditle.afterLoading : after the loading of next slide is launched (if loadBeforeTransition is at true)
- slidizle.next : when go to the next slide
- slidizle.previous : when go to the previous slide
- slidizle.play : when pass in play mode
- slidizle.pause : when pass in pause mode
- slidizle.resume : when the slider get out of pause
- slidizle.stop : when pass in stop mode
- slidizle.click : when clicked on a slide
API
Slidizle expose a simple but powerful api :
next()
Go to next slide
previous()
Go to previous slide
goto( id )
id : can be an index of slide, an id (#myCoolSlide) or an slide-id (cf doc)
Go to a certain slide.
gotoAndPlay( id )
Same as goto but launch a play after
gotoAndStop( id )
Same as goto but launch a stop after
play()
This method is used to play the slider. This wotks only if a timeout is specified in settings
pause()
Pause the slider
stop()
Stop the slider
togglePlayPause()
Switch between play and pause state
getCurrentSlide()
Return the current slide
getNextSlide()
Return the next slide
getPreviousSlide()
Return the previous slide
getPreviousActiveSlide()
Return the previous active slide
getAllSlides()
Return all the slides
getLoadingProgress()
Return the loading progress of the next slide (will return 0 is the loadBeforeTransition setting is at false)
getRemainingTimeout()
Return the remaining timeout until the next slide change (only if a timeout is specified in settings)
getCurrentTimeout()
Return the current timeout in ms since the slide is active (only if a timeout is specified in settings)
getTotalTimeout()
Return the time that the active slide has to be displayed (only if a timeout is specified in settings)
isLast()
Return true if is the last slide active
isFirst()
Return true if is the first slide active
isLoop()
Return if the slider has to loop or not
isPlay()
Return if the slider is in play state
isDisabled()
Return if the slider is disabled or not
isPause()
Return if the slider is in pause state
isStop()
Return is the slider is in stop state
isHover()
Return if the mouse if hover the slider
getSettings
Return the settings of the slider
Advanced usage
These are some useful advanced usage of slidizle
Custom navigation
By default, slidizle will populate your data-slidizle-navigation with the corresponding child on witch the attribute is applied. But if this element is not empty, slidizle will take your elements as navigation.
<div class="my-cool-slider" data-slidizle> <ul class="my-cool-slider-content" data-slidizle-content> <li class="my-cool-slide"> Hello world </li> <li class="my-cool-slide"> Hello world </li> <li class="my-cool-slide"> Hello world </li> </ul> <ul class="my-cool-navigation" data-slidizle-navigation> <li>Navigation item 1</li> <li>Navigation item 2</li> <li>Navigation item 3</li> </ul> </div>By default, the element at index 0 will twigger the slide at index 0, etc... You can change that by using the data-slidizle-slide-id attribute like this
<div class="my-cool-slider" data-slidizle> <ul class="my-cool-slider-content" data-slidizle-content> <li class="my-cool-slide" data-slidizle-slide-id="my-first-slide"> Hello world </li> <li class="my-cool-slide" data-slidizle-slide-id="my-second-slide"> Hello world </li> <li class="my-cool-slide" data-slidizle-slide-id="my-third-slide"> Hello world </li> </ul> <ul class="my-cool-navigation" data-slidizle-navigation> <li data-slidizle-slide-id="my-second-slide">Navigation item 1 that trigger slide 2</li> <li data-slidizle-slide-id="my-first-slide">Navigation item 2 that trigger slide 1</li> <li data-slidizle-slide-id="my-third-slide">Navigation item 3 that trigger slide 3</li> </ul> </div>
