CAROUSEL | SLIDER

Tornado using third party TinySlider JS source code for creating responsive sliders component.

SLIDER INITIALIZE

to create slider you need to import Tornado JS Methods or use the Global Object to do so then you can create slider with Tornado.slider(selector, {..options..}) method see the code below.

//=====> Import Tornado Methods <=====//
import Tornado from './Base/Tornado';

//=====> Usage <=====//
Tornado.slider('.slider-calss', {.options.});

SLIDER MARKUP

the slider html should looks like this a wrapper with the slider class name or id and inside of it the slides items.

<div class="slider-calss">
    <!-- Item -->
    <div class="item">...</div>
    ....
</div>

ITEMS OPTIONS

list of the slider options related to slide items.

Tornado.slider('.slider-class', {
    items      : 1,     //===> Display Slides Count
    slideBy    : 1,     //===> Change Slide Steps
    autoWidth  : false, //===> Adaptive Width from Each Item
    autoHeight : false, //===> Adaptive Height from Each Item
    center     : false, //===> Center the Active Slide
});

RESPONSIVE OPTIONS

an example of how to change the slider options in each screen size for responsive

Tornado.slider('.slider-class', {
    responsive : {
        small  : { /*..options..*/ }, //===> Small Screens and up
        medium : { /*..options..*/ }, //===> Medium Screens and up
        large  : { /*..options..*/ }, //===> Large Screens and up
        xlarge : { /*..options..*/ }  //===> xLarge Screens and up
    },
});

AUTO-PLAY OPTIONS

list of options for enable or disable auto-play slider and play/pause button.

Tornado.slider('.slider-class', {
    autoplay    : true,  //===> Autoplay Enable
    duration    : 6000,  //===> Autoplay Duration
    hoverPause  : true,  //===> Pause on Hover
    playButton  : false, //===> Show Play Button
    direction   : 'forward', //===> Autoplay Flow ["forward" || "backward"]
});

CONTROLS OPTIONS

list of options for enable or disable slider controls arrows and pagination

Tornado.slider('.slider-class', {
    pagination        : true,   //===> Show Dots Pagination
    navContainer      : false,  //===> Define Pagination Container
    controls          : true,   //===> Show Arrows
    controlsContainer : false,  //===> Define Arrows Container
});