<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://rawgit.com/kenwheeler/slick/master/slick/slick.js"></script>
<div id="slider">
<div class="slides">
<div>image 1</div>
<div>image 2</div>
<div>image 3</div>
<div>image 4</div>
<div>image 5</div>
</div>
</div>
<div id="slider-overlay">
<div class="slides">
<div>caption 1</div>
<div>caption 2</div>
<div>caption 3</div>
<div>caption 4</div>
<div>caption 5</div>
</div>
</div>
<div id="slick-caption-list">
<div class="slides slick-dots-thumb">
<div>thumb 1</div>
<div>thumb 2</div>
<div>thumb 3</div>
<div>thumb 4</div>
<div>thumb 5</div>
</div>
</div>
.slides {
width: auto;
margin: 30px 50px 50px;
}
.slick-slide {
background: #3a8999;
color: white;
padding: 40px 0;
font-size: 30px;
font-family: "Arial", "Helvetica";
text-align: center;
}
.slick-prev:before,
.slick-next:before {
color: black;
}
.slick-dots {
bottom: -30px;
}
.slick-current {
color: #e1d7d2;
}
.slick-dots-thumb .slick-slide:not(.slick-current) {
opacity: 0.1;
}
.slick-dots-thumb .slick-slide {
font-size: 17px;
margin: 0 0.25em;
}
.slick-slide:nth-child(2) {
background: #e84a69;
}
.slick-slide:nth-child(3) {
background: #036;
}
.slick-slide:nth-child(4) {
background: #998099;
}
.slick-slide:nth-child(5) {
background: #808c99;
}
$('#slider .slides').slick({
lazyLoad: 'progressive',
arrows: true,
dots: true,
speed: 500,
infinite: true,
cssEase: 'ease-in-out',
swipe: false,
fade: true,
asNavFor: '#slider-overlay .slides, .slick-dots-thumb'
});
$('#slider-overlay .slides').slick({
lazyLoad: 'progressive',
arrows: true,
// fade: true,
centerPadding: '0px',
infinite: true,
centerMode: true,
speed: 500,
swipe: false,
cssEase: 'ease-in-out',
slidesToShow: 1,
adaptiveHeight: true,
asNavFor: '.slick-dots-thumb, #slider .slides'
});
$('.slick-dots-thumb').slick({
lazyLoad: 'progressive',
arrows: false,
infinite: true,
slidesToShow: 3,
centerMode: true,
centerPadding: '53px',
adaptiveHeight: true,
cssEase: 'ease-in-out',
asNavFor: '#slider-overlay .slides, #slider .slides',
focusOnSelect: true,
});
