For initialize Slider Add
.slider
Class.
For Dots type Line Add
.line-dots
Class.
For Dots inside The Slider Add
.with-dots-inside
Class.
For Slider light Add
.slider-light
Class.
For Arrow outside The Slider Add
.arrow-outside
Class.
For Arrow style circle Add
.arrow-circle
Class.
For Arrow show on hover Add
.arrow-autohide
Class.
Enable Autoplay Opction by adding
data-autoplay="true"
.
For Autoplay speed add
data-autoplay-speed="1000"
.
Enable next and previous buttons by adding
data-arrows="true"
.
Eneble Slider Dots by adding
data-dots="true"
.
For initialize Syncing Slider Add 1st slider
.slider-for
Class & 2nd Slider
.slider-nav
class.
For between sliders gap Add
.slider-gap
Class.
Enter number of slides to show in
data-slides-to-show="5"
attribute.
Enter number of slides to Scroll in
data-slides-to-scroll="2"
attribute.
For Center Item Slider Add
.slider-center-focused
Class.
For Center Item Slider Add
data-slick-center-mode="true"
attribute.
<div class="slider slider-light arrow-circle arrow-autohide" data-nav="true">
<div class="item-image">
<img src="images/slider/slider1.jpg" alt="slider">
<div class="overlay" data-overlay-color="dark" data-overlay="8">
<div class="caption-wrapper text-center">
<div class="row align-items-center">
<div class="col-sm-12">
<h2 class="text-uppercase f-w-700" data-animation-in="fadeInDown">Welcome To Devkit</h2>
<h6 class="text-uppercase f-w-700 mt10" data-animation-in="fadeInDown">Maultipurpose Creative Clean Template</h6>
<p data-animation-in="fadeInDown">A Creative Web Design & Development Company</p>
<a data-animation-in="fadeInUp" href="#" class="button button-light button-circle f-w-700"> Buy Now</a>
</div>
</div>
</div>
</div>
</div>
</div>