How to create a responsive banner image slider using slick js

This tutorial video to learn how to create responsive banner slider using slick js plugin. There you can learn how to use slick slider plugin.

Video tutorial of responsive banner image slider using slick js

This tutorial video to learn how to create responsive banner slider using slick js plugin. There you can learn how to use slick slider plugin.

Responsive banner image slider using slick js [Source Codes]

This source code can help you to create Responsive banner image slider using slick js
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></title>
<link rel="stylesheet" type="text/css" href="css/slick.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>

<div class="banner_slider_wrap">
	<div class="banner_slider">
		<div><img src="images/slide1.jpg"></div>
		<div><img src="images/slide2.jpg"></div>
		<div><img src="images/slide3.jpg"></div>
	</div>
</div>


<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript" src="js/slick.js"></script>
</body>
</html>

CSS Code

Copy

*{
	box-shadow: border-box;
}
body{
	margin: 0;
}
img{
	max-width: 100%;
}
.banner_slider .slick-next{
	background:#fff url('../images/arrow-right.png') center center no-repeat;
	font-size: 0;
	border:0;
	width: 40px;
	height: 73px;
	background-size: 80%;
	position: absolute;
	right: 0;
	top: 50%;
	margin-top: -36px;
	cursor: pointer;
	z-index: 20
}
.banner_slider .slick-prev{
	background:#fff url('../images/arrow-left.png') center center no-repeat;
	font-size: 0;
	border:0;
	width: 40px;
	height: 73px;
	background-size: 80%;
	position: absolute;
	left: 0;
	top: 50%;
	margin-top: -36px;
	cursor: pointer;
	z-index: 20
}
.banner_slider .slick-dots{
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	z-index: 10;
	text-align: center;
	margin: 0 0 10px;
	padding: 0
}
.banner_slider .slick-dots li{
	list-style: none;
	width: 15px;
	height: 15px;
	border-radius: 50%;
	background:gray;
	display: inline-block;
	margin: 5px;
}
.banner_slider .slick-dots li.slick-active{
	background:#000;
}
.banner_slider .slick-dots li button{
	display: none;		
}

JavaScript Code

Copy

$('.banner_slider').slick({
	  dots: true,
	  infinite: true,
	  autoplay:true,
	  fade:true,
	  speed:500,
	  autoplaySpeed:5000,
	  slidesToShow: 1
	});

How to create a responsive banner image slider using slick js

Video tutorial of responsive banner image slider using slick js

Responsive banner image slider using slick js [Source Codes]

Build a Stop-Watch Web App Using JavaScript

Build Loan EMI Calculator DIY Finance Tool using JavaScript

Navigation Menu Click to Single Page Website Smooth Scrolling Using jQuery