How to create a working slider using HTML and CSS ? - GeeksforGeeks

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
<!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>
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
#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;    }}
Complete Code: Here we will combine the above two sections into one to achieve the mentioned task.
HTML
<!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: 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>
Output:
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.
CSS-Misc
HTML-Misc
Picked
Technical Scripter 2020
CSS
HTML
Technical Scripter
Web Technologies
Web technologies Questions
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
Design a web page using HTML and CSS
Form validation using jQuery
How to set space between the flexbox ?
Search Bar using HTML, CSS and JavaScript
How to style a checkbox using CSS?
How to set the default value for an HTML <select> element ?
How to set input type date in dd-mm-yyyy format using HTML ?
Hide or show elements in HTML using display property
How to Insert Form Data into Database using PHP ?
REST API (Introduction)