Slick Slider

Fully responsive. Scales with its container.

Main Feature: Separate settings per breakpoint. Uses CSS3 when available. Fully functional when not. Swipe enabled. Or disabled, if you prefer. Desktop mouse dragging. Infinite looping. Fully accessible with arrow key navigation. Add, remove, filter & unfilter slides. Autoplay, dots, arrows, callbacks, etc...

Basic slick slider

Use the .post-carausel-1

                                                    
<div class="post-carausel-1 row">
    <div class="col">
        <div class="post-thumb position-relative">
            <div class="thumb-overlay img-hover-slide border-radius-5 position-relative" style="background-image: url(....)">
                <a class="img-link" href="single.html"></a>
                <div class="post-content-overlay">
                    <div class="entry-meta meta-0 font-sm mb-10">
                        <a href="category.html"><span class="post-cat bg-brand text-white">Travel</span></a>
                    </div>
                    <h6 class="post-title">
                        <a class="text-white" href="single.html">.........</a>
                    </h6>
                    <div class="entry-meta meta-1 font-sm color-grey mt-10 pr-5 pl-5">
                        <span class="post-on">02 Jan</span>
                        <span class="hit-count has-dot">23k Views</span>
                        <a class="float-right" href="#"><i class="ti-heart"></i></a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
                                                    
                                                
Full slideshow

Full slideshow Width thumbnail navigation

                                                    
<div class="featured-slider-2">
    <div class="featured-slider-2-items">
        <div class="slider-single">
            <div class="post-thumb position-relative">
                <div class="thumb-overlay position-relative border-radius-10" style="background-image: url(.........)">
                    <div class="post-content-overlay">
                        <div class="container">
                            <div class="entry-meta meta-0 font-sm mb-10">
                                <a href="category.html" tabindex="0"><span class="post-cat bg-brand text-white">Travel</span></a>
                            </div>
                            <h3 class="post-title mt-20 mb-15">
                                <a class="text-white" href="single.html" tabindex="0">......</a>
                            </h3>
                            <div class="entry-meta meta-1 font-sm text-white mt-15 mb-15">
                                <span class="post-on"><i class="ti-marker-alt"></i>5 January 2020</span>
                                <span class="time-reading"><i class="ti-timer"></i>12 mins read</span>
                                <span class="hit-count"><i class="ti-bolt"></i> 169k Views</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="container position-relative">
        <div class="arrow-cover text-white"></div>
        <div class="featured-slider-2-nav-cover">
            <div class="featured-slider-2-nav">
                <div class="slider-post-thumb mr-15 position-relative">
                    <img class="border-radius-5 mb-15" src="........." alt="">
                    <span class="top-right-icon bg-warning">
                        <i class="ti-heart"></i>
                    </span>
                </div>
                <div class="slider-post-thumb mr-15 position-relative">
                    <img class="border-radius-5 mb-15" src="...." alt="">
                </div>
            </div>
        </div>
    </div>
</div>
                                                     
                                                
Auto play

Use the .post-carausel-3

                                                    
<div class="post-carausel-3 post-module-1">
    <div class="post-thumb position-relative">
        <div class="thumb-overlay img-hover-slide position-relative" style="background-image: url(....)">
            <a class="img-link" href="single.html"></a>
            <div class="post-content-overlay ml-30 mr-30">
                <div class="entry-meta meta-0 font-sm mb-20">
                    <a href="category.html"><span class="post-cat bg-primary text-white">Travel</span></a>
                </div>
                <h6 class="post-title">
                    <a class="text-white" href="single.html">.......</a>
                </h6>
                <div class="entry-meta meta-1 font-sm color-grey mt-10 pr-5 pl-5">
                    <span class="post-on">02 Jan</span>
                    <span class="hit-count has-dot">23k Views</span>
                    <a class="float-right" href="#"><i class="ti-heart"></i></a>
                </div>
            </div>
        </div>
    </div>
</div>