How to Create a Slider using HTML and CSS?

Last Updated : 16 Oct, 2024

A slider (also called a slideshow) is a sequence of content frames that users can navigate through. Creating a slider using just HTML and CSS is efficient because it doesn't require JavaScript, making it lightweight and fast. The slider can contain images, text, or any other content you want to showcase.

Approach to Create a Slider

Set up a Container: Use a container that holds the slides and input radio buttons.
Create Radio Inputs: Use radio buttons to control the slider frames.
Create Slides: Design the slides with individual classes (e.g., frame_1, frame_2) inside the container.
CSS Transitions: Apply sliding effects using CSS by adjusting the container’s margin-left for smooth transitions.
Navigation Controls: Add labels for the radio buttons to act as navigation controls for the slider.
Responsiveness: Use media queries to ensure the slider looks good on smaller screens.

Example: Working Slider with HTML and CSS

In this example, we will see how to create a working slider using HTML and CSS.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>Slider Using CSS</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div id="frame">
        <input type="radio" name="frame" id="frame1" checked />
        <input type="radio" name="frame" id="frame2" />
        <input type="radio" name="frame" id="frame3" />
        <input type="radio" name="frame" id="frame4" />
        <div id="slides">
            <div id="overflow">
                <div class="inner">
                    <div class="frame frame_1">
                        <div class="frame-content">
                            <h2>Slide 1</h2>
                        </div>
                    </div>
                    <div class="frame frame_2">
                        <div class="frame-content">
                            <h2>Slide 2</h2>
                        </div>
                    </div>
                    <div class="frame frame_3">
                        <div class="frame-content">
                            <h2>Slide 3</h2>
                        </div>
                    </div>
                    <div class="frame frame_4">
                        <div class="frame-content">
                            <h2>Slide 4</h2>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div id="controls">
            <label for="frame1"></label>
            <label for="frame2"></label>
            <label for="frame3"></label>
            <label for="frame4"></label>
        </div>
        <div id="bullets">
            <label for="frame1"></label>
            <label for="frame2"></label>
            <label for="frame3"></label>
            <label for="frame4"></label>
        </div>
    </div>
</body>

</html>

style.css