Slick Slider is A 3rd party plugin to create amazing sliders with a lot of features that make it the last carousel you will ever need!.
to use the slick slider create your HTML Structure then initialize it with the js plugin. and for applying the tornado style for the controls add class tornado-ui
Note : the slider fit any type of content.
<div class="single-slider tornado-ui">
<div class="slide">
<h3>First Panel</h3>
</div>
<div class="slide">
<h3>Second Panel</h3>
</div>
<div class="slide">
<h3>Third Panel</h3>
</div>
<div class="slide">
<h3>Fourth Panel</h3>
</div>
</div>
$(".single-slider").slick({
autoplay:true, // Enables Autoplay
autoplaySpeed:5000, // Autoplay Speed in milliseconds
speed:500, // Transition Speed In Milliseconds
dots:true, // Enable or Disable Bullets
arrows:true, // Enable or Disable Arrows
});
Slick Slider Provide an Responsive Breack Points for making responsive carousel see the example below.
Note : for using gaps/gutters between slide's like a grid system add class row to the slider element.
$(".carousel-slider").slick({
autoplay:true, // Enables Autoplay
autoplaySpeed:5000, // Autoplay Speed in milliseconds
speed:500, // Transition Speed In Milliseconds
slidesToShow:4, // Number of the visible slides in desktops
slidesToScroll:1, // Slide's Number To Scroll
responsive:[ // Responsive Breack Points
{breakpoint:981,settings:{
slidesToShow:2, // Number of the visible slides in Tablets
}},
{breakpoint:641,settings:{
slidesToShow:1, // Number of the visible slides in Mobile
}},
],
});
to create a vertical slider set option vertical:true, in the slider js initialize.
and for making Right to Left Slider simply add data attribute data-rtl to the slider element for css ruls and then
turn on th js option rtl:true,
$(".vertical-slider").slick({
autoplay:true, // Enables Autoplay
autoplaySpeed:5000, // Autoplay Speed in milliseconds
speed:500, // Transition Speed In Milliseconds
slidesToShow:3, // Number of the visible slides
slidesToScroll:1, // Slide's Number To Scroll
vertical:true, // Enable or Disable Vertical Sliding
});
<div class="vertical-slider">
<!-- Slide Item -->
<div class="slide">
<div class="card horizontal">
<div class="card-content">
<h3 class="title">Sea Monster</h3>
<h5 class="sub-title">Coworker</h5>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's</p>
<div class="card-footer">
<span class="ti-send more">Read More</span>
<span class="right"> Create in Sep 2014 </span>
</div>
</div>
</div>
</div>
<!-- // Slide Item -->
<!-- Slide Item -->
<div class="slide">
<div class="card horizontal">
<div class="card-content">
<h3 class="title">Sea Monster</h3>
<h5 class="sub-title">Coworker</h5>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's</p>
<div class="card-footer">
<span class="ti-send more">Read More</span>
<span class="right"> Create in Sep 2014 </span>
</div>
</div>
</div>
</div>
<!-- // Slide Item -->
<!-- Slide Item -->
<div class="slide">
<div class="card horizontal">
<div class="card-content">
<h3 class="title">Sea Monster</h3>
<h5 class="sub-title">Coworker</h5>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's</p>
<div class="card-footer">
<span class="ti-send more">Read More</span>
<span class="right"> Create in Sep 2014 </span>
</div>
</div>
</div>
</div>
<!-- // Slide Item -->
<!-- Slide Item -->
<div class="slide">
<div class="card horizontal">
<div class="card-content">
<h3 class="title">Sea Monster</h3>
<h5 class="sub-title">Coworker</h5>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's</p>
<div class="card-footer">
<span class="ti-send more">Read More</span>
<span class="right"> Create in Sep 2014 </span>
</div>
</div>
</div>
</div>
<!-- // Slide Item -->
</div>
Slick Slider Provide an amazing option to relate two sliders with each other you can make a several sliders with this option like "News Slider","Gallery Slider" see the examples below.
$(".gallery-slider").slick({
autoplay:true, // Enables Autoplay
autoplaySpeed:5000, // Autoplay Speed in milliseconds
speed:500, // Transition Speed In Milliseconds
asNavFor:".gallery-thumbnails", // Slider Sync.
});
$(".gallery-thumbnails").slick({
asNavFor:".gallery-slider", // Slider Sync.
focusOnSelect:true, // on Click Sync.
slidesToShow:5, // Number of the visible slides in desktops
slidesToScroll:1, // Slide's Number To Scroll
});
<!-- Gallery Slider -->
<div class="gallery-slider" data-transition="true">
<!-- Gallery Item -->
<div class="gallery-item">
<a href="#"><img src="images/img.jpg" alt=""></a>
</div>
<!-- // Gallery Item -->
<!-- Gallery Item -->
<div class="gallery-item">
<a href="#"><img src="images/img2.jpg" alt=""></a>
</div>
<!-- // Gallery Item -->
<!-- Gallery Item -->
<div class="gallery-item">
<a href="#"><img src="images/img3.jpg" alt=""></a>
</div>
<!-- // Gallery Item -->
<!-- Gallery Item -->
<div class="gallery-item">
<a href="#"><img src="images/img.jpg" alt=""></a>
</div>
<!-- // Gallery Item -->
<!-- Gallery Item -->
<div class="gallery-item">
<a href="#"><img src="images/img2.jpg" alt=""></a>
</div>
<!-- // Gallery Item -->
<!-- Gallery Item -->
<div class="gallery-item">
<a href="#"><img src="images/img3.jpg" alt=""></a>
</div>
<!-- // Gallery Item -->
</div>
<!-- // Gallery Slider -->
<!-- Gallery Thumbnails -->
<div class="gallery-thumbnails row">
<!-- Gallery Item -->
<div class="gallery-item">
<img src="images/thumb.jpg" alt="">
</div>
<!-- // Gallery Item -->
<!-- Gallery Item -->
<div class="gallery-item">
<img src="images/thumb-2.jpg" alt="">
</div>
<!-- // Gallery Item -->
<!-- Gallery Item -->
<div class="gallery-item">
<img src="images/thumb-3.jpg" alt="">
</div>
<!-- // Gallery Item -->
<!-- Gallery Item -->
<div class="gallery-item">
<img src="images/thumb.jpg" alt="">
</div>
<!-- // Gallery Item -->
<!-- Gallery Item -->
<div class="gallery-item">
<img src="images/thumb-2.jpg" alt="">
</div>
<!-- // Gallery Item -->
<!-- Gallery Item -->
<div class="gallery-item">
<img src="images/thumb-3.jpg" alt="">
</div>
<!-- // Gallery Item -->
</div>
<!-- // Gallery Thumbnails -->
.gallery-slider {
margin-top: 30px;
}
.gallery-slider .gallery-item {
height: 500px;
overflow: hidden;
}
.gallery-slider img {
width: 100%;
min-height: 500px;
}
.gallery-thumbnails {
margin-top: 15px;
}
.gallery-thumbnails img {
width: 100%;
}
.gallery-thumbnails .slick-current img {
border: 10px solid #3498db;
}
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum
$(".news-slider").slick({
autoplay:true, // Enables Autoplay
autoplaySpeed:5000, // Autoplay Speed in milliseconds
speed:500, // Transition Speed In Milliseconds
asNavFor:".news-titles", // Slider Sync.
});
$(".news-titles").slick({
asNavFor:".news-slider", // Slider Sync.
focusOnSelect:true, // on Click Sync.
vertical:true, // Enable or Disable Vertical Sliding
slidesToShow:5, // Number of the visible slides in desktops
slidesToScroll:1, // Slide's Number To Scroll
});
<div class="row no-gutter">
<div class="col-s-12 col-m-8 col-l-9">
<!-- News Slider -->
<div class="news-slider" data-transition="true">
<!-- slider item -->
<div class="slider-item">
<a href="#"><img src="images/img.jpg" alt=""></a>
<div class="info">
<a href="#"><h5>Lorem Ipsum is simply dummy text of the printing</h5></a>
<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum</p>
</div>
</div>
<!-- // slider item -->
<!-- slider item -->
<div class="slider-item">
<a href="#"><img src="images/img2.jpg" alt=""></a>
<div class="info">
<a href="#"><h5>Lorem Ipsum is simply dummy text of the printing</h5></a>
<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum</p>
</div>
</div>
<!-- // slider item -->
<!-- slider item -->
<div class="slider-item">
<a href="#"><img src="images/img3.jpg" alt=""></a>
<div class="info">
<a href="#"><h5>Lorem Ipsum is simply dummy text of the printing</h5></a>
<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum</p>
</div>
</div>
<!-- // slider item -->
<!-- slider item -->
<div class="slider-item">
<a href="#"><img src="images/img.jpg" alt=""></a>
<div class="info">
<a href="#"><h5>Lorem Ipsum is simply dummy text of the printing</h5></a>
<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum</p>
</div>
</div>
<!-- // slider item -->
<!-- slider item -->
<div class="slider-item">
<a href="#"><img src="images/img2.jpg" alt=""></a>
<div class="info">
<a href="#"><h5>Lorem Ipsum is simply dummy text of the printing</h5></a>
<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum</p>
</div>
</div>
<!-- // slider item -->
<!-- slider item -->
<div class="slider-item">
<a href="#"><img src="images/img3.jpg" alt=""></a>
<div class="info">
<a href="#"><h5>Lorem Ipsum is simply dummy text of the printing</h5></a>
<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum</p>
</div>
</div>
<!-- // slider item -->
</div>
<!-- // News Slider -->
</div>
<div class="hidden-s-down col-m-4 col-l-3">
<!-- News Titles -->
<div class="news-titles">
<!-- title item -->
<div class="title-item">
Lorem Ipsum is simply dummy text of the printing
</div>
<!-- // title item -->
<!-- title item -->
<div class="title-item">
Lorem Ipsum is simply dummy text of the printing
</div>
<!-- // title item -->
<!-- title item -->
<div class="title-item">
Lorem Ipsum is simply dummy text of the printing
</div>
<!-- // title item -->
<!-- title item -->
<div class="title-item">
Lorem Ipsum is simply dummy text of the printing
</div>
<!-- // title item -->
<!-- title item -->
<div class="title-item">
Lorem Ipsum is simply dummy text of the printing
</div>
<!-- // title item -->
<!-- title item -->
<div class="title-item">
Lorem Ipsum is simply dummy text of the printing
</div>
<!-- // title item -->
</div>
<!-- // News Titles -->
</div>
</div>
/* news slider */
.news-slider .slider-item{
height:500px;
overflow:hidden;
position:relative;
}
.news-slider .slider-item img{
width:100%;
min-height:100%;
}
.news-slider .slider-item .info{
position:absolute;
left:30px;
bottom:30px;
max-width:700px;
padding:30px;
background:rgba(0,0,0,.75);
color:#FFF;
}
.news-slider .slider-item .info h5{
font-size:18px;
color:#FFF;
}
.news-slider .slider-item .info p{
margin:0;
margin-top:15px;
color:#FFF;
}
/* news titles */
.news-titles .title-item{
background:#FFF;
border-bottom:1px solid rgba(0,0,0,.10);
cursor:pointer;
padding:20px;
height:100px;
}
.news-titles .title-item.slick-current{
background:#3498db;
color:#FFF;
}
the main plugin have tow deffernt transiton effect Fade,Slide and tornado added a CSS3 transitions effects to turn the
transitions on add attribute data-transition="true" to the slider wrap element.
and to apply the transition effect simply add A data attribute to the slide item element data-transition with a value of the transtion name.
!important Note : the fade effect not working by js initialize to apply the fade effect set the transtion effect attribute "ON".
<div class="tornado-ui transition-demo" data-transition="true">
<div class="slide" data-src="images/bg.jpg" data-transition="name">
<h3>First Panel</h3>
</div>
</div>
Note : all 3rd party plugins ar already included with the lateast version and customized to work perfectly with tornado.
You can see the original documentation in order to use them in particular way.
| Plugin Name | Definition | Orignal Documentation |
| Slick Slider | the last carousel you will ever need. | Documentation |