How to use Slick Slider for your website

This blog will show how to use a slick slider or implement a slick js plugin to a website homepage. You can visit the documentation page of the slick js plugin and explore the features of this carousel. This plugin has very cool and flexible features that you can consider while working on your next project.

In this project, we will make a simple homepage with a navbar, and underneath that menu, we will use the slick js plugin to create a nice-looking autoplay carousel. I will suggest you follow the below tutorial from start to finish to have a clear idea about this project's coding.

I hope you have watched the entire video and got the idea about the code for this snippet. Now we talk a little bit about the coding. As you have seen in the video, we have to go to the slick js website and download the plugin from there. We have collected three files from the plugin. one of them is 'slick.css,' the second one is 'slick-theme.css,' and the last one is 'slick.js.' we should add those files to our project as shown in the video. I have sed the latest jquery CDN for this project as well.

You may like this:

In the HTML part, I have taken a header tag with an id of 'wrapper.' I have another div element called 'menu-area' and inserted two div elements named 'logo 'menu-item' inside that div. I have put a random text as a logo in the 'logo' div and an unordered list for the menu in the 'menu-item' div. after that, I have created a div called 'thing' and placed three images which I will use to make the slick carousel for the project.

I am moving on to CSS code. Let us start by giving the 'wrapper' id a width of 1170px and a margin to center this project's content. After that, I have given the image a 100% width so that they scale correctly. Then I have given the 'logo' and 'menu-item' div an individual width and move the contents of the div to the left and right side by using the float property. I applied some basic CSS techniques to make the navbar looks like the image above. Now for initiating the slider, go to the getting started segment of the plugin website and copied the js initialize code instead of 'your-class' use '.thing' because this is the div class name of the image container we are using. After that, go to the setting option, and you will see a range of options available there. You can try all of them one by one, but we are using dots, arrows, autoplay, and autoplay speed options in this project. Set those options according to the code provided below. You can increase or decrease the autoplay speed to see how it looks. I have not made the snippet responsive in the tutorial, but here I added some extra CSS to complete the project seems responsive in the small devices. I have made the logo in the center and nav in the center. I removed the float from both div so that they stacked on each other. For the small devices, the logo will be on the top, and the nav-items will be underneath the logo, but for the large devices logo will be on the left, and the nav-items will be on the right side of the project.

How to implement a slick slider (Source Code):

To do this project, you have to link the appropriate files to your HTML file and add the external CSS file. Please copy the code below and paste it to the places where it is supposed to be placed.

ADD HTML

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>How to use Slick Slider for your website</title>
	<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.css" rel="stylesheet">
	<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.css" rel="stylesheet">
	<link href="style.css" rel="stylesheet">
</head>
<body>
	<header id="wrapper">
		<div class="menu-area">
			<div class="logo">
				<h2>Slick Slider</h2>
			</div>
			<div class="menu-item">
				<ul>
					<li>
						<a href="#">Home</a>
					</li>
					<li>
						<a href="#">About</a>
					</li>
					<li>
						<a href="#">Portfolio</a>
					</li>
					<li>
						<a href="#">Services</a>
					</li>
					<li>
						<a href="#">Contact</a>
					</li>
				</ul>
			</div>
		</div>
	</header>
	<div class="thing" id="wrapper">
		<div><img alt="slider image" src="https://i.postimg.cc/fbppLHvf/1.jpg"></div>
		<div><img alt="slider image" src="https://i.postimg.cc/Vk5KCqvG/2.jpg"></div>
		<div><img alt="slider image" src="https://i.postimg.cc/QtDg01Nr/3.jpg"></div>
	</div>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js">
	</script> 
	<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.js">
	</script> 
	<script>
	       $(document).ready(function(){
	          $('.thing').slick({
	              dots: true,
	              arrows: false,
	              autoplay: true,
	              autoplaySpeed: 2000
	          }) 
	       });
	</script>
</body>
</html>

ADD CSS

#wrapper {
	width: 1170px;
	margin: 0 auto;
}
img {
	width: 100%;
}
.logo {
	width: 20%;
	float: left;
}
.menu-item {
	width: 75%;
}
.menu-item ul {
	float: right;
	list-style: none;
}
.menu-area {
	overflow: hidden;
}
.menu-area ul li {
	display: inline-block;
}
.menu-area ul li a {
	display: inline-block;
	padding: 10px 15px;
	text-transform: uppercase;
	text-decoration: none;
	color: #000;
}
@media (max-width: 767px) {
	#wrapper {
		width: 100%;
	}
	.logo {
		float: none;
		width: 100%;
		text-align: center;
	}
	.menu-item {
		width: 100%;
		text-align: center;
	}
	.menu-item ul {
		float: none;
		padding: 0;
	}
	.menu-area ul li a {
		padding: 5px;
		font-size: 11px;
	}
}

There are many examples available on the plugin website, and you try all of them one by one. Here this is just a simple demonstration of how we can use the plugin only on our website. I hope you liked the snippet. Please follow our social media profiles and stay connected with blog. Thanks for stopping by.

Post a Comment

Post a Comment

About Us

Contact Form

How to use Slick Slider for your website

You might like

Post a Comment

Post a Comment

Contact Form