JS Tutorial
- Overview
- Documents
jQuery Slidizle 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.
Source: github.com
1. INCLUDE JS FILES
<script src="jquery.js"></script> <script src="jquery.slidizle.js"></script>
2. HTML
<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>
3. JAVASCRIPT
jQuery(function($) {
// setup slidizle
$('[data-slidizle]').slidizle();
});
4. CLASSES
There are the different classes that are applied on your html
- 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
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
- 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...)
5. 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)
6. 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 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 when disabled
disabled : 'disabled',
// 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'
},
// save the transition options like duration, ease, etc (by default, no transition in js)...
transition : {
// the name or callback function of the transition to use
callback : null,
duration : 1000,
ease : ''
},
// 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,
// callback when the slider is inited
onInit : null,
// callback when a slide is clicked
onClick : null,
// callback when the slider change from one media to another
onChange : 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>
7. 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.change : when change to another slide
- 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
8. API
Slidizle expose a simple but powerful api :
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
togglePlayPause() : Switch between play and pause state
getCurrentSlide() : Return the current slide
getNextSlide() : Return the next slide
getPreviousSlide() : Return the previous slide
getAllSlides() : Return all the slides
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
isPause() : Return if the slider is in pause state
isStop() : Return is the slider is in stop state
