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
View Code
<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
View Code
<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
View Code
<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>