Default Theme Dark Theme
Tornado Logo
Tornado has become Phenix Design System

Carousel | Slider - Tornado UI

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 wraper with the slider class name or id and inside of it the slides items.

<div class="slider-calss">
<!-- Item -->
<div class="item">...</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', {
responsive : {
small : { items:2 },
medium : { items:3 },
large : { items:4 },

Copyright (c) 2016-present, Tornado UI Licensed under the terms of the MIT License.