Skip to content
Related Articles
Get the best out of our app
GeeksforGeeks App
Open App
geeksforgeeks
Browser
Continue

Related Articles

How to create a working slider using HTML and CSS ?

Improve Article
Save Article
Like Article
author
kunaljain2608
contributor
1 published article
Improve Article
Save Article
Like Article

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:

My Personal Notes
arrow_drop_up
Last Updated :
03 Dec, 2020
Like Article

Save Article

Similar Reads
1.
How to create image slider using HTML CSS and JavaScript ?
2.
How to Create dark theme using Slider in CSS ?
3.
How to create Image Comparison Slider using CSS ?
4.
Designing a Working Table Fan using HTML and CSS
5.
How to create Form element Themed Range slider using jQuery Mobile ?
6.
How to create previous and next button and non-working on end position using JavaScript ?
7.
Creating A Range Slider in HTML using JavaScript
8.
How to add a Range Slider using HTML ?
9.
Create a CSS Fireflies background using HTML/CSS
10.
How to create an image slider works with radio button ?
Related Tutorials
1.
Onsen UI
2.
React Material UI
3.
NuxtJS
4.
D3.js
5.
Spectre CSS
Previous
What is shallow copy and deep copy in JavaScript ?
Next

What is Snippet and How to Create Java Snippets in VSCode for Competitive Programming?
Article Contributed By :
https://media.geeksforgeeks.org/auth/avatar.png
kunaljain2608
kunaljain2608
Vote for difficulty
Current difficulty :
Medium





Article Tags :
Practice Tags :
Report Issue 
We use cookies to ensure you have the best browsing experience on our website. By using our site, you
acknowledge that you have read and understood our
Cookie Policy &
        Privacy Policy

Lightbox