Tornado Logo
Download

Tornado | Carousel

Tornado Using a 3rd Party Plugins for Carousel Components and tha is Slick-Slider Because its the Best.

Sass Customize

in order to edit the Slick Slider Themes and Baisc CSS you can use the css class's to overide the themes or you can edit it with sass Tornado Folder/SCSS/components/_slick-slider.scss and do not forget to compile the main files of the framework Tornado Folder/SCSS/tornado.scss and tornado-rtl.scss.

Baisc Usage and Documentation

for Slick Slider Documentation and Offical Webpage Click Here, and for usage you can simply use the plugin so easly you create a container element for you'r slides and give any class name you want lets say for example we name it slider-component and inside that container you can create your slides html an any way you want its fit any type of content then you initialize the plugin options for the slides container see the code below. 


<div class="slider-component">
    <div class="slide-1"></div>
    <div class="slide-2"></div>
    <div class="slide-3"></div>
    <div class="slide-4"></div>
</div>



$('.slider-component').slick({ Options });

Slick Options

in the Table below you will see The Most Important Options That Will Serve and Cover all you'r needs.

Option Default Type Discription
rtl false boolean Enable/Disable RTL Mode.
infinite true boolean Infinite looping.
initialSlide 0 integer Slide to start on.
autoplay false boolean Enable/Disable Autoplay.
autoplaySpeed 3000 int Autoplay Delay Speed.
speed 300 int Sliding Animation Speed.
slidesToShow 1 int # of slides to show at a time.
slidesToScroll 1 int # of slides to scroll at a time.
rows 1 int initializes grid mode for more then 1 row.
slidesPerRow 1 int this sets how many slides are in each grid row.
dots false boolean Enable/Disable Bullet Pagination.
appendDots $(element) string Change where the navigation dots are attached (Selector, htmlString, Array, Element, jQuery object).
customPaging n/a function Custom paging templates.
arrows true boolean Enable/Disable Next/Previous Buttons.
prevArrow <button type="button" class="slick-prev">Previous</button> string (html | jQuery selector) | object (DOM node | jQuery object) Previous Button Element
nextArrow <button type="button" class="slick-next">Next</button> string (html | jQuery selector) | object (DOM node | jQuery object) Next Button Element
appendArrows $(element) string Change where the navigation arrows are attached (Selector, htmlString, Array, Element, jQuery object).
variableWidth false boolean Disables automatic slide width calculation.
adaptiveHeight false boolean Adapts slider height to the current slide.
centerMode false boolean Enables centered view with partial prev/next slides. Use with odd numbered slidesToShow counts.
centerPadding '50px' string Side padding when in center mode. (px or %).
vertical false boolean Vertical slide direction.
verticalSwiping false boolean Changes swipe direction to vertical.
asNavFor $(element) string Enables syncing of multiple sliders.
focusOnSelect false boolean Enable focus on selected element (click).
focusOnChange false boolean Puts focus on slide after change.
fade false boolean Enables fade Effect.
waitForAnimate true boolean Ignores requests to advance the slide while animating.
cssEase 'ease' string CSS3 easing.
easing 'linear' string animate() fallback easing.
pauseOnDotsHover false boolean Pauses autoplay when a dot is hovered.
pauseOnFocus true boolean Pauses autoplay when slider is focussed.
pauseOnHover true boolean Pauses autoplay on hover.
draggable true boolean Enables desktop dragging.
swipe true boolean Enables touch swipe.
swipeToSlide false boolean Swipe to slide irrespective of slidesToScroll.
edgeFriction 0.15 integer Resistance when swiping edges of non-infinite carousels.
touchMove true boolean Enables slide moving with touch.
touchThreshold 5 int To advance slides, the user must swipe a length of (1/touchThreshold) * the width of the slider.
zIndex 1000 number Set the zIndex values for slides, useful for IE9 and lower.
lazyLoad 'ondemand' string lazy load technique. 'ondemand' loads the image when you slide to it, 'progressive' loads one image after the other when the page loads.

Slick Responsive

for the responsive technique it works simply like That you activate the option responsive: [{ Responsive Settings }] the settings value type is Array of objects in it you Enables settings at given breakpoint. Set settings to "unslick" instead of an object to disable slick at a given breakpoint you can see the example below 


$('.slider-component').slick({ 
    responsive: [{
      breakpoint: 1024,
      settings: {
        slidesToShow: 3,
      }
    }, {
      breakpoint: 600,
      settings: {
        slidesToShow: 2,
        dots: true
      }
    }, {
      breakpoint: 300,
      settings: "unslick" // destroys slick
    }]
});

