<div class="slideshow">
<div class="slider">
<div class="item">
<img src="https://images.unsplash.com/photo-1445768593937-05a3f7832b68?dpr=1&auto=compress,format&crop=entropy&fit=crop&w=700&h=500&q=80" />
</div>
<div class="item">
<img src="https://images.unsplash.com/photo-1443363742879-63e3d75de2f8?dpr=1&auto=compress,format&crop=entropy&fit=crop&w=700&h=500&q=80" />
</div>
<div class="item">
<img src="https://images.unsplash.com/photo-1445964047600-cdbdb873673d?dpr=1&auto=compress,format&crop=entropy&fit=crop&w=700&h=500&q=80" />
</div>
<div class="item">
<img src="https://images.unsplash.com/photo-1446329813274-7c9036bd9a1f?dpr=1&auto=compress,format&crop=entropy&fit=crop&w=700&h=500&q=80" />
</div>
</div>
</div>
body,
html {
height: 100%;
background: #333;
font-family: 'Roboto', sans-serif;
}
.slideshow {
position: relative;
z-index: 1;
height: 100%;
max-width: 700px;
margin: 50px auto;
}
.slideshow * {
outline: none;
}
.slideshow .slider {
box-shadow: 0 20px 50px -25px black;
}
.slideshow .slider-track {
-webkit-transition: all 1s cubic-bezier(0.7, 0, 0.3, 1);
transition: all 1s cubic-bezier(0.7, 0, 0.3, 1);
}
.slideshow .item {
height: 100%;
position: relative;
z-index: 1;
}
.slideshow .item img {
width: 100%;
-webkit-transition: all 1s cubic-bezier(0.7, 0, 0.3, 1);
transition: all 1s cubic-bezier(0.7, 0, 0.3, 1);
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
.slideshow .item.slick-active img {
-webkit-transform: scale(1);
transform: scale(1);
}
$('.slider').slick({
draggable: true,
arrows: false,
dots: true,
fade: true,
speed: 5000,
infinite: true,
cssEase: 'cubic-bezier(0.7, 0, 0.3, 1)',
touchThreshold: 100
})
<link rel="stylesheet prefetch" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css">
<link rel="stylesheet prefetch" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css">
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.js"></script>
