Create a Carousel Slider Using HTML and Pure CSS

By Faraz - Last Updated: October 15, 2024

Learn how to create a carousel slider using HTML and pure CSS, without JavaScript or jQuery, and make it responsive for your website.

Join us on Telegram

Read Also creating a unique neubrutalism portfolio page with html, css, and javascript.jpg

Creating a Unique Neobrutalism Portfolio Page with HTML, CSS, and JavaScript

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 an amazing pure CSS carousel/slider Using HTML and CSS step by step.

Join My Telegram Channel to Download the Project: Click Here

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.

Source Code

Step 1 (HTML Code):

To get started, we will first need to create a basic HTML file. In this file, we will include the main structure for our carousel slider.

Let break down the HTML code step by step:

1. `DOCTYPE` Declaration and HTML Structure

<!DOCTYPE html>
<html lang="en">

Declares the document as an HTML5 page.
Sets the language of the document to English (lang="en").

2. `<head>` Section

<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>

<title>: Sets the title of the webpage.
<meta charset="UTF-8">: Ensures the character encoding is UTF-8.
<meta name="viewport">: Ensures the page is mobile-friendly.
<link rel="stylesheet" href="styles.css">: Links an external CSS file to style the carousel.

3. `<body>` Section

The body contains the carousel slider.

<div class="carousel">
  <ul class="slides">

<div class="carousel">: Wraps the entire carousel.
<ul class="slides">: Holds all the slides inside an unordered list.

4. Radio Buttons for Slide Navigation

<input type="radio" name="radio-buttons" id="img-1" checked />

Radio buttons are used to control which slide is visible. Each radio input corresponds to a slide.
name="radio-buttons": Ensures only one slide is active at a time (since radio buttons work in groups).
checked: Sets the first slide (img-1) as the default.

5. Individual Slide Structure

<li class="slide-container">
  <div class="slide-image">
    <img src="https://www.codewithfaraz.com/img/code%20with%20Faraz-1.jpg">
  </div>

<li>: Each slide is inside a list item (li).
<div class="slide-image">: Wraps the image.
<img>: Displays the image for this slide.

6. Carousel Controls (Next/Previous Buttons)

<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>

Previous/Next controls use labels to switch between slides.
<label> tags are linked to the radio buttons (for="img-3", for="img-2"). Clicking these labels changes the radio button state, switching the slide.

7. Adding Multiple Slides

The same structure is repeated for slide 2 and slide 3. Each slide has:

An image inside <div class="slide-image">.
Navigation controls (previous and next buttons).

8. Carousel Dots (Indicators)

<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>

Carousel dots allow users to jump to a specific slide.
Each dot is a label associated with a specific radio input (for="img-1", for="img-2", etc.).

This is the basic structure of our carousel slider 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 src="https://www.codewithfaraz.com/img/code%20with%20Faraz-1.jpg">
            </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 src="https://www.codewithfaraz.com/img/code%20with%20Faraz-2.jpg">
            </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 src="https://www.codewithfaraz.com/img/code%20with%20Faraz-3.jpg">
            </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>

Read Also How to Create a Responsive Our Services Section with HTML and CSS.jpg

How to Create a Responsive Our Services Section with HTML and CSS (Source code)

Step 2 (CSS Code):

Once the basic HTML structure of the carousel slider is in place, the next step is to add styling to the carousel slider using CSS.

Let’s break down the CSS code step-by-step to understand what each section does:

1. Carousel Container Styling

.carousel {
  margin-left: 15%;
  margin-right: 15%;
}

Centers the carousel horizontally by adding 15% margins on both sides.

2. `ul.slides` - Slide List Styling

ul.slides {
  display: block;
  position: relative;
  height: 600px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  list-style: none;
}

display: block: Makes the slides take up the entire container width.
position: relative: Allows child elements to use absolute positioning inside the carousel.
overflow: hidden: Ensures that content outside the 600px height is hidden.
list-style: none: Removes default bullet points from the <ul>.

