Introduction:
Surely you have seen many carousel sliders built with JavaScript. But how about creating one with just pure CSS? You probably think JavaScript sliders work great on all modern browsers, don’t you?
This myth is very old now because, after the invention of CSS3, most functions can be easily reproduced with CSS.
Carousel sliders are a popular way to showcase multiple images or products on a website. By using pure CSS to create a slider, without any JavaScript or jQuery, you can reduce page load times and improve website performance. So today I’m going to create a simple carousel slider using HTML and Pure CSS
Let’s start making these amazing pure CSS carousels/sliders Using HTML and CSS step by step.
Prerequisites:
Before starting this tutorial, you should have a basic understanding of HTML, and CSS. Additionally, you will need a code editor such as Visual Studio Code or Sublime Text to write and save your code.
Step 1 (HTML Code):
The first thing we need to do is create our HTML File. We’ll start with well-organized markup. Each slider sets instead of a container so you can easily choose whoever you want. To style each carousel differently, we add an unordered UL tag and define my class slides. we use input type radio to handle the click function.
After creating the files just paste the following codes into your file. Make sure to save your HTML document with a .html extension, so that it can be properly viewed in a web browser.
This is the basic structure of our carousel sliders using HTML, and now we can move on to styling it using CSS.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Pure CSS Carousel Slider</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div>
<div class="carousel">
<ul class="slides">
<input type="radio" name="radio-buttons" id="img-1" checked />
<li class="slide-container">
<div class="slide-image">
<img decoding="async" data-src="https://www.codewithfaraz.com/img/code%20with%20Faraz-1.jpg" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" class="lazyload"><noscript><img decoding="async" src="https://www.codewithfaraz.com/img/code%20with%20Faraz-1.jpg"></noscript>
</div>
<div class="carousel-controls">
<label for="img-3" class="prev-slide">
<span>‹</span>
</label>
<label for="img-2" class="next-slide">
<span>›</span>
</label>
</div>
</li>
<input type="radio" name="radio-buttons" id="img-2" />
<li class="slide-container">
<div class="slide-image">
<img decoding="async" data-src="https://www.codewithfaraz.com/img/code%20with%20Faraz-2.jpg" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" class="lazyload"><noscript><img decoding="async" src="https://www.codewithfaraz.com/img/code%20with%20Faraz-2.jpg"></noscript>
</div>
<div class="carousel-controls">
<label for="img-1" class="prev-slide">
<span>‹</span>
</label>
<label for="img-3" class="next-slide">
<span>›</span>
</label>
</div>
</li>
<input type="radio" name="radio-buttons" id="img-3" />
<li class="slide-container">
<div class="slide-image">
<img decoding="async" data-src="https://www.codewithfaraz.com/img/code%20with%20Faraz-3.jpg" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" class="lazyload"><noscript><img decoding="async" src="https://www.codewithfaraz.com/img/code%20with%20Faraz-3.jpg"></noscript>
</div>
<div class="carousel-controls">
<label for="img-2" class="prev-slide">
<span>‹</span>
</label>
<label for="img-1" class="next-slide">
<span>›</span>
</label>
</div>
</li>
<div class="carousel-dots">
<label for="img-1" class="carousel-dot" id="img-dot-1"></label>
<label for="img-2" class="carousel-dot" id="img-dot-2"></label>
<label for="img-3" class="carousel-dot" id="img-dot-3"></label>
</div>
</ul>
</div>
</div>
</body>
</html>
Step 2 (CSS Code):
Once the basic HTML structure of the carousel sliders is in place, the next step is to add styling to the carousel sliders using CSS. CSS allows us to control the visual appearance of the carousel sliders, including things like  layout, and typography.
Next, we will create our CSS file. We will use some basic CSS rules in this file to create our carousel sliders. We will also add some padding and margin properties to ensure that everything looks correct.
This will give our carousel sliders an upgraded presentation. Create a CSS file with the name of styles.css and paste the given codes into your CSS file. Remember that you must create a file with the .css extension.
.carousel {
margin-left: 15%;
margin-right: 15%;
}
ul.slides {
display: block;
position: relative;
height: 600px;
margin: 0;
padding: 0;
overflow: hidden;
list-style: none;
}
.slides * {
user-select: none;
-ms-user-select: none;
-moz-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
-webkit-touch-callout: none;
}
ul.slides input {
display: none;
}
.slide-container {
display: block;
}
.slide-image {
display: block;
position: absolute;
width: 100%;
height: 100%;
top: 0;
opacity: 0;
transition: all .7s ease-in-out;
}
.slide-image img {
width: auto;
min-width: 100%;
height: 100%;
}
.carousel-controls {
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: 999;
font-size: 100px;
line-height: 600px;
color: #fff;
}
.carousel-controls label {
display: none;
position: absolute;
padding: 0 20px;
opacity: 0;
transition: opacity .2s;
cursor: pointer;
}
.slide-image:hover + .carousel-controls label{
opacity: 0.5;
}
.carousel-controls label:hover {
opacity: 1;
}
.carousel-controls .prev-slide {
width: 49%;
text-align: left;
left: 0;
}
.carousel-controls .next-slide {
width: 49%;
text-align: right;
right: 0;
}
.carousel-dots {
position: absolute;
left: 0;
right: 0;
bottom: 20px;
z-index: 999;
text-align: center;
}
.carousel-dots .carousel-dot {
display: inline-block;
width: 30px;
height: 30px;
border-radius: 50%;
background-color: #fff;
opacity: 0.5;
margin: 10px;
}
input:checked + .slide-container .slide-image {
opacity: 1;
transform: scale(1);
transition: opacity 1s ease-in-out;
}
input:checked + .slide-container .carousel-controls label {
display: block;
}
input#img-1:checked ~ .carousel-dots label#img-dot-1,
input#img-2:checked ~ .carousel-dots label#img-dot-2,
input#img-3:checked ~ .carousel-dots label#img-dot-3,
input#img-4:checked ~ .carousel-dots label#img-dot-4,
input#img-5:checked ~ .carousel-dots label#img-dot-5,
input#img-6:checked ~ .carousel-dots label#img-dot-6 {
opacity: 1;
}
input:checked + .slide-container .nav label { display: block; }
Final Output:
Conclusion:
Creating a pure CSS carousel slider can be a great way to improve website performance and reduce page load times. By using HTML and CSS, you can create a functional and visually appealing slider without the need for JavaScript or jQuery. By following the steps in this tutorial, you’ll be able to create a pure CSS carousel slider that is responsive and easy to use.
