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