This tutorial explains how to develop Create Beautiful jQuery sliders tutorial with image description and name.
The final result is something like this:
Step 1: HTML page:
Create a new HTML page and copy and paste the following code inside <body> tag:
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 ">".
The final result is something like this:
Step 1: HTML page:Create a new HTML page and copy and paste the following code inside <body> tag:
Step 2: CSS file
post:
*{
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![/script]
2. jquery.js
3. scripts.js
 Demo and Download |
