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
![](img/940x740.png)
![](img/940x740.png)
![](img/940x740.png)
![](img/940x740.png)
![](img/940x740.png)
/*==== 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>