Single Slider Theme

tornado provide predeisnged theme and example for quick usage for activating the default tornado theme add class name slider-component to the slider element see the example below. 


$('.slider-component').slick({
    rtl: false,
    autoplay: true,
    autoplaySpeed: 5000,
    speed: 500,
    dots: true,
    arrows:true,
    prevArrow: '<a href="javascript:void(0)" class="slick-prev ti-arrow-left-chevron"></a>',
    nextArrow: '<a href="javascript:void(0)" class="slick-next ti-arrow-right-chevron"></a>',
});



<!-- Slider Container -->
<div class="slider-component">
    <!-- Item -->
    <div class="item"> <img src="https://via.placeholder.com/940x840" alt="" class="block-lvl"> </div>
    <!-- Item -->
    <div class="item"> <img src="https://via.placeholder.com/940x840" alt="" class="block-lvl"> </div>
    <!-- Item -->
    <div class="item"> <img src="https://via.placeholder.com/940x840" alt="" class="block-lvl"> </div>
    <!-- Item -->
    <div class="item"> <img src="https://via.placeholder.com/940x840" alt="" class="block-lvl"> </div>
</div>

Gallery Slider Theme


/*==== Gallery Slider ====*/
$('.gallery-slider').slick({
    rtl: false,
    autoplay: true,
    autoplaySpeed: 5000,
    speed: 500,
    arrows:true,
    prevArrow: '<a href="javascript:void(0)" class="slick-prev ti-arrow-left-chevron"></a>',
    nextArrow: '<a href="javascript:void(0)" class="slick-next ti-arrow-right-chevron"></a>',
    asNavFor:'.gallery-thumbnails'
});
/*==== Gallery Thumbnails ====*/
$('.gallery-thumbnails').slick({
    rtl: false,
    autoplay: true,
    autoplaySpeed: 5000,
    speed: 500,
    arrows:false,
    dots: true,
    slidesToShow:4,
    asNavFor:'.gallery-slider',
    focusOnSelect:true,
});



<!-- Gallery Slider -->
<div class="gallery-slider">
    <!-- Item -->
    <div class="item"> <img src="img/940x740.png" alt="" class="block-lvl"> </div>
    <!-- Item -->
    <div class="item"> <img src="img/940x740.png" alt="" class="block-lvl"> </div>
    <!-- Item -->
    <div class="item"> <img src="img/940x740.png" alt="" class="block-lvl"> </div>
    <!-- Item -->
    <div class="item"> <img src="img/940x740.png" alt="" class="block-lvl"> </div>
    <!-- Item -->
    <div class="item"> <img src="img/940x740.png" alt="" class="block-lvl"> </div>
</div>
<!-- Thumbnails Slider -->
<div class="gallery-thumbnails row">
    <!-- Item -->
    <div class="item col-12"> <img src="img/940x740.png" alt="" class="block-lvl"> </div>
    <!-- Item -->
    <div class="item col-12"> <img src="img/940x740.png" alt="" class="block-lvl"> </div>
    <!-- Item -->
    <div class="item col-12"> <img src="img/940x740.png" alt="" class="block-lvl"> </div>
    <!-- Item -->
    <div class="item col-12"> <img src="img/940x740.png" alt="" class="block-lvl"> </div>
    <!-- Item -->
    <div class="item col-12"> <img src="img/940x740.png" alt="" class="block-lvl"> </div>
</div>

Vertical Slider Theme


$('.vertical-slider').slick({
    rtl: false,
    autoplay: true,
    autoplaySpeed: 5000,
    speed: 500,
    arrows:true,
    prevArrow: '<a href="javascript:void(0)" class="slick-prev ti-arrow-left-chevron"></a>',
    nextArrow: '<a href="javascript:void(0)" class="slick-next ti-arrow-right-chevron"></a>',
    dots: true,
    slidesToShow:3,
    vertical:true,
    verticalSwiping:true,
});



<!-- Vertical Slider -->
<div class="vertical-slider">
    <!-- Item -->
    <div class="item"> <img src="img/vertical.png" alt="" class="block-lvl"> </div>
    <!-- Item -->
    <div class="item"> <img src="img/vertical.png" alt="" class="block-lvl"> </div>
    <!-- Item -->
    <div class="item"> <img src="img/vertical.png" alt="" class="block-lvl"> </div>
    <!-- Item -->
    <div class="item"> <img src="img/vertical.png" alt="" class="block-lvl"> </div>
    <!-- Item -->
    <div class="item"> <img src="img/vertical.png" alt="" class="block-lvl"> </div>
</div>
Next Tables Previous Alerts