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 wraper with the slider class name or id and inside of it the slides items.
<div class="slider-calss">
<!-- Item -->
<div class="item">...</div>
....
</div>Carousel & Gallery Demo
an showcase Example for The Slider in two animations modes
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
});Animations Options
list of options for the slider animations and mode carousel or gallery and when it’s gallery you can manipulate the items to do inter and outer animations like fade in/out.
Tornado.slider('.slider-class', {
animation : "carousel", //===> Animation Mode [carousel, gallery]
flow : "horizontal", //===> Slider Flow
speed : 700, //===> Animation Speed
animateIn : "tns-fadeIn", //===> Inter Animation Class
animateOut : "tns-fadeOut", //===> Outer Animation Class
animateDelay : false, //===> Animation Delay
animateNormal : "tns-normal", //===> Default Animation Class
});Other Options
other slider options that u can use to customize your slider component and change its functionality and you can know how to use the slider methods and other features from the original source TinySlider by William Lin
Tornado.slider('.slider-class', {
uniuqClass : '', //===> add Class to the slider for Styling
mouseDrag : true, //===> Enabel Mouse Drag
touch : true, //===> Enabel Touch Drag
infinite : true, //===> Enabel infinite Sliding
arrowKeys : true, //===> Enabel Keyboard Arrows
rewind : false, //===> Back to 0 When Finsh
fixedWidth : false, //===> Fixed Slider Width
viewportMax : false, //===> Maximum width for fixedWidth/autoWidth
onInit : false, //===> Callback on initialization
});TNS Methods
the methods of TinySlider can be used in different way then the original tiny-slider plugin because Tornado.slider(…) return an array of all sliders matches the selector you target then you can use any method that tiny-slider provide in its core which you can find in TinySlider by William Lin or in the code below.
//====> Slider Init <====//
var theSliders = Tornado.slider('.slider-class');
//====> Method Usage <====//
theSlider.forEach(slider => {
slider = slider.destroy()
});
//====> Methods List <====//
version: version, // tiny-slider version
getInfo: info(),
events: events, // Object
goTo: goTo(),
play: play(),
pause: pause(),
isOn: isOn, // Boolean
updateSliderHeight: updateInnerWrapperHeight(),
refresh: initSliderTransform(),
destroy: destroy(),
rebuild: rebuild()Vertical Mode Demo
an showcase Example for The Slider vertical mode.
//====> Vertical Mode <====//
Tornado.slider('.vertical-mode-demo', {
flow : "vertical",
});Responsive Demo
an showcase Example for The Slider with responsive shows different number of items
Tornado.slider('.multiple-mode-demo', {
items:1,
responsive : {
small : { items:2 },
medium : { items:3 },
large : { items:4 },
}
});