How to create a CSS3 image slider

preview-css-image-slider

This is a 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 withtransformtransition 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 onwebdesign.tutsplus covering about CSS3 transform & transition from scratch.

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.

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 walkBeautiful 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 addwidth: 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;
}

Okay, that’s it tutorial about how to create a css3 image slider, i hope you enjoy it, thanks 😉

source : http://creatiface.com/tutorials/image-slider-css3

Advertisements

One thought on “How to create a CSS3 image slider

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s