Web designing is an art and its improving day by day. Most of the front end developers are familiar with the term CSS sliders. The slider is one of the most popular design technique. If you have an e-commerce site or a business site with lots of services and offers then the slider will be the best way to showcase them. In this post, I will show you how to create a professional CSS slider for your website.

What is CSS slider and where we can use it

CSS slider is a front-end design technique. Its based on CSS & JavaScript so we can easily include it in our HTML. A slider basically consists of multiple images and buttons to slide through.

sliderSome common use of sliders is in e-commerce, hosting websites, business sites. It’s really a great way to showcase multiple images in a single place. A slider is placed on the top of the page. So it helps to grab users attention faster. In addition to all advantages, sliders also have some major disadvantages. Slider’s can make your site much slower. So it’s advised to use maximum 3 images in a slider. Don’t forget to compress the images before you use them. I have found a great tool called TinyPNG for this purpose. So let’s start our project and create our own CSS slider.

CSS slider markup

We are not going to use any 3rd party libraries or frameworks so it will be a bit longer. First of all, we will wrap our markup into a single parent div. I hope you guys know the basic HTML structure so I am just showing what you have to put inside body.

<div class="wrapper"></div>

Now inside the wrapper, we will need 2 things arrow controls and images. So let’s add markup to create the controls first.

<div id="arrow-left" class="arrow"></div>
<!-- pictures will be placed here -->
<div id="arrow-right" class="arrow"></div>

You can see both of the div has an id we will use it later in javascript. So finally its time to add the slides.

<div id="slider">
	<div class="slide slide1">
		<div class="slide-content">
			<span>Caption 1</span>
		</div>
	</div>
</div>

In the above piece of code, I have just added 1 slide but you can add as many as you want. The slides are contained in a parent div with id slider. Finally, our markup is ready its time to add some CSS to make it look awesome.

CSS slider stylesheet

Let’s add some basic style rules first to our parent elements.

body, #slider, .wrapper ,.slide-content {
	margin:0;
	padding:0;
	font-family:"Century Gothic";
	width:100%;
	height:100vh;
	overflow-x:hidden;
}

I have added height to 100vh it will stretch the elements to cover the entire viewport height. Now we need to set the wrapper position to relative. So now let’s move to the slides.

.slide {
	background-size:cover;
	background-position:center;
	background-repeat:no-repeat;
}
.slide1 {
	background-image:url('images/image1.jpeg');
}

So you can see it’s so simple and easy to add more images. You just have to add a background image to the class. Now our slides are ready so we need to focus on contents inside of it.

.slide-content {
	display:flex;
	flex-direction:column;
	justify-content:center;
	align-items:center;
	text-align:center;
}
.slide-content span {
	font-size:5rem;
	color:#fff;
	background:rgba(0,0,0,0.8);
	padding:10px 20px;
}

I am using flexbox to make the task much easier. If you are not familiar with flexbox you can check my flexbox guide. So finally our slides and the contents are ready its time to style the arrows.

.arrow {
	cursor:pointer;
	position:absolute;
	top:50%;
	margin-top:-35px;
	width:0;
	height:0;
	border-style:solid;
}
#arrow-left {
	border-width:30px 40px 30px 0;
	border-color:transparent #fff transparent transparent;
	left:0;
	margin-left:30px;
}
#arrow-right {
	border-width:30px 0 30px 40px;
	border-color:transparent transparent transparent #fff;
	right:0;
	margin-right:30px;
}

The class arrow has just some basic style rules. After that left and right arrows are styled with border width and colours. Finally, our HTML and CSS is ready therefore let’s move to javascript.

CSS slider javascript

Before I show you the javascript part let me show you how the project will look like.

Hope you have liked the project so let’s move to the javascript part. First of all, we need to create some variables. The current variable will be used to store the current instance of the slide.

let sliderImages = document.querySelectorAll('.slide'),
	arrowRight = document.getElementById('arrow-right'),
	arrowLeft = document.getElementById('arrow-left'),
	current = 0;

Now we have to reset the slider images as follows.

function reset() {
	for(let i = 0; i < sliderImages.length; i++) {
		sliderImages[i].style.display = "none";
	}
}

First of all, it will hide all the images. So now its time to initialize the first image.

function startSlide() {
	reset();
	sliderImages[0].style.display = 'block';
}

The startSlide function will show the first image after calling the reset function. Now we need to create functions for sliding functionality.

function slideLeft() {
	reset();
	sliderImages[current - 1].style.display = 'block';
	current--;
}
function slideRight() {
	reset();
	sliderImages[current + 1].style.display = 'block';
	current++;
}

Both of the above methods calls the reset method at first. In slideLeft, i am doing decrement to go back to the previous image. In slideRight, I am increasing the value of current to go to the next image. Now it’s time to add event listeners to our arrows.

arrowLeft.addEventListener('click',function() {
	if(current == 0) {
		current = sliderImages.length;
	}
	slideLeft();
});
arrowRight.addEventListener('click',function() {
	if(current == sliderImages.length - 1) {
		current = -1;
	}
	slideRight();
});

The above code has just done the following tasks. If someone presses the left arrow when they are at first image it will move to the last image. If someone presses the right arrow when they are at last image it will move to the first image. So everything is ready you just need to call the startSlide method at the last line of your js file.

startSlide();

So guys our css slider is ready now you can customize in any way you want. If you have liked this post then don’t forget to subscribe for more latest updates.

Categories: CSS

Subham Mitra

Subham Mitra is a full-stack developer as well as well as an aspiring entrepreneur who is pursuing MCA and providing brilliant stuff for a great range of people's through Coders Diaries.

https://codersdiaries.com


Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

WhatsApp WhatsApp us