CreatiFace.com

How to Create a CSS3 Image Slider

This is our first HTML & CSS tutorial in 2012. This tutorial will show you how to create an image slider only with CSS3 features, we will be dealing much with transform, transition as well as :target pseudo-class to create this slider. So, this slider will only work in the following browsers: Firefox 4.0+, Chrome 4.0+, Safari 3.1+, Opera 10.5+ and (possibly) IE10+

For those who hasn’t known this feature yet, you can take a look at my previous tutorial on webdesign.tutsplus covering about CSS3 transform & transition from scratch.

View Demo Download Files

The Idea

The idea is to create an image slider consists of 4 images moved with a navigation. When the navigation is clicked the image will slide in from the right and the image before will slide out to the left. We will also add some details to make our image slider look more engaging.

Image Slider using CSS3 Preview

Anyway this slider is inspired from this slideshowand we will just re-make it into another form. And also, the images shown in this tutorial can be downloaded here: Open grassy field, Winter walk, Beautiful nature, and Meadow

Let’s get started.

The HTML

First of all, we prepare the html markup.

<div id="mainwrapper">
<div id="slide-1">
<div id="slide-2">
<div id="slide-3">
<div id="slide-4">
<div id="hidden">
<div id="shining"></div>
<ul id="slide-container">
<li id="image-1"><img src="images/spring.jpg" alt="" /></li>
<li id="image-2"><img src="images/summer.jpg" alt="" /></li>
<li id="image-3"><img src="images/fall.jpg" alt="" />
<div id="cap-3" class="caption">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</div></li>
<li id="image-4"><img src="images/winter.jpg" alt="" />
<div id="cap-4" class="caption">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit,.</div></li>
</ul>
</div>
<ul id="slide-navigation">
<li><a id="nav-1" href="#slide-1">1</a></li>
<li><a id="nav-2" href="#slide-2">2</a></li>
<li><a id="nav-3" href="#slide-3">3</a></li>
<li><a id="nav-4" href="#slide-4">4</a></li>
</ul>
</div>
<!-- end slide-4 --></div>
<!-- end slide-3 --></div>
<!-- end slide-2 --></div>
<!-- end slide-1 --></div>
<!-- end mainwrapper -->

As you can see in above html markup, we put four nested div. Each of this div is given a unique id that will be used as a hook to move the four images, whereas the images themselves are contained within li as well as the navigation, and we also add a caption for both in the 3rd & 4th image.

We also have a div with hidden id, which will be used for hiding images that pass through the content wrapper div and we have an empty div with shining id that will be used to create shining effect for our slider.

Basic CSS

Before styling the elements, it is always a good start to reset all the elements style first using this CSS reset then giving the element its common style, so each browser will render the same result.

Then, let’s give background color in the html element and styling the main wrapper.

html {
background-color: #eaeaea;
}
#mainwrapper {
background-color: #f7f7f7;
border-top: 1px solid white;
box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, .3);
-moz-box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, .3);
-webkit-box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, .3);
font: normal 12px Lucida Sans Unicode, Lucida Grande, sans-serif;
height: 280px;
margin: 150px auto 0 auto;
padding: 9px 10px 10px 10px;
width: 700px;
}

Styling the slider

li containing the image will have display: inline; property so the images are displayed vertically to the right.

Images that we downloaded earlier are cropped 700 by 280 pixels, so, if we have 4 images then we need about 2800px to accommodate these images. So in slide container id we add width: 2800px.

/* Slider */
#slide-container {
height: 280px;
left: 0;
position: relative;
width: 2800px;
}
#slide-container li {
display: inline;
float: left;
transition: -moz-transform 500ms ease-out;
-moz-transition: -moz-transform 500ms ease-out;
-o-transition: -o-transform 500ms ease-out;
-webkit-transition: -webkit-transform 500ms ease-out;
}

The caption is positioned absolutely and has 500ms transition delay, so it will start showing after the slide perfectly in its positioned.

/** Caption **/
#slide-container .caption {
background-color: rgba(0,0,0,.65);
color: #fff;
padding: 10px;
position: absolute;
transition: all 350ms ease-out 500ms;
-moz-transition: all 350ms ease-out 500ms;
-o-transition: all 350ms ease-out 500ms;
-webkit-transition: all 350ms ease-out 500ms;
width: 100%;
}

Because the images pass through the box that we have specified the width by 700px, so we need to hide some of those images.

#hidden {
height: 280px;
overflow: hidden;
position: relative;
width: 700px;
}

Styling the navigation

The navigation will be centered and displayed vertically using display: inline; property.

#slide-navigation {
margin-top: 20px;
text-align: center;
}
#slide-navigation li {
display: inline;
}

The anchor is given 50% border radius, so it will become a circle. Also make sure to give display property with inline-block, so we can specify its width and height.

#slide-navigation li a {
background: #ccc;
border: 1px solid #bbb;
border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
display: inline-block;
height: 12px;
margin: 0 2px;
text-indent: -9999px;
width: 12px;
}

Slide Behavior

When we click the anchor navigation, let’s say

10 Responses to “How to Create a CSS3 Image Slider”

  1. _riin

    @creatiface image slider css-nya bisa dipasang buat tumblr gaa? kepengen XD

    Reply
    • Thoriq

      @_riin technically bisa Riin…cuman sayangnya Slider ini msh belum jalan bagus di Internet Explorer :)

      Reply
      • _riin

        @creatiface gpp. IE doang, hr gini :p klo mau pasang ditumblr placementnya dmn? buat aki bs ngga? :))

      • _riin

        @creatiface *aku -__-* jd kayak top entry gtu. bisa diedit sih, dan kayaknya yaaa basisnya CSS.. *ragu*

      • _riin

        @creatiface yuuup anda benaar~

      • creatiface

        @_riin buat aki?? , ini mau dipasang di sebelah mana? di tumblr bisa editing css ngga? *bukan pengguna tumblr*

      • creatiface

        @_riin ohh, coba nanti aku research di internet dulu (PHP) loop-nya tumblr kaya gimna. mau di buat smcm top content slider kan?

      • creatiface

        @_riin ok, yg jelas cssnya ada yg diubah nih di tumblr max-width nya 500px :)

  2. Aakash Doshi

    Nice tuts!

    Reply
    • Thoriq

      Thanks Aaakash. :) Hope you enjoyed it.

      Reply

Leave a Reply

We welcome for every constructive commment and respond. However, all comments will be moderated prior to publishing and rel=nofollow is in use. So, please do not use spammy ketword name

(required)

You may use these HTML tags and attributes: <a href="" title="" rel=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="">