Skip to content
Related Articles

Related Articles

How to create a working slider using HTML and CSS ?
  • Last Updated : 03 Dec, 2020

A slider is a set of frames in a sequence that can be traversed respectively. This article exhibits the approach to build a slideshow with the use of only HTML and CSS.

At first, enter the basic HTML code and then add the radio buttons for the frames using type as radio. After that, implement the designs of frames in a sequence. With the help of margin-left, the frames can be adjusted and traversed using radio buttons as well as controls labels. In the frames, the image can also be included rather than text. By this, the browser consumes less memory and consumes less computational power.

Given an HTML and CSS document to create a slider. 

First Section: This section contains the HTML portion of the page. The slides that have to be shown are defined with their corresponding text.

HTML Code:



HTML

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
    
<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>

chevron_right


Second Section: This section consists of all the styling that would be used to make the slideshow. The animation to be used to move each of the slides is defined by setting the margin-left property as required for every slide. This gives it an appearance of smoothly transitioning between each of the slides.

CSS Code:

CSS

filter_none

edit
close

play_arrow

link
brightness_4
code

#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;
    }
}

chevron_right


Complete Code: Here we will combine the above two sections into one to achieve the mentioned task.

HTML

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <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: 
            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: 
            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>

chevron_right


Output:

full-stack-img

My Personal Notes arrow_drop_up
Recommended Articles
Page :