3. Disable Text Selection for All Elements

.slides * {
  user-select: none;
  -ms-user-select: none;
  -moz-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

Prevents users from accidentally selecting text or images within the carousel by disabling text selection across browsers.

4. Hide Radio Inputs

ul.slides input {
  display: none;
}

The radio buttons are used for slide switching but are hidden from view.

5. Slide Container Styling

.slide-container {
  display: block;
}

Ensures that each slide container is displayed as a block element.

6. Slide Image Styling

.slide-image {
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  opacity: 0;
  transition: all 0.7s ease-in-out;
}

position: absolute: Aligns the slide image to the top-left of the container.
width: 100%; height: 100%;: Ensures the image takes up the entire slide.
opacity: 0: Hides the slide initially.
transition: Smoothly transitions opacity and other properties over 0.7 seconds.

Image Resizing Inside Slides

.slide-image img {
  width: auto;
  min-width: 100%;
  height: 100%;
}

Ensures the image maintains its aspect ratio while covering the slide area.

7. Carousel Controls Styling

.carousel-controls {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;
  font-size: 100px;
  line-height: 600px;
  color: #fff;
}

position: absolute: Positions the controls over the slide.
z-index: 999: Ensures controls appear above all other content.
font-size: 100px: Makes the arrow symbols large.

Control Labels Hidden by Default

.carousel-controls label {
  display: none;
  position: absolute;
  padding: 0 20px;
  opacity: 0;
  transition: opacity 0.2s;
  cursor: pointer;
}

display: none: Hides the labels (buttons) initially.
cursor: pointer: Makes them clickable.
transition: Smoothly adjusts opacity when hovered.

8. Hover Effect on Controls

.slide-image:hover + .carousel-controls label {
  opacity: 0.5;
}
.carousel-controls label:hover {
  opacity: 1;
}

When the user hovers over the slide, the control arrows become semi-transparent.
On further hovering over the arrows, they become fully visible.

9. Previous and Next Button Styling

.carousel-controls .prev-slide {
  width: 49%;
  text-align: left;
  left: 0;
}
.carousel-controls .next-slide {
  width: 49%;
  text-align: right;
  right: 0;
}

width: 49%: Each arrow takes half the width of the slide, making the arrows large and clickable.
Text alignment ensures the arrows are positioned on the left and right sides.

10. Carousel Dots (Indicators) Styling

.carousel-dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 20px;
  z-index: 999;
  text-align: center;
}

Dots are positioned at the bottom center of the carousel.
z-index: 999 ensures the dots stay on top of other elements.

Individual Dot Styling

.carousel-dots .carousel-dot {
  display: inline-block;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: #fff;
  opacity: 0.5;
  margin: 10px;
}

Circular dots with border-radius: 50%.
Initially, dots have 50% opacity.
margin: 10px ensures proper spacing between dots.

11. Slide Visibility Based on Radio Button Selection

input:checked + .slide-container .slide-image {
  opacity: 1;
  transform: scale(1);
  transition: opacity 1s ease-in-out;
}

When a radio button is checked, the corresponding slide becomes visible with opacity: 1.
A smooth fade-in transition is applied.

12. Display Controls for the Active Slide

input:checked + .slide-container .carousel-controls label {
  display: block;
}

The previous and next buttons become visible only when the corresponding slide is active.

13. Highlighting Active Dot

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 {
  opacity: 1;
}

When a specific slide is active, the corresponding dot indicator becomes fully opaque.

This will give our carousel slider 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:

Read Also

Creating an Engaging Author Bio Block with Avatar: HTML & Tailwind Guide

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 make a pure CSS carousel slider that is responsive and easy to use.

That’s a wrap!

I hope you enjoyed this post. Now, with these examples, you can create your own amazing page.

Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee

And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!

Thanks!
Faraz 😊

Tags: css, html, carousel sliders, pure css, web development, how to create a pure css carousel slider, step-by-step guide to create carousel sliders using css, tips for building a responsive css slider

End of the article