Table of Content
Get Started
Features
- Content
- Animation
- Controllers
- Arrow controllers
- Sizes
- Active slide
- Error Messages
- Loader
- Image size and position
- Carousel (looped sliding)
- Timer
Methods
- slibox('slideTo')
- slibox('slideToNext')
- slibox('slideToPrev')
- slibox('setTimeTo')
- slibox('loader')
- slibox('initControllers')
- slibox('initArrows')
- slibox('initTimer')
- slibox('setTime')
- slibox('reloadTimer')
- slibox('initAnimateCSS')
- slibox('imageSize')
- slibox('imagePosition')
- slibox('activeSlide')
- All Options
Changelog
Documentation
Slibox - it's a very fast, powerful, tiny slider. Mobile-friendly, easy to use.
I hope it will be helpful for your development. My contacts: oybek.odili@gmail.com
# Get Started
First, download this ZIP and extract script and style files into your project.
Then, insert links:
In the down of the head
element: <link href="<path to css-file>/slibox.min.css">
In the down of the body
element: <script src="http://code.jquery.com/jquery-1.10.0.min.js"></script>
<script src="<path to js-file>/slibox.min.js"></script>
Then:
After all, add this code:
<script> $('#slider').slibox({ imagesLinks: [<images links>] // There are another options }) </script>
Then, enjoy!
# Features
Content
If you want to add some content to slider, you should add an element for wrapping your content with class .sb-slide
into an element with .sb-slides
class. Everything should be wrapped with you choosed element.
Example:
<h1>Here should be content</h1>Animation
For setting a custom Animation you can add to .sb-slide
animation with animation
css-property like that:
.sb-slide { animation: fadingIn .4s ease-in-out 1; }@keyframes fadingIn { 0% { opacity: 0; } 100% { opacity: 1; } }
If you want to use animate.css... You can do this, only you should add link to your animate.css file and add this property:
animateCSS: ["fadeIn", "slideInUp"]
Every array's element value equals to animation of slide with this element's index. If array's length is lower than images count, last element will be used for all next slides.
Controllers
You can use controllers for better sliders controlling. For that, add a new property renderControllers
. Class: .sb-controller
; data: sb-slider
(For setting a slider for this controller), sb-controller
(Slide's index); Default: true
.
Remote controllers
If want to control slider remotely you can add a new element like that:
Click Here!Then:
$
('.remote-arrow'
).click
(function
() {$
('#demo-slider'
).slibox
('slideTo'
,this
.data
('slide'
)) })
Click Here!
Then, go up to demo slider. Here you can see, demo slider is slided to second slide.
Arrow controllers
For enabling arrow controllers you should to add a property renderArrows
. Class: .sb-arrow
; data: sb-slider
(For setting a slider for this controller), sb-arrow-direction
(Direction of this arrow); Default: true
.
Remote arrows
If want to use remote arrows, add a new element like that:
Click Here!Then:
$
('.remote-arrow'
).click
(function
() { $('#demo-slider').slibox('slideToNext') })
Click Here!
Sizes
height
- for setting a height of slider. When it is false
, height will be an adaptive (width/height = 16/9). If you set some value, slider's height will be equal to this value. Default: false
width
- for setting a width of slider. When it is false
, width will be equal to parent's width (100%). If you set some value, slider's width will be equal to this value. Default: false
.
Active slide
If you want to set active another slide, not first, you can use activeSlide
option. For that, you should set a number of this slide. Default: 1
.
Error messages
You can modify error messages, if you want. For that, set loadErrorMessage
or noImagesMessage
's values to some string.
Loader
You can set a link for loader with loaderLink
option. Only, you should set this option to image link for loader you choosed. This image is a background image. Default: false
.
Image size and position.
imageSize
- for setting a size of image. This option works like a background-size
css-property. Default is "contain"
.
imagePosition
- for setting a position of image. This option works like a background-position
css-property. Default is "center"
.
You can set value with type string
, it will be used for all of slides. But you can use an array. Every array's element value equals to animation of slide with this element's index. If array's length is lower than images count, last element will be used for all next slides.
Carousel
You can add a carousel
option for looped sliding. Default: false
.
Timer
Set to true timer
option, for timed sliding function (Default: false). If you want to set time (in milliseconds) for timer, modify
timerTime
(Default: 5000
). If you don't want looped and timed sliding, set timerCarousel
to false
(Default: true
).
To pause the timer, set paused
key of slider's element to true:
$
('#demo-slider'
).data
('paused'
,true
)
# Methods
slibox('slideTo')
Template:
$
(<your element selector>
).slibox
('slideTo'
,<slide's index that you want to show>
)
Example:
slideTo
(#demo-slider
,3
)
slibox('slideToNext')
Only you should call it to slider, and it will be slided to next slide, if active slide is the first and if carousel
option is true
it will be slided to last slide, here is an example of code:
$
('demo-slider'
).slibox
('slideToNext'
)
slibox('slideToPrev')
Call this method to slider, and it will be slided to previous slide, if active slide is the last and if carousel
option is true
it will be slided to first slide, here is an example of code:
$
('demo-slider'
).slibox
('slideToPrev'
)
slibox('setTimeTo')
Call this method to slider to modify timer's time (in milliseconds), here is an example of code:
$
('demo-slider'
).slibox
('setTimeTo'
,3000
)
slibox('loader')
A method for setting a link for loader:
$
('demo-slider'
).slibox
('loader'
,'<a link to loader image>'
)
slibox('initControllers')
A method for creating controllers:
$
('demo-slider'
).slibox
('initControllers'
)
A method for destroying them:
$
('demo-slider'
).slibox
('destroyControllers'
)
slibox('initArrows')
A method for creating arrows:
$
('demo-slider'
).slibox
('initArrows'
)
A method for destroying them:
$
('demo-slider'
).slibox
('destroyArrows'
)
slibox('initTimer')
A method for initiate timed sliding:
$
('demo-slider'
).slibox
('initTimer'
)
A method for destroying timer functionality:
$
('demo-slider'
).slibox
('destroyTimer'
)
slibox('setTime')
A method for setting timer's time (in milliseconds):
$
('demo-slider'
).slibox
('setTime'
,3000
)
slibox('reloadTimer')
A method for reloading timer:
$
('demo-slider'
).slibox
('reloadTimer'
)
slibox('initAnimateCSS')
A method for initiating animation:
$
('demo-slider'
).slibox
('initAnimateCSS'
,'<Animation class>'
)
Example for setting animations for all slides:
$
('demo-slider'
).slibox
('initAnimateCSS'
,'fadeIn'
)
Or, you can set an array for every slide:
$
('demo-slider'
).slibox
('imageSize'
, ['fadeIn'
,'zoomIn'
])
slibox('imageSize')
A method for setting images sizes:
$
('demo-slider'
).slibox
('imageSize'
,'<Images sizes>'
)
Example:
$
('demo-slider'
).slibox
('imageSize'
,"cover"
)
Or, you can set an array for every slide:
$
('demo-slider'
).slibox
('imageSize'
, ["contain"
,"500px 500px"
])
slibox('imagePosition')
A method for setting images positions:
$
('demo-slider'
).slibox
('imagePosition'
,'<Images positions>'
)
Example:
$
('demo-slider'
).slibox
('imagePosition'
,"left top"
)
Or, you can set an array for every slide:
$
('demo-slider'
).slibox
('imagePosition'
, ["20px"
,"center bottom"
])
slibox('activeSlide')
A method for setting active slide:
$
('demo-slider'
).slibox
('activeSlide'
)
# Options values types
There are list of available values of parameters.
Option Name | Values |
---|---|
activeSlide | Number |
renderArrows | Boolean |
renderControllers | Boolean |
imagesLinks | Array : [ String ] |
loaderLink | String |
imageSize | String |
imagePosition | String |
height | Number |
width | Number |
errorMessage | String |
carousel | Boolean |
timer | Boolean |
timerTime | Number |
timerCarousel | Boolean |
# Changelog
version 1.0.0 (latest):
- Images sizes can be changed.
- Images positions can be changed.
- Carousel option.
- Images loader.
- Arrows and controllers.
- Remote arrows and controllers.
- Dragging feature for mobile users.
- Can be used custom animations.
- Animate.css integration.
- Sliding with timer.
Odilov Oybek