Publishing System Settings Logout Login Register
Simple CSS Based Image Slider
TutorialCommentsThe AuthorReport Tutorial
Tutorial Avatar
Rating
Add to Favorites
Posted on November 16th, 2007
34909 views
CSS Stylesheets
CSS Based Image Slider

Lets start off by opening your favorite text editor. (I'll be using MS NotePad)

Now lets set up a basic HTML document:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Site Name Here</title>

</head>

<body>

</body>

</html>



The CSS

Alright now that we have the basic HTML set up, it time to add the CSS. The rest of the HTML will be added later.

Lets start by changing the background color with this bit of code here:

body{
    background:#090909;
    }


I chose a dark grey.

Now we'll set up a container to holder the gallery:

#gallery{
    width:auto;
    height:auto;
    }


By putting the width and height to auto we allow for any size image:

Now we're going to add a nice border to our images so that they don't appear to be one.

#gallery img{
    border:1px solid #FF66CC;
    }


Now the code for how the image looks before its hovered over:

a#pics img{
    width:35px;
    height:600px;
    }


This makes the image 35px by 600px. I used a height of 600 since that is how tall my images happen to be.

Now for the hover state:

a:hover#pics img{
    width:auto;
    height:auto;
    }


This allows the image to be viewed in its full size.

And thats it for the CSS. Added to the HTML we set up earlier you should have:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Site Name Here</title>

<style type="text/css">
    body{
    background:#090909;
    margin:0;
    }
   
    #gallery{
    width:auto;
    height:auto;
    }
   
    #gallery img{
    border:1px solid #FF66CC;
    }
   
    a#pics img{
    width:35px;
    height:600px;
    }
   
    a:hover#pics img{
    width:auto;
    height:auto;
    }

</style>

</head>

<body>

</body>

</html>



Setting up the HTML

Now that all the CSS is ready we have to set up the HTML to read the CSS.

Place this code between the bdoy tags:

<div id="gallery">
<a id="pics" href="#"><img src="01.jpg" /></a>
<a id="pics" href="#"><img src="02.jpg" /></a>
<a id="pics" href="#"><img src="03.jpg" /></a>
<a id="pics" href="#"><img src="04.jpg" /></a>
<a id="pics" href="#"><img src="05.jpg" /></a>
<a id="pics" href="#"><img src="06.jpg" /></a>
</div>


Now a run through of the code.

First we set up the container that holds the gallery with the <div id="gallery"> tag.
Next we set up a link to allow for a hover state with the <a id="pics"> tag.
Then we put in the image into the page using the <img> tag.
Then we closed all the tags.

So now you should have:

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Site Name Here</title>
<style type="text/css">
    body{
    background:#090909;
    margin:0;
    }
   
    #gallery{
    width:auto;
    height:auto;
    }
   
    #gallery img{
    border:1px solid #FF66CC;
    }
   
    a#pics img{
    width:35px;
    height:600px;
    }
   
    a:hover#pics img{
    width:auto;
    height:auto;
    }

</style>
</head>

<body>
<div id="gallery">
<a id="pics" href="#"><img src="01.jpg" /></a>
<a id="pics" href="#"><img src="02.jpg" /></a>
<a id="pics" href="#"><img src="03.jpg" /></a>
<a id="pics" href="#"><img src="04.jpg" /></a>
<a id="pics" href="#"><img src="05.jpg" /></a>
<a id="pics" href="#"><img src="06.jpg" /></a>
</div>
</body>
</html>



At this point its a very simple looking slider but with a bit of work it can look really good, just go wild until you get it how you like it.

Files Used in Tutorial: File Download: CSS Slider
Dig this tutorial?
Thank the author by sending him a few P2L credits!

Send


This author is too busy writing tutorials instead of writing a personal profile!
View Full Profile Add as Friend Send PM
Pixel2Life Home Advanced Search Search Tutorial Index Publish Tutorials Community Forums Web Hosting P2L On Facebook P2L On Twitter P2L Feeds Tutorial Index Publish Tutorials Community Forums Web Hosting P2L On Facebook P2L On Twitter P2L Feeds Pixel2life Homepage Submit a Tutorial Publish a Tutorial Join our Forums P2L Marketplace Advertise on P2L P2L Website Hosting Help and FAQ Topsites Link Exchange P2L RSS Feeds P2L Sitemap Contact Us Privacy Statement Legal P2L Facebook Fanpage Follow us on Twitter P2L Studios Portal P2L Website Hosting Back to Top