Create Beautiful jQuery slider tutorial

This tutorial explains how to develop Create Beautiful jQuery sliders tutorial with image description and name.
The final result is something like this:
jQuery-sliders Step 1: HTML page:
Create a new HTML page and copy and paste the following code inside <body> tag:

<div id="header">
    <div class="wrap">
        <div id="slide-holder">
            <div id="slide-runner">
                <a href="#"><img alt="" class="slide" id="slide-img-1" src="images/nature-photo.png" /></a>
                <a href="#"><img alt="" class="slide" id="slide-img-2" src="images/nature-photo1.png" /></a>
                <a href="#"><img alt="" class="slide" id="slide-img-3" src="images/nature-photo2.png" /></a>
                <a href="#"><img alt="" class="slide" id="slide-img-4" src="images/nature-photo3.png" /></a>
                <a href="#"><img alt="" class="slide" id="slide-img-5" src="images/nature-photo4.png" /></a>
                <a href="#"><img alt="" class="slide" id="slide-img-6" src="images/nature-photo4.png" /></a>
                <a href="#"><img alt="" class="slide" id="slide-img-7" src="images/nature-photo6.png" /></a>

                <div id="slide-controls">
                    <div class="text" id="slide-client">
                        <strong>post: </strong></div>
                    <div class="text" id="slide-desc">
                    </div>
                    <div id="slide-nav">
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Step 2: CSS file
*{
margin:0;
padding:0;
}
html{
height:100%;
}
body{
height:100%;
color:#a4a4a4;
cursor:default;
font-size:11px;
line-height:16px;
text-align:center;
background-color:#000;
background-position:50% 0;
background-repeat:no-repeat;
font-family:Tahoma,sans-serif;
}
a:link,a:visited{
color:#fff;
text-decoration:none;
}
a img{
border:0;
}
div.wrap{
width:993px;
margin:0 auto;
text-align:left;
}
div#top div#nav{
float:left;
clear:both;
width:993px;
height:52px;
margin:22px 0 0;
background:url url(images/nav-bg.png) 0 0 no-repeat;
}
div#top div#nav ul{
float:left;
width:700px;
height:52px;
list-style-type:none;
}
div#nav ul li{
float:left;
height:52px;
}
div#nav ul li a{
border:0;
height:52px;
display:block;
line-height:52px;
text-indent:-9999px;
}
div#header{
margin:-1px 0 0;
}
div#video-header{
height:683px;
margin:-1px 0 0;
}
div#header div.wrap{
height:299px;
background:url(images/header-bg.png) 50% 0 no-repeat;
}
div#header div#slide-holder{
z-index:40;
width:993px;
height:299px;
position:absolute;
}
div#header div#slide-holder div#slide-runner{
top:9px;
left:9px;
width:973px;
height:278px;
overflow:hidden;
position:absolute;
}
div#header div#slide-holder img{
margin:0;
display:none;
position:absolute;
}
div#header div#slide-holder div#slide-controls{
left:0;
bottom:228px;
width:973px;
height:46px;
display:none;
position:absolute;
background:url(images/slide-bg.png) 0 0;
}
div#header div#slide-holder div#slide-controls p.text{
float:left;
color:#fff;
display:inline;
font-size:10px;
line-height:16px;
margin:15px 0 0 20px;
text-transform:uppercase;
}
div#header div#slide-holder div#slide-controls p#slide-nav{
float:right;
height:24px;
display:inline;
margin:11px 15px 0 0;
}
div#header div#slide-holder div#slide-controls p#slide-nav a{
float:left;
width:24px;
height:24px;
display:inline;
font-size:11px;
margin:0 5px 0 0;
line-height:24px;
font-weight:bold;
text-align:center;
text-decoration:none;
background-position:0 0;
background-repeat:no-repeat;
}
div#header div#slide-holder div#slide-controls p#slide-nav a.on{
background-position:0 -24px;
}
div#header div#slide-holder div#slide-controls p#slide-nav a{background-image:url(images/silde-nav.png);}
div#nav ul li a{background:url(images/nav.png) no-repeat;}

Step 3: simple JavaScript for jQuery sliders:
copy and paste the following code for jQuery sliders.add to jQuery sliders code after your HTML code in BODY section. you can change the post title and description easily just change "client" command and for description just change "desc" from Jquery code.


Step 4: link jquery.js, scripts.js, file to your html pages :
Download the jquery.js, scripts.js, file and link this file in your HTML page inside <head> tag. Replace the "[" and "] " with "<" and ">".
1. [script type="text/javascript"] var _siteRoot='index.html',_root='index.html';
[/script]
2. jquery.js
3. scripts.js
Save and test the result!
download_box
Demo and Download

0 comments :