Slider

Lorem ipsum dolor sit amet, adipisicing elit.
Basic Slider
slider
slider
slider
slider
slider
slider
slider
slider
slider
slider
slider
slider
Basic Slider

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".

Syncing Slider

For initialize Syncing Slider Add 1st slider .slider-for Class & 2nd Slider .slider-nav class.

Slider item
slider
slider
slider
slider
slider
slider
Slider Item

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.

Center Item Slider
slider
slider
slider
slider
slider
slider
slider
Slider Item

For Center Item Slider Add .slider-center-focused Class.

For Center Item Slider Add data-slick-center-mode="true" attribute.

Slider with Caption Animation
slider

Welcome To Devkit

Maultipurpose Creative Clean Template

A Creative Web Design & Development Company

Buy Now
slider

Welcome To Devkit

Maultipurpose Creative Clean Template

A Creative Web Design & Development Company

Buy Now
slider

Welcome To Devkit

Maultipurpose Creative Clean Template

A Creative Web Design & Development Company

Buy Now
Slider with Caption Animation
<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 &amp; 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>