Slick.js+animate.css combine to make Web pages shine.

A code example:

HTML section:-----------------------------------------------------

<link rel= ' stylesheet prefetch ' href= '//cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.3/animate.min.css ' >
<link href= "//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel= "stylesheet" >

<div class= "Modern-slider" >
<!--Item--
<div class= "Item" >
<div class= "Img-fill" >

<div class= "Info" >
<div>
</div>
</div>
</div>
</div>
<!--//Item-
<!--Item--
<div class= "Item" >
<div class= "Img-fill" >

<div class= "Info" >
<div>
</div>
</div>
</div>
</div>
<!--//Item-
<!--Item--
<div class= "Item" >
<div class= "Img-fill" >

<div class= "Info" >
<div>
</div>
</div>
</div>
</div>
<!--//Item-
<!--Item--
<div class= "Item" >
<div class= "Img-fill" >

<div class= "Info" >
<div>
</div>
</div>
</div>
</div>
<!--//Item-
</div>

<script src= ' http://kenwheeler.github.io/slick/slick/slick.js ' ></script>

JS section:-----------------------------------------------------

$ (document). Ready (function () {

$(". Modern-slider "). Slick ({
Autoplay:true,
autoplayspeed:10000,
speed:600,
Slidestoshow:1,
Slidestoscroll:1,
Pauseonhover:false,
Dots:true,
Pauseondotshover:true,
Cssease: ' Linear ',
Fade:true,
Draggable:false,
Prevarrow: ' <button class= ' prevarrow ' ></button> ',
Nextarrow: ' <button class= ' nextarrow ' ></button> ',
});

})

CSS section:-----------------------------------------------------

