Pure CSS3 Slider

Pure CSS3 Slider

6 79270
Pure CSS3 Slider

Pure CSS3 Slider

Today I’ll tell you about a remarkable thing that you can implement with CSS3 – it’s a slider. I think you may have noticed that some time ago was very popular variety of sliders, and many chose their decision to use jQuery easySlider example. But it appears the same tasks can be implemented using pure CSS3, today I will tell you exactly how this can be done.

Here are samples and downloadable package:

Live Demo

[sociallocker]

download in package

[/sociallocker]


Ok, download the example files and lets start coding !


Step 1. HTML

Here are html source code of our demo. Pay attention how we built our slider. To implement the desired effect – I’ve put our slides followed one another (float: left). And put the correct links.

index.html

<!DOCTYPE html>
<html lang="en" >
    <head>
        <meta charset="utf-8" />
        <title>Pure CSS3 Slider | Script Tutorials</title>
        <link rel="stylesheet" href="css/layout.css" type="text/css" media="screen">
        <link rel="stylesheet" href="css/slider.css" type="text/css" media="screen">
    </head>
    <body>
        <header>
            <h2>Pure CSS3 Slider</h2>
            <a href="https://www.script-tutorials.com/pure-css3-slider/" class="stuts">Back to original tutorial on <span>Script Tutorials</span></a>
        </header>
        <div class="container">
            <div class="slider">
                <span id="root"></span>
                <span id="parent1"></span>
                <span id="parent2"></span>
                <span id="parent3"></span>
                <span id="child1"></span>
                <span id="child2"></span>
                <span id="subchild1"></span>
                <div id="tabs">
                    <dl>
                        <dd>
                            <a class="fwd" href="#parent1">Parent #1</a>
                            <a class="fwd" href="#parent2">Parent #2</a>
                            <a class="fwd" href="#parent3">Parent #3</a>
                        </dd>
                    </dl>
                    <dl class="parent1">
                        <dd>
                            <a class="fwd" href="#child1">Child #1#1</a>
                            <a class="fwd" href="#child2">Child #1#2</a>
                            <a href="#">Child #1#3</a>
                            <a href="#">Child #1#4</a>
                            <a href="#">Child #1#5</a>
                        </dd>
                        <dd><a href="#root">Back</a></dd>
                    </dl>
                    <dl class="parent2">
                        <dd>
                            <a href="#">Child #2#1</a>
                            <a href="#">Child #2#2</a>
                            <a href="#">Child #2#3</a>
                            <a href="#">Child #2#4</a>
                            <a href="#">Child #2#5</a>
                        </dd>
                        <dd><a href="#root">Back</a></dd>
                    </dl>
                    <dl class="parent3">
                        <dd>
                            <a href="#">Child #3#1</a>
                            <a href="#">Child #3#2</a>
                            <a href="#">Child #3#3</a>
                            <a href="#">Child #3#4</a>
                            <a href="#">Child #3#5</a>
                        </dd>
                        <dd><a href="#root">Back</a></dd>
                    </dl>
                    <dl class="child1">
                        <dd>
                            <a class="fwd" href="#subchild1">SubChild #1#1</a>
                            <a href="#">SubChild #1#2</a>
                            <a href="#">SubChild #1#3</a>
                            <a href="#">SubChild #1#4</a>
                            <a href="#">SubChild #1#5</a>
                        </dd>
                        <dd><a href="#parent1">Back</a></dd>
                    </dl>
                    <dl class="child2">
                        <dd>
                            <a href="#">SubChild #2#1</a>
                            <a href="#">SubChild #2#2</a>
                            <a href="#">SubChild #2#3</a>
                            <a href="#">SubChild #2#4</a>
                            <a href="#">SubChild #2#5</a>
                        </dd>
                        <dd><a href="#parent1">Back</a></dd>
                    </dl>
                    <dl class="subchild1">
                        <dd>
                            <a href="#">Links #1</a>
                            <a href="#">Links #2</a>
                            <a href="#">Links #3</a>
                        </dd>
                        <dd><a href="#child1">Back</a></dd>
                    </dl>
                </div>
            </div>
        </div>
    </body>
</html>

Step 2. CSS

Here are the CSS styles of our slider. Maybe you’ve noticed – that in our html we have two CSS files: layout.css and menu.css. The first file (layout.css) contain the styles of our demo page. We will not publish these styles in this article, but if you wish – you can find these styles in the package.

css/slider.css

.slider {
    background-color: #FFFFFF;
    border: 1px solid #000000;
    margin: 50px auto;
    overflow: hidden;
    padding: 10px;
    position: relative;
    width: 200px;
}
.slider span {
    display:none
}
#tabs {
    background-color: #FFFFFF;
    margin-left: 0;
    overflow: hidden;
    width: 2000px;
    -moz-transition: 0.5s;
    -ms-transition: 0.5s;
    -o-transition: 0.5s;
    -webkit-transition: 0.5s;
    transition: 0.5s;
}
#tabs dl {
    float: left;
    height: 300px;
    margin: 0;
    opacity: 0;
    padding: 0;
    position: relative;
    width: 200px;
}
#tabs dl:first-child {
    opacity:1;
}
#tabs dl dd a.fwd {
    background-color:#C8CEFF;
}
#tabs dl dd a {
    background-color: #F4F5FE;
    color: #000000;
    display: block;
    font-size: 18px;
    line-height: 32px;
    margin: 10px;
    text-align: center;
    text-decoration: none;
    border-radius:10px;
    -moz-border-radius:10px;
    -ms-border-radius:10px;
    -o-border-radius:10px;
    -webkit-border-radius:10px;
    box-shadow:0px 0px 7px rgba(0,0,0,0.4) inset, 0px 0px 0px 4px rgba(255,255,255,0.1);
    -moz-box-shadow:0px 0px 7px rgba(0,0,0,0.4) inset, 0px 0px 0px 4px rgba(255,255,255,0.1);
    -ms-box-shadow:0px 0px 7px rgba(0,0,0,0.4) inset, 0px 0px 0px 4px rgba(255,255,255,0.1);
    -o-box-shadow:0px 0px 7px rgba(0,0,0,0.4) inset, 0px 0px 0px 4px rgba(255,255,255,0.1);
    -webkit-box-shadow:0px 0px 7px rgba(0,0,0,0.4) inset, 0px 0px 0px 4px rgba(255,255,255,0.1);
    -moz-transition: 0.3s;
    -ms-transition: 0.3s;
    -o-transition: 0.3s;
    -webkit-transition: 0.3s;
    transition: 0.3s;
}
#tabs dl dd:first-child {
    height: 250px;
    overflow: auto;
    border-radius:5px;
    -moz-border-radius:5px;
    -ms-border-radius:5px;
    -o-border-radius:5px;
    -webkit-border-radius:5px;
}
#tabs dl dd a:hover {
    box-shadow:0px 0px 4px rgba(0,0,0,0.5) inset, 0px 0px 0px 4px rgba(51,51,204,0.5);
    -moz-box-shadow:0px 0px 4px rgba(0,0,0,0.5) inset, 0px 0px 0px 4px rgba(51,51,204,0.5);
    -webkit-box-shadow:0px 0px 4px rgba(0,0,0,0.5) inset, 0px 0px 0px 4px rgba(51,51,204,0.5);
}
#root:target ~ #tabs {
    margin-left:0;
}
#parent1:target ~ #tabs {
    margin-left:-200px;
}
#parent2:target ~ #tabs {
    margin-left:-400px;
}
#parent3:target ~ #tabs {
    margin-left:-600px;
}
#child1:target ~ #tabs {
    margin-left:-800px;
}
#child2:target ~ #tabs {
    margin-left:-1000px;
}
#subchild1:target ~ #tabs {
    margin-left:-1200px;
}
#parent1:target ~ #tabs .parent1 {
    opacity:1;
}
#parent2:target ~ #tabs .parent2 {
    opacity:1;
}
#parent3:target ~ #tabs .parent3 {
    opacity:1;
}
#child1:target ~ #tabs .child1 {
    opacity:1;
}
#child2:target ~ #tabs .child2 {
    opacity:1;
}
#subchild1:target ~ #tabs .subchild1 {
    opacity:1;
}

Live Demo

Conclusion

Looks great, isn’t it? If you have got any good ideas you would like to share, be sure to drop those in the comments as well. Good luck!

SIMILAR ARTICLES


6 COMMENTS

  1. This is a good example, however not working in IE8-9. Do we have any hack or solution to make it working atleast in IE8-9.

    • Hi Venkatesh,
      This is works in IE9, but not so smooth of course. Because IE9 still not support transitions fully :-(

  2. hey, i want to thank you for this amazing list with css3,i used it in my graduation project but i have a problem in its css
    my subchild go away and don’t stop at list to be shown but still moving to the left
    i think its==>margin-left,
    but i add css -200px for previous margin-left for every parent,child and subchild
    parent and child work well but subchild doesn’t,please can you help me,its soooooooooo important.

    • Hello obada,
      Yes, I think that you could mess with levels. Keep in mind, that all levels are ‘separated’ from each other with some space between them, all levels goes from the left to the right. Single level width is 200px

Leave a Reply