Css Module 53

Module 53 : CSS Image Galleries & Sliders – Building image carousels without JavaScript. 

Section 1: Introduction to CSS-Only Sliders and Galleries

What is a CSS-only Image Slider?

A CSS-only image slider is a component that allows users to cycle through images (slides) using only HTML and CSS. It replaces the need for JavaScript by using:

       

  

 

Radio buttons / Checkboxes for state control.

Labels as interactive buttons.

CSS selectors like :checked to control visibility.

Transitions / Animations for visual effects.

Section 2 : Core Concepts and Building Blocks

1. HTML Radio Button Hack

We use radio buttons to manage which slide is "active."

html

 code

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

2. CSS :checked Selector

CSS uses the :checked pseudo-class to apply styles conditionally:

css

 code

#slide1:checked ~ .slides .slide1 { opacity: 1; z-index: 1; }

3. Using label to Switch Slides

html

 code

<label for="slide1">1</label> <label for="slide2">2</label> <label for="slide3">3</label>

These labels become buttons to control the slideshow.

Section 3: Practical Project – Build a CSS-Only Image Carousel

Project Structure

html

 code

<div class="carousel"> <input type="radio" name="slides" id="slide1" checked> <input type="radio" name="slides" id="slide2"> <input type="radio" name="slides" id="slide3"> <div class="slides"> <div class="slide slide1"> <img src="img1.jpg" alt=""> </div> <div class="slide slide2"> <img src="img2.jpg" alt=""> </div> <div class="slide slide3"> <img src="img3.jpg" alt=""> </div> </div> <div class="navigation"> <label for="slide1" class="nav"></label> <label for="slide2" class="nav"></label> <label for="slide3" class="nav"></label> </div> </div>

Key CSS

css

code

.carousel { position: relative; width: 80%; max-width: 600px; margin: auto; } .slides { position: relative; height: 300px; } .slide { position: absolute; opacity: 0; transition: opacity 0.6s ease; width: 100%; } #slide1:checked ~ .slides .slide1, #slide2:checked ~ .slides .slide2, #slide3:checked ~ .slides .slide3 { opacity: 1; z-index: 1; } .navigation { display: flex; justify-content: center; margin-top: 10px; } .nav { width: 10px; height: 10px; margin: 5px; background: #444; border-radius: 50%; cursor: pointer; }

Section 4: Practical Exercises

Exercise 1: Add Captions

 

Add a <div class="caption">Caption text</div> inside each .slide.

Style the caption with semi-transparent background and animation.

Exercise 2: Add Next/Prev Buttons (with CSS-only hack)

Use label elements positioned as arrows (position: absolute) on left and right.

Use combinations of :checked selectors to show the correct slide when buttons are clicked.

Exercise 3: Make It Responsive

Use media queries to adjust slide height and navigation layout.

Section 5 : Auto-playing Image Slider Using CSS Animations

Goal: Create a looping, auto-playing slider using CSS @keyframes.

html

 code

<div class="autoplay-slider"> <div class="slide-track"> <div class="slide"><img src="img1.jpg"></div> <div class="slide"><img src="img2.jpg"></div> <div class="slide"><img src="img3.jpg"></div> </div> </div>

CSS

css code

.autoplay-slider { overflow: hidden; width: 100%; } .slide-track { display: flex; width: calc(300px * 6); /* 3 images x 2 for looping */ animation: scroll 15s linear infinite; } .slide { width: 300px; flex-shrink: 0; } @keyframes scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-900px); } }

Explanation

This slider continuously scrolls the image strip.

You can duplicate the slide sequence to ensure smooth looping.

Can be customized with pause-on-hover using :hover.

Section 6: Quiz

What does the :checked pseudo-class do in a CSS slider?

           

Can CSS-only sliders support infinite looping with next/prev buttons? Why or why not?

How can you simulate button clicks using HTML and CSS?

Section 7: Summary

CSS-only sliders are possible using radio buttons, labels, and transitions.

They are lightweight, accessible, and don’t require JavaScript.

CSS animations can be used for autoplay effects.

These techniques are great for simple galleries, portfolios, and small websites.