. img-fill {
width:100%;
Display:block;
Overflow:hidden;
position:relative;
Text-align:center;
}
. img-fill img {
min-height:100%;
min-width:100%;
position:relative;
Display:inline-block;
Max-width:none;
}
*,
*:before,
*:after {
Box-sizing:border-box;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
text-shadow:1px 1px 1px rgba (0, 0, 0, 0.04);
}
. grid1k {
Padding:0 15px;
max-width:1200px;
Margin:auto;
}
. Blocks-box,
. slick-slider {
margin:0;
Padding:0!important;
}
. slick-slide {
/* If RTL make this right */

Float:left;
padding:0;
/* = Slider Style = = = *
}
. Modern-slider. Item. Img-fill {
HEIGHT:100VH;
Background: #000;
}
. Modern-slider. Item. Img-fill. info {
Position:absolute;
width:100%;
height:100%;
top:0px;
left:0px;
Background:rgba (0, 0, 0,. 50);
LINE-HEIGHT:100VH;
Text-align:center;
}
. Modern-slider. Item. img-fill img {
-webkit-filter:blur (5px);
Filter:blur (5px);
}
. Modern-slider. Item. info > Div {
Display:inline-block!important;
Vertical-align:middle;
}
. Modern-slider. Nextarrow {
Position:absolute;
top:50%;
right:0px;
width:45px;
height:45px;
Background:rgba (0, 0, 0,. 50);
border:0 none;
Margin-top: -22.5px;
Text-align:center;
font:20px/45px Fontawesome;
Color: #fff;
Z-index:5;
}
. Modern-slider. Nextarrow:before {
Content: ' \f105 ';
}
. Modern-slider. Prevarrow {
Position:absolute;
top:50%;
left:0px;
width:45px;
height:45px;
Background:rgba (0, 0, 0,. 50);
border:0 none;
Margin-top: -22.5px;
Text-align:center;
font:20px/45px Fontawesome;
Color: #fff;
Z-index:5;
}
. Modern-slider. Prevarrow:before {
Content: ' \f104 ';
}
. Modern-slider. slick-dots {
Position:absolute;
height:5px;
Background:rgba (255, 255, 255,. 20);
bottom:0px;
width:100%;
left:0px;
padding:0px;
margin:0px;
List-style-type:none;
}
. Modern-slider. slick-dots Li Button {
Display:none;
}
. Modern-slider. slick-dots Li {
Float:left;
width:0px;
height:5px;
Background: #d62828;
Position:absolute;
left:0px;
bottom:0px;
}
. Modern-slider. slick-dots li.slick-active {
width:100%;
-webkit-animation:progressdots 11s both;
Animation:progressdots 11s both;
}
. Modern-slider. Item H3 {
font:30px/50px Ralewayb;
Text-transform:uppercase;
Color: #fff;
-webkit-animation:fadeoutright 1s both;
Animation:fadeoutright 1s both;
margin:0;
padding:0;
}
. Modern-slider. Item H5 {
margin:0;
padding:0;
font:15px/30px Ralewayr;
Color: #fff;
max-width:600px;
Overflow:hidden;
height:60px;
-webkit-animation:fadeoutleft 1s both;
Animation:fadeoutleft 1s both;
}
. Modern-slider. item.slick-active h3 {
-webkit-animation:fadeindown 1s both 1s;
animation:fadeindown 1s both 1s;
}
. Modern-slider. item.slick-active h5 {
-webkit-animation:fadeinleft 1s both 1.5s;
Animation:fadeinleft 1s both 1.5s;
}
. Modern-slider. item.slick-active {
-webkit-animation:slick-fastswipein 1s both;
Animation:slick-fastswipein 1s both;
}
. Modern-slider {
Background: #000;
/* = Slider Image Transition = = = *
}
@-webkit-keyframes Slick-fastswipein {
0% {
-webkit-transform:rotate3d (0, 1, 0, 150deg) scale (0) perspective (400px);
Transform:rotate3d (0, 1, 0, 150deg) scale (0) perspective (400px);
}
100% {
-webkit-transform:rotate3d (0, 1, 0, 0deg) scale (1) Perspective (400px);
Transform:rotate3d (0, 1, 0, 0deg) scale (1) Perspective (400px);
}
}
@keyframes Slick-fastswipein {
0% {
-webkit-transform:rotate3d (0, 1, 0, 150deg) scale (0) perspective (400px);
Transform:rotate3d (0, 1, 0, 150deg) scale (0) perspective (400px);
}
100% {
-webkit-transform:rotate3d (0, 1, 0, 0deg) scale (1) Perspective (400px);
Transform:rotate3d (0, 1, 0, 0deg) scale (1) Perspective (400px);
}
}
@-webkit-keyframes Progressdots {
from {
width:0px;
}
to {
width:100%;
}
}
@keyframes Progressdots {
/* = Slick Slider Css Ruls = = = *

from {
width:0px;
}
to {
width:100%;
}
}
. slick-slider {
position:relative;
Display:block;
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
User-select:none;
-webkit-touch-callout:none;
-khtml-user-select:none;
-ms-touch-action:pan-y;
Touch-action:pan-y;
-webkit-tap-highlight-color:transparent;
}
. slick-list {
position:relative;
Display:block;
Overflow:hidden;
margin:0;
padding:0;
}
. slick-list:focus {
Outline:none;
}
. slick-list.dragging {
Cursor:hand;
}
. Slick-slider. Slick-track,
. Slick-slider. slick-list {
-webkit-transform:translate3d (0, 0, 0);
-ms-transform:translate3d (0, 0, 0);
Transform:translate3d (0, 0, 0);
}
. slick-track {
position:relative;
top:0;
left:0;
Display:block;
}
. Slick-track:before,
. slick-track:after {
display:table;
Content: ";
}
. slick-track:after {
Clear:both;
}
. slick-loading. Slick-track {
Visibility:hidden;
}
. slick-slide {
Display:none;
/* If RTL make this right */

Float:left;
height:100%;
min-height:1px;
}
. slick-slide.dragging img {
Pointer-events:none;
}
. slick-initialized. slick-slide {
Display:block;
}
. slick-loading. slick-slide {
Visibility:hidden;
}
. slick-vertical. slick-slide {
Display:block;
Height:auto;
border:1px solid Transparent;
}

Slick.js+animate.css combine to make Web pages shine.