Create a Responsive Image Slider Using Pure CSS

Learn how to design a fully functional, responsive image slider using only CSS. This step-by-step tutorial includes code examples and easy explanations for beginners.

🎯 Design a CSS-Only Image Slider

Creating an image slider usually requires JavaScript, but you can build a beautiful and functional image slider using only CSS. In this tutorial, we’ll walk you through every step of creating a responsive CSS-only image slider with easy-to-understand code.

🧰 What You’ll Learn

🔥 Read with Full Features on Our Website
How to structure HTML for a slider
Use CSS animations and transitions
Add navigation using radio buttons or checkboxes
Google Advertisement

Make the slider responsive for mobile devices

🧱 Step 1: Basic HTML Structure

First, we’ll set up the HTML skeleton. This includes a container, radio inputs for navigation, slide images, and labels as controls.

<div class="slider">
  <input type="radio" name="slider" id="slide1" checked>
  <input type="radio" name="slider" id="slide2">
  <input type="radio" name="slider" id="slide3">

  <div class="slides">
    <div class="slide" id="s1">
      <img src="image1.jpg" alt="Image 1">
    </div>
    <div class="slide" id="s2">
      <img src="image2.jpg" alt="Image 2">
    </div>
    <div class="slide" id="s3">
      <img src="image3.jpg" alt="Image 3">
    </div>
  </div>

  <div class="navigation">
    <label for="slide1" class="nav-btn"></label>
    <label for="slide2" class="nav-btn"></label>
    <label for="slide3" class="nav-btn"></label>
  </div>
</div>

🔍 Explanation:

<input type="radio"> helps control which slide is shown.
Each slide is wrapped in a container called .slides.
Labels (<label>) are styled to look like navigation dots or buttons.

🎨 Step 2: Styling the Slider with CSS

Google Advertisement

Now let’s add the styling that will make the slider work.

/* Basic setup */
.slider {
  width: 80%;
  max-width: 600px;
  margin: 40px auto;
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0,0,0,0.3);
}

/* Hide radio buttons */
.slider input[type="radio"] {
  display: none;
}

/* Slide container */
.slides {
  display: flex;
  width: 300%;
  transition: transform 0.5s ease-in-out;
}

/* Individual slides */
.slide {
  width: 100%;
  flex-shrink: 0;
}

.slide img {
  width: 100%;
  display: block;
}

/* Navigation buttons */
.navigation {
  position: absolute;
  bottom: 10px;
  left: 50%;
  display: flex;
  gap: 10px;
  transform: translateX(-50%);
}

.nav-btn {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #ccc;
  cursor: pointer;
}

input#slide1:checked ~ .slides {
  transform: translateX(0%);
}
input#slide2:checked ~ .slides {
  transform: translateX(-100%);
}
input#slide3:checked ~ .slides {
  transform: translateX(-200%);
}

input#slide1:checked ~ .navigation label[for="slide1"],
input#slide2:checked ~ .navigation label[for="slide2"],
input#slide3:checked ~ .navigation label[for="slide3"] {
  background: #333;
}

🔍 Explanation:

The .slides container is a flexbox showing all slides in a row.
When a radio button is checked, we use :checked ~ sibling selector to shift the slides using transform.
The navigation dots change color depending on the selected slide.

📱 Step 3: Make It Responsive

Let’s make sure it works on mobile too.

🧪 Step 4: Final Touches & Tips

Google Advertisement

You can add more slides by adding more radio buttons and CSS rules.
You can replace navigation dots with thumbnails or arrows using <label> and background images.
All of this works without a single line of JavaScript!

📸 Preview Screenshot (Optional for Blog)

You can add a screenshot of your final slider here.

💡 Summary

In this tutorial, you learned how to:

✅ Build a responsive image slider using only HTML and CSS
✅ Use radio buttons to manage slider state
✅ Animate slide transitions using CSS transforms and transitions
✅ Style navigation and make it mobile-friendly

🏁 Final Code (Copy-Paste Ready)

<div class="slider">
  <input type="radio" name="slider" id="slide1" checked>
  <input type="radio" name="slider" id="slide2">
  <input type="radio" name="slider" id="slide3">

  <div class="slides">
    <div class="slide"><img src="image1.jpg" alt="Image 1"></div>
    <div class="slide"><img src="image2.jpg" alt="Image 2"></div>
    <div class="slide"><img src="image3.jpg" alt="Image 3"></div>
  </div>

  <div class="navigation">
    <label for="slide1" class="nav-btn"></label>
    <label for="slide2" class="nav-btn"></label>
    <label for="slide3" class="nav-btn"></label>
  </div>
</div>

<style>
.slider {
  width: 80%;
  max-width: 600px;
  margin: 40px auto;
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0,0,0,0.3);
}
.slider input[type="radio"] { display: none; }
.slides {
  display: flex;
  width: 300%;
  transition: transform 0.5s ease-in-out;
}
.slide {
  width: 100%;
  flex-shrink: 0;
}
.slide img {
  width: 100%;
  display: block;
}
.navigation {
  position: absolute;
  bottom: 10px;
  left: 50%;
  display: flex;
  gap: 10px;
  transform: translateX(-50%);
}
.nav-btn {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #ccc;
  cursor: pointer;
}
input#slide1:checked ~ .slides {
  transform: translateX(0%);
}
input#slide2:checked ~ .slides {
  transform: translateX(-100%);
}
input#slide3:checked ~ .slides {
  transform: translateX(-200%);
}
input#slide1:checked ~ .navigation label[for="slide1"],
input#slide2:checked ~ .navigation label[for="slide2"],
input#slide3:checked ~ .navigation label[for="slide3"] {
  background: #333;
}
@media (max-width: 600px) {
  .slider { width: 100%; }
}
</style>

Create a Responsive Image Slider Using Pure CSS – No JavaScript Needed

🎯 Design a CSS-Only Image Slider

🧰 What You’ll Learn

🧱 Step 1: Basic HTML Structure

🔍 Explanation:

🎨 Step 2: Styling the Slider with CSS

🔍 Explanation:

📱 Step 3: Make It Responsive

🧪 Step 4: Final Touches & Tips

📸 Preview Screenshot (Optional for Blog)

💡 Summary

🏁 Final Code (Copy-Paste Ready)

Recommended Posts

Create a Simple Text Editor in Java Using Swing | Step-by-Step Guide

Simple Java To-Do App with Core Features (Add/Delete/Mark Complete)

How to Create a Splash Screen in Flutter using Timer and Navigator

Simple Flutter Login UI with TextField and Button – Step-by-Step Guide

Simple Flutter Counter App Tutorial Using setState() for Beginners

How to Create a Beautiful HTML Image Gallery with <figure> and <figcaption>