How to create a working slider using HTML and CSS ?

Last Updated : 23 Jan, 2024

A slider is a sequence of frames that can be navigated in order. Firstly, you need to input the basic HTML code and then add radio buttons for the frames using the “type” attribute as “radio”. Then, design each frame in sequence. You can adjust the frames’ positions using “margin-left” and navigate them using both radio buttons and control labels.

Additionally, you can include images instead of text in each frame. This approach is beneficial because it reduces the browser’s memory usage and computational power required. This article will explain how to create a slideshow using only HTML and CSS.

Approach:

Set up a container with radio inputs (`frame1`, `frame2`) to control slides.
Design slides inside the container with unique frame classes (e.g., `frame_1`, `frame_2`). Customize content, like headings.
Use CSS for smooth sliding effects. Adjust the `.inner` class’s `margin-left` property to shift between frames.
Implement control buttons and bullets with labels associated with radio inputs. Customize appearance and position.
Ensure responsiveness by adjusting styles in the media query for a user-friendly experience on smaller screens.

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

HTML

<!DOCTYPE html>
<html>
 
<head>
    <title>GeeksfoGeeks</title>
    <style>
        #frame {
            margin: 0 auto;
            width: 800px;
            max-width: 100%;
            text-align: center;
        }
 
        #frame input[type=radio] {
            display: none;
        }
 
        #frame label {
            cursor: pointer;
            text-decoration: none;
        }
 
        #slides {
            padding: 10px;
            border: 5px solid #0F0;
            background: #00F;
            position: relative;
            z-index: 1;
        }
 
        #overflow {
            width: 100%;
            overflow: hidden;
        }
 
        #frame1:checked~#slides .inner {
            margin-left: 0;
        }
 
        #frame2:checked~#slides .inner {
            margin-left: -100%;
        }
 
        #frame3:checked~#slides .inner {
            margin-left: -200%;
        }
 
        #frame4:checked~#slides .inner {
            margin-left: -300%;
        }
 
        #slides .inner {
            transition: margin-left 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
            width: 400%;
            line-height: 0;
            height: 300px;
        }
 
        #slides .frame {
            width: 25%;
            float: left;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100%;
            color: #FFF;
        }
 
        #slides .frame_1 {
            background: #90C;
        }
 
        #slides .frame_2 {
            background: #F90;
        }
 
        #slides .frame_3 {
            background: #606;
        }
 
        #slides .frame_4 {
            background: #C00;
        }
 
        #controls {
            margin: -180px 0 0 0;
            width: 100%;
            height: 50px;
            z-index: 3;
            position: relative;
        }
 
        #controls label {
            transition: opacity 0.2s ease-out;
            display: none;
            width: 50px;
            height: 50px;
            opacity: .4;
        }
 
        #controls label:hover {
            opacity: 1;
        }
 
        #frame1:checked~#controls label:nth-child(2),
        #frame2:checked~#controls label:nth-child(3),
        #frame3:checked~#controls label:nth-child(4),
        #frame4:checked~#controls label:nth-child(1) {
            background:
                url(https://image.flaticon.com/icons/svg/130/130884.svg) no-repeat;
            float: right;
            margin: 0 -50px 0 0;
            display: block;
        }
 
        #frame1:checked~#controls label:nth-last-child(2),
        #frame2:checked~#controls label:nth-last-child(3),
        #frame3:checked~#controls label:nth-last-child(4),
        #frame4:checked~#controls label:nth-last-child(1) {
            background:
                url(https://image.flaticon.com/icons/svg/130/130882.svg) no-repeat;
            float: left;
            margin: 0 0 0 -50px;
            display: block;
        }
 
        #bullets {
            margin: 150px 0 0;
            text-align: center;
        }
 
        #bullets label {
            display: inline-block;
            width: 10px;
            height: 10px;
            border-radius: 100%;
            background: #ccc;
            margin: 0 10px;
        }
 
        #frame1:checked~#bullets label:nth-child(1),
        #frame2:checked~#bullets label:nth-child(2),
        #frame3:checked~#bullets label:nth-child(3),
        #frame4:checked~#bullets label:nth-child(4) {
            background: #444;
        }
 
        @media screen and (max-width: 900px) {
 
            #frame1:checked~#controls label:nth-child(2),
            #frame2:checked~#controls label:nth-child(3),
            #frame3:checked~#controls label:nth-child(4),
            #frame4:checked~#controls label:nth-child(1),
            #frame1:checked~#controls label:nth-last-child(2),
            #frame2:checked~#controls label:nth-last-child(3),
            #frame3:checked~#controls label:nth-last-child(4),
            #frame4:checked~#controls label:nth-last-child(1) {
                margin: 0;
            }
 
            #slides {
                max-width: calc(100% - 140px);
                margin: 0 auto;
            }
        }
    </style>
</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>