"slick slider double"
Bootstrap 4.1.1 Snippet by Shivamsemisetia

<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, });

Related: See More


Questions / Comments: