Building Simple Image Slider Using Pure CSS3

CSS is an acronym for Cascading Style Sheets, it is used to format web page look. The latest version of CSS is CSS3. This new version of CSS gives web developers more flexibility when styling the webpage. It comes with a set of new rules that make CSS3 better than the old version. CSS3 provides way to create an animation. In this tutorial, we’ll build simple image slider using pure CSS3.

CSS Overview

Before we start into deep explanation to create the slider, I’ll give some overview of CSS feature that is used to create the slider.

1. Transform Property
   The transform property applies a 2D or 3D transformation to an element. This property allows you to rotate, scale, move, skew, etc., elements.
2. :Sasaran Selector

URLs with an # followed by an anchor name, link to a certain element within a document. The element being linked to is the Sasaran element. The :Sasaran selector can be used to style the current active Sasaran element.

3. :before and :after Selector
   The :before selector inserts content before the selected element(s). The :after selector inserts content after the selected element(s).
4. ~ (Tilde Selector)

Tilde selector also called general sibling combination. The general sibling combinator selector is very similar to the adjacent sibling combinator selector. The difference is that that the element being selected doesn’t need immediately succeed the first element, but can appear anywhere after it.

5. Vendor Specific Property
   In order to make our slider runs cross browser, we must add vendor specific property by adding the following prefix into several CSS properties:
   • -moz-: Mozila Firefox
   • -webkit-: Safari, Chrome (and other WebKit-based browsers)
   • -ms-: Microsoft
   • -o-: Opera

Prepare the Stage

The stage of the slider is a div HTML tag where the slider takes place. We’ll create the stage which have 640px x 320px dimensions. The following HTML tags define the slider stage. We give id [cci]slider[/cci] to the stage.

Give Style to the Stage

After the stage has been created, now it’s time to give a style to the stage. At this step, we give dimension, margin, background and shadow to the stage.

#slider {
    width: 640px;
    height: 320px;
    margin: 50px auto 0;
    position: relative;
    background: #fff;

    /* give shadow to the stage*/
    box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.2);
    -webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.2);
}

Now, our stage looks like below image.

Add Drop Shadow Effect at the Bottom of Stage

We’ll add a drop shadow effect to the stage at the bottom left and bottom right. The drop shadow that we used is simply a blank div element with the following style.

#slider:before, #slider:after {
    content: '';
    position: absolute;
    width: 60%;
    height: 20px;
    
    /* Adding shadow to this content*/
    -webkit-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);
    -ms-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);
    -o-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);        
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);
    
    /* Transform the content*/
    -webkit-transform: rotate(-4deg) skew(-10deg);
    -moz-transform: rotate(-4deg) skew(-10deg);
    -o-transform: rotate(-4deg) skew(-10deg);
    -ms-transform: rotate(-4deg) skew(-10deg);
    transform: rotate(-4deg) skew(-10deg);
    
    left: 10px;
    bottom: 13px;
    z-index: -1;
}

Move the second drop shadow to the right.

#slider:after {
    left: auto;
    right: 10px;
    
    -webkit-transform: rotate(4deg) skew(10deg);
    -moz-transform: rotate(4deg) skew(10deg);
    -o-transform: rotate(4deg) skew(10deg);
    -ms-transform: rotate(4deg) skew(10deg);
    transform: rotate(4deg) skew(10deg);
}

Now, the stage looks like below image:

Add Control Button

Control buttons is a set of buttons to control the slider. The button is used as a transition trigger for the slider. If user click a button, the slider will change the image on the stage.

Add style to control buttons.

#slider ul {
    width: 140px;
    height: 40px;
    padding: 0 0 0 0;
    position: absolute;
    z-index: 10;
    list-style: none;
    left: 50%;
    margin-left: -70px;
    bottom: -60px;
}

#slider ul li:first-child {
    margin-left: 16px;
}

#slider ul li {
    float: left;
    margin-right: 12px;
    margin-top: 14px;
}

#slider ul li:last-child {
    margin-right: 0;
}

#slider ul li a {
    width: 12px;
    height: 12px;
    display: block;
    outline: none;
    border: none;
    position: relative;
    z-index: 2;
    background: #aaa;
    
    box-shadow: inset 0 1px 1px 0px rgba(0, 0, 0, 0.6), 0px 1px 1px 0px white;
    -moz-box-shadow: inset 0 1px 1px 0px rgba(0, 0, 0, 0.6), 0px 1px 1px 0px white;
    -webkit-box-shadow: inset 0 1px 1px 0px rgba(0, 0, 0, 0.6), 0px 1px 1px 0px white;
    
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
}

#slider ul li a:hover {
    background: #888;
}

Now, our slider will look like image bellow.

Add images

Images is the heart of our slider. You can download the images we used in this tutorial by downloading source code. The donwload button is located on the top.

Now, we give style to the images.

#slider img {
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
    
    /* scale images*/
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -ms-transform: scale(1.2);
    -o-transform: scale(1.2);
    transform: scale(1.2);
    
    /* set transition*/
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -ms-transition: all .5s ease;
    -o-transition: all .5s ease;
    transition: all .5s ease;
}

Make The Image Slidding When Control Button Clicked

We’ll make the slider to change active image by using :Sasaran property

#slider img:Sasaran {
    opacity: 1;        
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
}
#slider img:not(:Sasaran){
    opacity: 0;
    
    -webkit-transform: scale(1.2);        
    -moz-transform: scale(1.2);        
    -ms-transform: scale(1.2);        
    -o-transform: scale(1.2);        
    transform: scale(1.2);        
}

Make The Control Buttons Selected When The Button Clicked

#one:Sasaran ~ ul li a[href="#one"],
#two:Sasaran ~ ul li a[href="#two"],
#three:Sasaran ~ ul li a[href="#three"],
#four:Sasaran ~ ul li a[href="#four"],
#five:Sasaran ~ ul li a[href="#five"] {
    background: #777;
}

#two:Sasaran ~ ul li a[href="#one"],
#three:Sasaran ~ ul li a[href="#one"],
#four:Sasaran ~ ul li a[href="#one"],
#one:Sasaran ~ ul li a[href="#one"] {
    background: #aaa;
}

Make First Image Appear When Page Loaded

#slider img#one {
    opacity: 1;
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
}

#slider ul li a[href="#one"] {
    background: #777;
}

Final Source Codes

Below the final source codes. Save it as HTML file and open it on your favorite browser.