Responsive thumbnail image slider | Responsive banner slider with thumbnail slide

This tutorial blog to learn how to create Responsive banner slider with thumbnail image slide using slick slider plugin. This blog to learn how to create responsive thumbnail image slider using slick slider plugin. Given below slick slider plugin link.

Video tutorial of Responsive banner slider with thumbnail slide

This tutorial video to learn how to create Responsive banner slider with thumbnail image slide using slick slider plugin. This video to learn how to create responsive thumbnail image slider using slick slider plugin. Given below slick slider plugin link

Responsive banner slider with thumbnail slide [Source Codes]

This source code can help you to create Responsive banner slider with thumbnail slide.

jQuery library source

Bootstrap CSS source

Slick slider Source

You can also download this source code through the given link. Click here to download source code

HTML Code

Copy

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=1">
<title>Slick Slider</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="css/slick.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>

<div class="slider_wrap">
	<div class="banner_slider">
		<img src="images/slide1.jpg" alt="">
		<img src="images/slide2.jpg" alt="">
		<img src="images/slide3.jpg" alt="">
		<img src="images/slide4.jpg" alt="">
		<img src="images/slide5.jpg" alt="">
		<img src="images/slide6.jpg" alt="">
	</div>
	<div class="thumbnail_slider_area">
		<div class="container">
			<div class="row thumbnail_slider">
				<div class="col">
					<img src="images/slide1.jpg" alt="">	
				</div>
				<div class="col">
					<img src="images/slide2.jpg" alt="">	
				</div>
				<div class="col">
					<img src="images/slide3.jpg" alt="">	
				</div>
				<div class="col">
					<img src="images/slide4.jpg" alt="">	
				</div>
				<div class="col">
					<img src="images/slide5.jpg" alt="">	
				</div>
				<div class="col">
					<img src="images/slide6.jpg" alt="">	
				</div>	
			</div>
		</div>
	</div>
</div>


<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="js/slick.js"></script>
<script type="text/javascript" src="js/custom.js"></script>
</body>
</html>

CSS Code

Copy

*{
  box-sizing: border-box;
}

img{
	max-width: 100%
}
.slider_wrap{
	position: relative;
}
.thumbnail_slider_area{
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	z-index: 1;
}
.thumbnail_slider img{
	border:6px solid #0f0;
}

JavaScript Code

Copy

jQuery(document).ready(function($) {
	$('.banner_slider').slick({
	  slidesToShow: 1,
	  slidesToScroll: 1,
	  arrows: false,
	  fade: true,
	  asNavFor: '.thumbnail_slider'
	});

	$('.thumbnail_slider').slick({
	  slidesToShow: 3,
	  slidesToScroll: 1,
	  asNavFor: '.banner_slider',
	  dots: false,
	  arrows: false,
	  centerMode: true,
	  focusOnSelect: true,
	  responsive: [
	    {
	      breakpoint: 1024,
	      settings: {
	        slidesToShow: 3,
	        slidesToScroll: 3,
	        dots: false,
	  		arrows: false,
	      }
	    },
	    {
	      breakpoint: 600,
	      settings: {
	        slidesToShow: 2,
	        slidesToScroll: 2
	      }
	    },
	    {
	      breakpoint: 480,
	      settings: {
	        slidesToShow: 1,
	        slidesToScroll: 1
	      }
	    }
	    // You can unslick at a given breakpoint now by adding:
	    // settings: "unslick"
	    // instead of a settings object
	  ]

	});
});

Responsive thumbnail image slider | Responsive banner slider with thumbnail slide | Slick slider

Video tutorial of Responsive banner slider with thumbnail slide

Build a Stop-Watch Web App Using JavaScript

Navigation Menu Click to Single Page Website Smooth Scrolling Using jQuery

Create Responsive Mobile Menu using Only HTML CSS | Responsive Navigation Slide Using CSS