HTML Part for Beautiful jQuery Sliders

<div id='header1'>
<div class='wrap1'>

<div id='slide-holder'>
<div id='slide-runner'>
<a href=''><img alt='' class='slide' id='slide-img-1' src='http://upic.me/i/s4/naturephoto.png'/></a>
<a href=''><img alt='' class='slide' id='slide-img-2' src='http://upic.me/i/yt/naturephoto1.png'/></a>
<a href=''><img alt='' class='slide' id='slide-img-3' src='http://upic.me/i/33/naturephoto2.png'/></a>
<a href=''><img alt='' class='slide' id='slide-img-4' src='http://upic.me/i/pt/naturephoto3.png'/></a>
<a href=''><img alt='' class='slide' id='slide-img-5' src='http://upic.me/i/hm/naturephoto4.png'/></a>
<a href=''><img alt='' class='slide' id='slide-img-6' src='http://upic.me/i/s9/naturephoto5.png'/></a>
<a href=''><img alt='' class='slide' id='slide-img-7' src='http://upic.me/i/yo/naturephoto6.png'/></a>
<div id='slide-controls'>
<p class='text' id='slide-client'><strong>post: </strong><span/></p>
<p class='text' id='slide-desc'/>
<p id='slide-nav'/>
</div>

</div>
<!--content featured gallery here -->
</div>
<script type='text/javascript'>
if(!window.slider) var slider={};
slider.data=[{"id":"slide-img-1","client":"nature beauty","desc":"nature beauty photography"},
{"id":"slide-img-2","client":"nature beauty","desc":"add your description here"},
{"id":"slide-img-3","client":"nature beauty","desc":"add your description here"},
{"id":"slide-img-4","client":"nature beauty","desc":"add your description here"},
{"id":"slide-img-5","client":"nature beauty","desc":"add your description here"},
{"id":"slide-img-6","client":"nature beauty","desc":"add your description here"},
{"id":"slide-img-7","client":"nature beauty","desc":"add your description here"}];
</script>
</div></div><!--/header1-->

Read More

CSS Part for Beautiful jQuery Sliders

CSS for Beautiful jQuery Sliders

/*******jQuery beatiful Slider EDIT by www.hackublog.com********/
div.wrap1{
width : 993px;
margin : 0 auto;
text-align : left;
}
div.wrap1 a{color:#ffffff;}
div#top div#nav{
float : left;
clear : both;
width : 993px;
height : 52px;
margin : 22px 0 0;
background:url url(http://upic.me/i/kg/navbg.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#header1{
margin:-1px 0 0;
}
div#video-header1{
height:683px;
margin:-1px 0 0;
}
div#header1 div.wrap1{
height:299px;
background:url(http://upic.me/i/3k/headerbg.png) 50% 0 no-repeat;
}
div#header1 div#slide-holder{
z-index : 40;
width : 993px;
height : 299px;
position : absolute;
}
div#header1 div#slide-holder div#slide-runner{
top : 9px;
left : 9px;
width : 973px;
height : 278px;
overflow : hidden;
position : absolute;
}
div#header1 div#slide-holder img{
margin:0;
display:none;
position:absolute;
}
div#header1 div#slide-holder div#slide-controls{
left : 0;
bottom : 228px;
width : 973px;
height : 46px;
display : none;
position : absolute;
background:url(http://upic.me/i/s3/slidebg.png) 0 0;
}
div#header1 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#header1 div#slide-holder div#slide-controls p#slide-nav{
float:right;
height:24px;
display:inline;
margin:11px 15px 0 0;
}
div#header1 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#header1 div#slide-holder div#slide-controls p#slide-nav a.on{
background-position:0 -24px;
}
div#header1 div#slide-holder div#slide-controls p#slide-nav a{background-image:url(http://upic.me/i/qa/sildenav.png);}
div#nav ul li a{background:url(http://upic.me/i/kg/navbg.png) no-repeat;}

Read More

Java Script Part for Beautiful jQuery Sliders

<script type="text/javascript">var _siteRoot='index.html',_root='index.html';</script>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript'/>
<script src='http://hackublog.googlecode.com/files/jquery-slider-scripts.js' type='text/javascript'/>

Credit : สอนทำบล็อก วิธีสร้างบล็อก แต่งบล็อก blogger blogspot

Read More