10 cara membuat slideshow blogger tampa mengedit kode html ~ Solo Online

Inilah 10 cara membuat slideshow blogger tampa harus mengedit kode html template blog kita. Jadi cara membuatnya nanti langkahnya sangat mudah sekali, yaitu kita tinggal mengcopy kode html slideshow'nya kemudian kita pastekan di widget blog kita.

Kita mulai sekarang ya? sudah siap kalian untuk mencoba membuat slideshow'nya, kalau sudah siap, silahkan kalian copy dulu salah satu dari 10 kode html / script slideshow dibawah ini!

Kode html slideshow jquery slider pink style with css3.
<style>

#wrslider { background: white url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6XITh5xbKSMs-ZZrefzdKjmUoNRuXPkwk8a4GesCPCqKoWmXp_Swhdlc5ppX1ljWeQmIb2HlTgK2LPlmrVeu6BfrODSycqjly7Idk8Lc3kb29hRB5jf5rozYb0hUwseTXAomr4i7QQtUr/w960-h227-no/Faceblog+Evolutions+%25281%2529.jpg); height: 227px; overflow: hidden; position: relative; }
#mover { width: 2880px; position: relative; }
.slide { padding: 40px 30px; width: 900px; float: left; position: relative; }
.slide h1 { font-family: Helvetica, Sans-Serif; font-size: 30px; letter-spacing: -1px; color: #ac0000; }
.slide p { color: #999; font-size: 12px; line-height: 22px; width: 300px; }
.slide img { position: absolute; top: 20px; left: 400px; }
#slider-stopper { position: absolute; top: 1px; right: 20px; background: #ac0000; color: white; padding: 3px 8px; font-size: 10px; text-transform: uppercase; z-index: 1000; }
</style>
<script type="text/javascript" src="http://faceblog-evolutions.googlecode.com/files/jquery-1.2.6.js"></script>
<script type="text/javascript" src="http://faceblog-evolutions.googlecode.com/files/startstop-slider.js"></script>

<div id="wrslider">
<div id="mover">
<div id="slide-1" class="slide">
<h1>Judul 1</h1>
<p>Silahkan ganti dengan deskripsi yang di inginkan</p>
<a href="http://mas-andes.blogspot.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7HdmXW_wsWVRDzuQWOQcaLIX3tekvNntMrOUFboiG8mx7KAsQnxPz1sCqOoAwEti-w8EZ7Xf9kgfZxAgUNEpa4PH7dx-igY1_GnWk97kyf5pe0V8drA1JLmqdk60q2vNG2nC8G6AH37Qs/w434-h161-no/Faceblog+Evolutions+%25281%2529.png" alt="learn more" /></a>
</div>

<div class="slide">
<h1>Judul 2</h1>
<p>Silahkan ganti dengan deskripsi yang di inginkan</p>
<a href="http://mas-andes.blogspot.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigIIPZfeG0bqVahZdpbCvhj6LvrBQj8Fw2VYmQQcmbVTnVDrnxVEE7FX1rsI1-Tmf5lXnDzfePunRLPjRo9lYagIqmw8lk53TLzzjp0X_yhLlnVOVPvHSHwBn417P0yvcy8kGaTBql8g1-/w434-h161-no/Faceblog+Evolutions+%25282%2529.png" alt="learn more" /></a>
</div>

<div class="slide">
<h1>Judul 3</h1>
<p>Silahkan ganti dengan deskripsi yang di inginkan</p>
<a href="http://mas-andes.blogspot.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkMQVrDuOl13ddpM5m0M5OaobFizeGChvtxhM2JT3JxC69WRFcZc4dR-CE3sgKyFwvzWAht74-v59Xf4K2eMFQreKJW6P3erooYsFHBZeQ2hMv7vV6zdznHXvoQtdkf32njJi-INHNgQ2c/w434-h161-no/Faceblog+Evolutions+%25283%2529.png" alt="learn more" /></a>
</div>
</div> </div>
Slider blog with css3. <style>
#sliderblog{
width:400px;
padding-right:115px;
position:relative;
border:5px solid #ccc;
height:250px;
background:#fff;
}
#sliderblog ul.ui-tabs-nav{
position:absolute;
top:0; left:400px;
list-style:none;
padding:0; margin:0;
width:115px;
}
#sliderblog ul.ui-tabs-nav li{
padding:1px 0; padding-left:13px;
font-size:12px;
color:#666;
}
#sliderblog ul.ui-tabs-nav li img{
float:left; margin:2px 5px;
background:#fff;
padding:2px;
border:1px solid #eee;
}
#sliderblog ul.ui-tabs-nav li span{
font-size:11px; font-family:Verdana;
line-height:18px;
}
#sliderblog li.ui-tabs-nav-item a{
display:block;
height:60px;
color:#333; background:#fff;
line-height:20px;
}
#sliderblog li.ui-tabs-nav-item a:hover{
background:#f2f2f2;
}
#sliderblog li.ui-tabs-selected{
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFyfNgFUestB6m7d0nlO1ZOP3w7nf0CkYPJhvT_eO0BbWo2DHCgXyyfpbKfW7FOTuFChFzIMGIw_W8r91_dp_yk2co0UsHoKfU38YSzqomxT0mc1bEGypxPD4ww3T2p8GB1qCuu3J3rJnc/w15-h40-no/selected-item.gif') top left no-repeat;
}
#sliderblog ul.ui-tabs-nav li.ui-tabs-selected a{
background:#ccc;
}
#sliderblog .ui-tabs-panel{
width:400px; height:250px;
background:#999; position:relative;
}
#sliderblog .ui-tabs-panel .info{
position:absolute;
top:180px; left:0;
height:70px;
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinAK5sLvK8sdM2_dtW0fzPQ_DSo1EM2zB53Clge1gGZL075AmmlRUu2iQMZ2McnMO79rfWJMNHtTQKiBsamZE5LAOyjWre8O70nsisAPqOhbUb21sELuzYTiBG_nZCr-lBBFxnjElL0wwm/s2/transparent-bg.png');
}
#sliderblog .info h2{
font-size:18px; font-family:Georgia, serif;
color:#fff; padding:5px; margin:0;
overflow:hidden;
}
#sliderblog .info p{
margin:0 5px;
font-family:Verdana; font-size:11px;
line-height:15px; color:#f0f0f0;
}
#sliderblog .info a{
text-decoration:none;
color:#fff;
}
#sliderblog .info a:hover{
text-decoration:underline;
}
#sliderblog .ui-tabs-hide{
display:none;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" ></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.3/jquery-ui.min.js" ></script>
<script type="text/javascript">
$(document).ready(function(){
$("#sliderblog > ul").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true);
});
</script>

<div id="sliderblog" >
<ul class="ui-tabs-nav">
<li class="ui-tabs-nav-item ui-tabs-selected" id="nav-fragment-1"><a href="#fragment-1"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMkRh5niWYQYmqLXxqHoZZmtB6veZpRXzpshqDQWcPdGTLJhpSU3gbynnY0CgmEWWLh_dlQhgqNvN2RQRsOVKz0uBTcDx1x9l2JNF_NMGbhz4SLoNaylC7yxVRCBNrXUOC3ePccg5QTzUj/w80-h50-no/Faceblog+Evolutions+Small+%25281%2529.jpg" alt="" /></a></li>
<li class="ui-tabs-nav-item" id="nav-fragment-2"><a href="#fragment-2"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiT-sMxzESpXP-ITlJfryQZWiG8rRJTsABv00-T-N2rrvE9Cx5WmhAK-grETNvSO4M_XiAJMOCvtyLvNw7f7JvY0CevfYz_rcLOM0tXRfVeO2mZxIXy2PYw3kKUMBjcDycstOzs2BF4v0uq/w80-h50-no/Faceblog+Evolutions+Small+%25282%2529.jpg" alt="" /></a></li>
<li class="ui-tabs-nav-item" id="nav-fragment-3"><a href="#fragment-3"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLtH_x_EeaNJN7lZmT1-U10RnhvSEZzBsR5JpGCkhNtrug6Dp2fPZVi9-AaqNfk-ItS3ZEhJdWXSPlCG9m8u3niX5RXaNtUKDXOXBALJcVOclVrrxShXuA3dbKNEgdShyphenhyphen5w8ZfF62NYRF2/w80-h50-no/Faceblog+Evolutions+Small+%25283%2529.jpg" alt="" /></a></li>
<li class="ui-tabs-nav-item" id="nav-fragment-4"><a href="#fragment-4"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXtojdJK8jQAYjJ5Vb6HUL6iEmMvHF1IbBdjsJPVDkjkeUGasQJ1s6kJHCqdBgnHA397QXf2Vl0I9iY4JcUOsFvYG4YxOzN2tKoOz9M1o1XHphe-Ycrcz-OZE2mVkieEy_qLvASieaVkEB/w80-h50-no/Faceblog+Evolutions+Small+%25284%2529.jpg" alt="" /></a></li>
</ul>

<div id="fragment-1" class="ui-tabs-panel">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLPIxAGFZ-zokfL2I1ELlwSFEKrRyUlwyXmFV_jVkyy0YgThIXtFqggACICDTutb02t5jl1CZeeSyrt94M_WTGuYFWoUcSwUZEh0fymqMRPcDPQZIWgzi3A_sltMSjidpjP2UxKCw6eaKh/w400-h250-no/Faceblog+Evolutions+%25281%2529.jpg" alt="" />
<div class="info" >
<h2><a href="http://mas-andes.blogspot.com" >Faceblog Evolutions</a></h2>
<p>http://mas-andes.blogspot.com - Tutorial Blog | SEO | HTML | CSS | jQuery....<a href="http://mas-andes.blogspot.com" >read more</a></p>
</div>
</div>

<div id="fragment-2" class="ui-tabs-panel ui-tabs-hide">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_9e1dHBSBKzc2HvGV5HaCgvhWtg2LmBdmWN03qMMMESyCUe06iLC52MGARQbeAizNhtLRdRoaAdieJuruqfNnhMA6VKPVIm6aCZiUfeA4rS7AWZpzDNO7IzQd0KkYkflIszlrZkWxIpev/w400-h250-no/Faceblog+Evolutions+%25282%2529.jpg" alt="" />
<div class="info" >
<h2><a href="http://mas-andes.blogspot.com/2013/06/cara-membuat-iklan-seperti-google.html" >Membuat Iklan Seperti Google Adsense</a></h2>
<p>Untuk membuat iklan pada sebuah blog dengan menggunakan gaya yang layaknya seperti Google Adsense....<a href="http://mas-andes.blogspot.com/2013/06/cara-membuat-iklan-seperti-google.html" >read more</a></p>
</div>
</div>

<div id="fragment-3" class="ui-tabs-panel ui-tabs-hide">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOZdhfCp2kPz2NiCp2F8ZBZm-se9_Vm1ISKO82y36cu8aHVtQg3LVkEx9pIOzpt6flmnGu6zyfbDEt3h21sNSs00lWZyRRPs2v3HIfKNvgcAqXWYMxWEZHdUT-nfxF6j4cANwv2R9m67xO/w400-h250-no/Faceblog+Evolutions+%25283%2529.jpg" alt="" />
<div class="info" >
<h2><a href="http://mas-andes.blogspot.com/2013/06/trik-optimasi-meta-tag-seo-valid-html5.html" >Optimasi Meta Tag SEO Valid HTML5</a></h2>
<p>Dalam sebuah blog fungsi meta tag tentu sangat penting dan diperlukan untuk lebih memaksimalkan potensi SEO....<a href="http://mas-andes.blogspot.com/2013/06/trik-optimasi-meta-tag-seo-valid-html5.html" >read more</a></p>
</div>
</div>

<div id="fragment-4" class="ui-tabs-panel ui-tabs-hide">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1iM4oS8UbLWxMM9JxX2yKFvmmxsvJQPW3bLbFweB0GcubOdDSfEZaOWxv3ndN4uHYR6S0-Abd_WUqTO8xDlyBmNEaKChFn-6K0o7DOaVC5VbnjchbKa_VWxqUPg8lVBz0PtnQVDPKH_Kd/w400-h250-no/Faceblog+Evolutions+%25284%2529.jpg" alt="" />
<div class="info" >
<h2><a href="http://mas-andes.blogspot.com/2013/06/membuat-sidebar-blog-dengan-efek-ribbon.html" >Membuat Sidebar Blog Efek Ribbon</a></h2>
<p>Tutorial cara membuat sidebar pada blog anda agar lebih elegant dengan tampilan efek ribbon yang cantik....<a href="http://mas-andes.blogspot.com/2013/06/membuat-sidebar-blog-dengan-efek-ribbon.html" >read more</a></p>
</div>
</div>
</div>
Dinamic slider with navigation. <style>
.main_slider {
float: left;
position: relative;
}
.window_slider {
height:286px;
width: 900px;
overflow: hidden;
position: relative;
}
.image_reel {
position: absolute;
top: 0; left: 0;
}
.image_reel img {float: left;}
.paging {
position: absolute;
bottom: 40px; right: -7px;
width: 178px; height:47px;
z-index: 100;
text-align: center;
line-height: 40px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxxLG7qcU_xWbrq_NCLfViVaTVEYukIJ5QB7yy8bJwUWsLzV2rkKcnNXDucMTb-fPj5CLaUzvFNgwfI3pIea5k0W33KHN2CkAb8X9PQ531LBhm9dY8j_fURj2DEQ7DKdfGpxkCc86Ynw9F/h94/paging_bg2.png) no-repeat;
display: none;
}
.paging a {
padding: 5px;
text-decoration: none;
color: #fff;
}
.paging a.active {
font-weight: bold;
background: #920000;
border: 1px solid #610000;
-moz-border-radius: 3px;
-khtml-border-radius: 3px;
-webkit-border-radius: 3px;
}
.paging a:hover {font-weight: bold;}
</style>
<script type="text/javascript" src="http://faceblog-evolutions.googlecode.com/files/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".paging").show();
$(".paging a:first").addClass("active");
var imageWidth = $(".window_slider").width();
var imageSum = $(".image_reel img").size();
var imageReelWidth = imageWidth * imageSum;
$(".image_reel").css({'width' : imageReelWidth});
rotate = function(){
var triggerID = $active.attr("rel") - 1;
var image_reelPosition = triggerID * imageWidth;
$(".paging a").removeClass('active');
$active.addClass('active');
$(".image_reel").animate({
left: -image_reelPosition
}, 500 );
};
rotateSwitch = function(){
play = setInterval(function(){
$active = $('.paging a.active').next();
if ( $active.length === 0) {
$active = $('.paging a:first');
}
rotate();
}, 7000);
};
rotateSwitch();
$(".image_reel a").hover(function() {
clearInterval(play);
}, function() {
rotateSwitch();
});
$(".paging a").click(function() {
$active = $(this);
clearInterval(play);
rotate();
rotateSwitch();
return false;
});
});
</script>

<div class="main_slider">
<div class="window_slider">
<div class="image_reel">
<a href="url tujuan"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFt3PGWrsG2v1oyhizu08o1XJKCowgeNq8MkTmUPYNzWLyir9KEGA2cJCaW4pGZBqDBmqVc8XN-NfDX_5geI6-dMTeRv9WX3D9FzN9ZuRx-ndXhqp9gEq_FW9bqNggPKFrRjjTuxpaD_Q/w790-h286-no/Faceblog-Evolutions-%25281%2529.jpg" width="900" alt="Faceblog Evolutions"/></a>
<a href="url tujuan"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqQVsUMPGcIBhTm8SyZS9sSj6fiq-NPUrEPsZYP2vArS7dL3AkEXPIfOyk_yihivchyphenhyphengJ3TlO-zT_fxOBCrah1-HmIKYSHmYQyMNr54bL-adIsVQgIALE3zqFTT9qpz5PIhxa-qWJNrmA/w790-h286-no/Faceblog-Evolutions-%25282%2529.jpg" width="900" alt="Faceblog Evolutions"/></a>
<a href="url tujuan"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTbJG9yFkGC5LLTLmj1iM-ROq4ADrGivItHE052o6Vr7dhIqM78FwMOrbqFJhS4oK7nxWvOCL3KpkOMrLj5ov1gjCSn_f6aWpEoH0ckiv6yPDzqFeR0j_2x8kftE26ON39jBz1oMvnzOI/w790-h286-no/Faceblog-Evolutions-%25283%2529.jpg" width="900" alt="Faceblog Evolutions"/></a>
<a href="url tujuan"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlB2YoSLC0_9G62eq1iEf4ZgpahQ8D0mKhdffSVf5jw6JmJubHB-JTC39nYlRMSkiyUGGlb3iIRwIjHzNyMRkekal_8pdsc6q10mnma6DTAUIr9Bk5fw5F32N3PisxWrf-zzPYdwTHRB8/w790-h286-no/Faceblog-Evolutions-%25284%2529.jpg" width="900" alt="Faceblog Evolutions"/></a>
</div>
</div>
<div style="display: block;" class="paging">
<a href="url tujuan" rel="1">1</a>
<a href="url tujuan" rel="2">2</a>
<a href="url tujuan" rel="3">3</a>
<a href="url tujuan" rel="4">4</a>
</div>
</div>
Skitter slideshow. <style type="text/css">

.slideshow_skitter{position:relative;width:900px;height:300px;background:#000; margin:0 auto;} .slideshow_skitter img {width:900px; height:300px;} .slideshow_skitter img{max-width:none} .slideshow_skitter .container_skitter{overflow:hidden;position:relative} .slideshow_skitter .image{overflow:hidden} .slideshow_skitter .slideshow_clone{position:absolute;top:0;left:0;width:100px;overflow:hidden;display:none;z-index:20} .slideshow_skitter .slideshow_clone img{position:absolute;top:0;left:0;z-index:20} .slideshow_skitter .prev_button{position:absolute;top:50%;left:0px;z-index:152;overflow:hidden;text-indent:-9999em;margin-top:-25px;-webkit-transition:all .2s;-moz-transition:all .2s;transition:all .2s;background-position:-42px -42px;width:42px;height:42px} .slideshow_skitter .next_button{position:absolute;top:50%;right:0px;z-index:152;overflow:hidden;text-indent:-9999em;margin-top:-25px;-webkit-transition:all .2s;-moz-transition:all .2s;transition:all .2s;background-position:0 -42px;width:42px;height:42px} .slideshow_skitter .info_slide{position:absolute;top:15px;left:15px;z-index:100;background:#000;color:#fff;font:bold 11px arial;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;opacity:0.75;padding:5px 0 5px 5px} .slideshow_skitter .info_slide .image_number{background:#333;float:left;cursor:pointer;-moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;-webkit-transition:all .2s;-moz-transition:all .2s;transition:all .2s;margin:0 5px 0 0;padding:2px 10px} .slideshow_skitter .info_slide .image_number_select,.slideshow_skitter .info_slide .image_number_select:hover{background:#c33;float:left;margin:0 5px 0 0;padding:2px 10px} .slideshow_skitter .container_thumbs{position:relative;overflow:hidden;height:50px} .slideshow_skitter .info_slide_thumb{height:50px;-moz-border-radius:0;-webkit-border-radius:0;border-radius:0;overflow:hidden;top:0;left:0;opacity:1.0;padding:0!important} .slideshow_skitter .info_slide_thumb .image_number{overflow:hidden;width:100px;height:50px;position:relative;-moz-border-radius:0!important;-webkit-border-radius:0!important;border-radius:0!important;margin:0!important;padding:0!important} .slideshow_skitter .info_slide_thumb .image_number img{position:absolute;top:-30px;left:-30px;height:100px} .slideshow_skitter .slideshow_scroll_thumbs{padding:0} .slideshow_skitter .slideshow_scroll_thumbs .scroll_thumbs{position:absolute;bottom:60px;left:50px;background:0 to(#fff));width:200px;height:10px;overflow:hidden;text-indent:-9999em;z-index:101;cursor:pointer;border:0 solid #333} .slideshow_skitter .info_slide_dots{position:absolute;bottom:10px;background:rgba(255,255,255,0.8);box-shadow:rgba(0,0,0,0.3) 1px 1px 0;z-index:151;-moz-border-radius:50px;-webkit-border-radius:50px;border-radius:50px;padding:5px 0 5px 5px} .slideshow_skitter .info_slide_dots .image_number{background:#333;float:left;cursor:pointer;-moz-border-radius:50px;-webkit-border-radius:50px;border-radius:50px;width:18px;height:18px;text-indent:-9999em;overflow:hidden;-webkit-transition:all .2s;-moz-transition:all .2s;transition:all .2s;margin:0 5px 0 0} .slideshow_skitter .info_slide_dots .image_number_select,.slideshow_skitter .info_slide_dots .image_number_select:hover{background:#c33;float:left;margin:0 5px 0 0} .loading{position:absolute;top:50%;right:50%;z-index:10000;color:#fff;text-indent:-9999em;overflow:hidden;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6r70fR-WBfzxNCgpKzWHkPiRDCx0s0PfFKGYLOpzc2x1VfBl0SAeGJAfaC29st0IgqEmrvbb-DIP2Nml27uR9H364fRDLFfeNTCgqsxgql6zROtAFbT4jVM-hD9iqDH5AwDv1PztpNjc/h120/ajax-loader.gif) no-repeat left top;width:32px;height:32px;margin:-16px} .slideshow_skitter .label_skitter{text-transform:uppercase;z-index:150;position:absolute;bottom:0;left:0;color:#fff;display:none;opacity:0.8;background:#000} .slideshow_skitter .label_skitter p{font:normal 22px arial,tahoma;letter-spacing:-1px;margin:0;padding:10px} .slideshow_skitter .progressbar{background:#000;position:absolute;top:5px;left:15px;height:5px;width:200px;z-index:99;border-radius:20px} .slideshow_skitter .preview_slide{display:none;position:absolute;z-index:152;bottom:30px;left:-40px;width:100px;height:100px;background:#fff;border:1px solid #222;-moz-box-shadow:rgba(0,0,0,0.7) 2px 2px 5px;-webkit-box-shadow:rgba(0,0,0,0.7) 2px 2px 5px;box-shadow:rgba(0,0,0,0.7) 2px 2px 5px;overflow:hidden} .slideshow_skitter .preview_slide ul{height:100px!important;overflow:hidden!important;list-style:none!important;display:block!important;position:absolute!important;top:0;left:0;margin:0!important} .slideshow_skitter .preview_slide ul li{width:100px!important;height:100px!important;overflow:hidden!important;float:left!important;position:relative!important;display:block!important;margin:0!important;padding:0!important} .slideshow_skitter .preview_slide ul li img{position:absolute!important;top:0!important;left:0!important;height:150px!important;width:auto!important} #overlay_skitter{position:absolute;top:0;left:0;width:100%;z-index:9998;opacity:1;background:#000} .slideshow_skitter .focus_button{position:absolute;top:50%;z-index:100;overflow:hidden;text-indent:-9999em;margin-top:-25px;opacity:0;-webkit-transition:all .2s;-moz-transition:all .2s;transition:all .2s;background-position:-42px 0;width:42px;height:42px} .slideshow_skitter .play_pause_button{position:absolute;top:50%;z-index:151;overflow:hidden;text-indent:-9999em;margin-top:-25px;opacity:0;-webkit-transition:all .2s;-moz-transition:all .2s;transition:all .2s;background-position:0 0;width:42px;height:42px} .slideshow_skitter_large{width:900px;height:300px} .slideshow_skitter_small{width:200px;height:100px} .slideshow_skitter .focus_button,.slideshow_skitter .next_button,.slideshow_skitter .prev_button,.slideshow_skitter .play_pause_button{display:block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWUr1YFyGFX5rIU1094L2I0Rw7NwtADo-Fq1_7daVx_s7LR9rzTvSl1jMKHZ82wUYzNCbM631pb2hE9UYfVqBXn6hZwrX4htaSwnnO5YaEgokRriD3Z9rhenrwoiTwIIYJenmfNmx2XOQ/w84-h126-no/sprite-default.png) no-repeat} .slideshow_skitter .play_pause_button.play_button{background-position:0 -84px;width:42px;height:42px} .skitter-minimalist .prev_button,.skitter-minimalist .next_button,.skitter-minimalist .play_pause_button,.skitter-minimalist .focus_button{display:block;background:url(https://lh5.googleusercontent.com/-3wU0mUXni5Y/UnUHUQR_btI/AAAAAAAAGew/9goWUJyX3rM/w24-h110-no/sprite-minimalist.png) no-repeat!important} .skitter-minimalist .prev_button{background-position:0 0!important;width:24px!important;height:28px!important;} .skitter-minimalist .next_button{background-position:0 -28px!important;width:24px!important;height:28px!important;} .skitter-minimalist .play_pause_button{background-position:0 -74px!important;width:18px!important;height:18px!important} .skitter-minimalist .play_pause_button.play_button{background-position:0 -56px!important;width:18px!important;height:18px!important} .skitter-minimalist .focus_button{background-position:0 -92px!important;width:18px!important;height:18px!important} .skitter-minimalist .info_slide .image_number{background:#000;box-shadow:rgba(255,255,255,0.2) 1px 1px 0;font-size:12px;font-weight:400} .skitter-minimalist .info_slide .image_number_select,.skitter-minimalist .info_slide .image_number_select:hover{background:#c33} .skitter-minimalist .info_slide_dots .image_number{width:14px;height:14px;box-shadow:rgba(255,255,255,0.2) 1px 1px 0} .skitter-round .prev_button,.skitter-round .next_button,.skitter-round .play_pause_button,.skitter-round .focus_button{display:block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0anRqnb0549mNGFrCuuI5oGTIyCYbRjFFo5xb5VoTOAYwkBNbvvFgf5PRle7vabudOS0-8zNHpa7d-jmVLySHvSWq8UIQGtVkIuBNDzZCRwZB9U5_wKEp_aU_KS4a4P9NZP7B0dKBP-w/w47-h116-no/sprite-round.png) no-repeat} .skitter-round .prev_button{background-position:0 0;width:23px;height:47px;left:-23px} .skitter-round .next_button{background-position:-23px 0;width:23px;height:47px;right:-23px} .skitter-round .next_button:hover,.skitter-round .prev_button:hover{opacity:1} .skitter-round .play_pause_button{background-position:0 -70px;width:47px;height:23px;top:24px;left:24px!important} .skitter-round .play_pause_button.play_button{background-position:0 -47px;width:47px;height:23px;top:24px} .skitter-round .focus_button{background-position:0 -93px;width:47px;height:23px;top:24px;left:82px!important} .skitter-round .info_slide .image_number{background:#999;box-shadow:rgba(255,255,255,0.2) 1px 1px 0;font-size:12px;font-weight:400} .skitter-round .info_slide_dots .image_number{width:14px;height:14px;box-shadow:rgba(255,255,255,0.2) 1px 1px 0;background:#999} .skitter-round .progressbar{top:5px;left:0;background:#333;box-shadow:rgba(255,255,255,0.3) 1px 1px 0} .skitter-clean .prev_button,.skitter-clean .next_button,.skitter-clean .play_pause_button,.skitter-clean .focus_button{display:block;background:url(https://lh5.googleusercontent.com/-00FmPtkv7CQ/UnUHUqoFqfI/AAAAAAAAGe4/pZwlaZ05FQM/w47-h215-no/sprite-clean.png) no-repeat} .skitter-clean .prev_button{background-position:0 0;width:47px;height:46px} .skitter-clean .next_button{background-position:0 -46px;width:47px;height:46px} .skitter-clean .play_pause_button{background-position:0 -133px;width:41px;height:41px} .skitter-clean .play_pause_button.play_button{background-position:0 -92px;width:41px;height:41px} .skitter-clean .focus_button{background-position:0 -174px;width:41px;height:41px} .skitter-clean .info_slide_dots .image_number{width:14px;height:14px;background:#999} .skitter-clean .progressbar{top:5px;left:5px;background:#fff;box-shadow:rgba(0,0,0,0.5) 1px 1px 0} .skitter-square .play_pause_button,.skitter-square .next_button,.skitter-square .focus_button,.skitter-square .prev_button{display:block;background:url(https://lh5.googleusercontent.com/-9CSYRZwMrVA/UnUHWTDhmaI/AAAAAAAAGfE/TguUFjlMC2U/w110-h165-no/sprite-square.png) no-repeat} .skitter-square .play_pause_button{background-position:-55px 0;width:55px;height:55px;top:10px!important;left:10px!important;bottom:auto!important;right:auto!important;margin-top:0} .skitter-square .play_pause_button.play_button{background-position:0 0;width:55px;height:55px} .skitter-square .focus_button{background-position:-55px -55px;width:55px;height:55px;top:10px!important;left:65px!important;bottom:auto!important;right:auto!important;margin-top:0} .skitter-square .next_button{background-position:0 -55px;width:55px;height:55px;top:auto;left:auto;bottom:10px;right:10px} .skitter-square .prev_button{background-position:0 -110px;width:55px;height:55px;top:auto;left:auto;bottom:10px;right:65px} .skitter-square .info_slide_dots .image_number{width:14px;height:14px;box-shadow:rgba(255,255,255,0.2) 1px 1px 0;background:#999} .skitter-square .info_slide_dots .image_number:hover{background:#999} .skitter-square .info_slide_dots .image_number_select,.skitter-square .info_slide_dots .image_number_select:hover{background:#555} .skitter-square .progressbar{top:0!important;left:0!important;width:100%;background:#fff;border-radius:0;height:2px} .slideshow_skitter ul,.slideshow_skitter .image img{display:none} .slideshow_skitter .prev_button:hover,.slideshow_skitter .next_button:hover,.slideshow_skitter .play_pause_button:hover,.slideshow_skitter .focus_button:hover{opacity:0.5!important} .slideshow_skitter .info_slide .image_number:hover,.slideshow_skitter .info_slide_dots .image_number:hover{background:#000} .skitter-minimalist .info_slide,.skitter-round .info_slide,.skitter-clean .info_slide,.skitter-square .info_slide{background:transparent} .skitter-minimalist .info_slide .image_number:hover,.skitter-round .info_slide .image_number_select,.skitter-round .info_slide .image_number_select:hover,.skitter-round .info_slide_dots .image_number_select,.skitter-round .info_slide_dots .image_number_select:hover,.skitter-clean .info_slide_dots .image_number_select,.skitter-clean .info_slide_dots .image_number_select:hover{background:#111} .skitter-round .info_slide .image_number:hover,.skitter-round .info_slide_dots .image_number:hover,.skitter-clean .info_slide_dots .image_number:hover{background:#333} .skitter-clean .info_slide .image_number,.skitter-square .info_slide .image_number{background:#fff;box-shadow:rgba(0,0,0,0.2) 1px 1px 0;font-size:12px;font-weight:400;color:#333} .skitter-clean .info_slide .image_number:hover,.skitter-square .info_slide .image_number:hover{background:#ccc} .skitter-clean .info_slide .image_number_select,.skitter-clean .info_slide .image_number_select:hover,.skitter-square .info_slide .image_number_select,.skitter-square .info_slide .image_number_select:hover{background:#111;color:#fff} </style> <script src="http://faceblog-evolutions.googlecode.com/files/jquery-1.6.3.min.js" type="text/javascript"></script> <script src="http://faceblog-evolutions.googlecode.com/files/jquery.easing.1.3.js" type="text/javascript"></script> <script src="http://faceblog-evolutions.googlecode.com/files/jquery.animate-colors-min.js" type="text/javascript"></script> <script src="http://faceblog-evolutions.googlecode.com/files/slideshow.skitter.min.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function() { $('.slideshow_skitter_large').skitter({ theme: 'square', numbers_align: 'center', progressbar: true, dots: true, preview: true }); }); </script> <div class="slideshow_skitter slideshow_skitter_large"> <ul> <li><a href="url tujuan"><img class="cube" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlrdykLk0WIzMuwPYsb07zKKjk9xOh2XZ5k0Ydx2D6qSylyp-m805wqswsE_eR6nK1PlqFxmbn8iKLHnpv1cQH6aDkYaCFPygJJfjGM3RYFE9VU5Tb6qn18uYVY3O7BCw4iJSFraFWdN0/w600-h300-no/" alt="Faceblog Evolutions" title="Faceblog Evolutions"/></a><div class="label_text"><p>Efek cube</p></div></li> <li><a href="url tujuan"><img class="cubeRandom" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBtSGZEaAtZ79BJZVn804tfWJcuUqMy9OMI6Qfka5g88MN6KJJrpK7o_FitWhin1PSjjpghLuZ6ght6qsOPLfpqMoM-l0JRtvV0owAS_8aMwuB7BL-4rtibXB0nv5ZhozIGNOcu_T1W_o/w600-h300-no/" alt="Faceblog Evolutions" title="Faceblog Evolutions"/></a><div class="label_text"><p>Efek cuberandom</p></div></li> <li><a href="url tujuan"><img class="block" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTo1nXTVX6z4AFlmmq8l8eSlBFfTgMUhuXhfVS9YV-I7eQF5zyeU37e0dAQEdHakCgDMUJr7YFX6Q3CFUucClC0-OMVeBAkXBPb1vOjJQrDUOKeJTcxuMuSPMEenhNb81njoklkvYOLtE/w790-h286-no/" alt="Faceblog Evolutions" title="Faceblog Evolutions"/></a><div class="label_text"><p>Efek block</p></div></li> <li><a href="url tujuan"><img class="cubeStop" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyJQUxFvWWJoh1wHPJzMHQ6lRN2cQMVWuzzBSKm806lKsvD6ONhtU8sXCWfq64FWrtk4xjUpMU_tuNPXxT6f_KjdOrys_hyDXybLZVRZNDwm_j5xMAmEiEZ8m9lcL_rcGxaDKuk5MV0n0/w463-h240-no/" alt="Faceblog Evolutions" title="Faceblog Evolutions"/></a><div class="label_text"><p>Efek cubestop</p></div></li> <li><a href="url tujuan"><img class="cubeHide" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGBiqby_fS56lEsmJn9kFJt-nKD1AE8ynXM4Y2WuEu8FT6hFCi-JIDh1EsfNWN9KzHM0XdBDCvCJEND7huoqMLMqQ5TrXbcHrAoij5DZ23zvuRXcJPnh4jWFGl97r9jNLaedoAg-CS0E0/w463-h240-no/" alt="Faceblog Evolutions" title="Faceblog Evolutions"/></a><div class="label_text"><p>Efek cubehide</p></div></li> </ul> </div>

Jquery image slider [ wow slider ].

<style type="text/css">
.slider-box {
    background: none repeat scroll 0 0 #FAFAFA;
    border-radius: 5px 5px 5px 5px;
    box-shadow: 0 0 3px #333333;
    margin: 0 auto;
    width: 675px;
 overflow: hidden;
}
#slider-wrapper {
    margin: 0 auto;
    padding: 10px;
}
#jslider-container {
    border: 2px solid #FFFFFF;
    max-width: 550px;
    position: relative;
    text-align: left;
    z-index: 90;
}
</style>
<link href="http://project.dimpost.com/image-slider/wowslider/css/wow-slider.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

<div class="slider-box">
<div id="slider-wrapper">
<div id="jslider-container">
 <div class="jslider_images">
      <ul>
  <li><a href="http://dimpost.com">
  <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8BHRnVsMpyyEILMGVcQQzvztEd1PT5CsnVWJjZp0FaHYHyseEbgO1UvCv6v3a6o-AULi-opOcYfuMNvNNpH90wAVBPXncpemeP5hDZHX3_EeqCqXfKWKNSTubhvZtLCyj-p0zZMZImkFt/s550/sample1.jpg" title="Sunset"/>
  </a>A boat with beautiful sunset.</li>
  <li><a href="#">
  <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlU0MVD2lEfzo-lWXFyO6P1Y1PeB52JbeEfzhUZf5xD-FzPj7syLZ9crlnpweuJ88GLgIN6PWPW330e4m5Lc6k_CG7U_6qE_MzFUDeHqAwe0TJZ54EjXxpA6ekoFMsCWm-DuJZ3-zWBOoU/s550/sample2.jpg" title="Rainbow"/>
  </a></li>
  <li><a href="#">
  <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMztbHLh-bKbmS3GxKZjKVc2_SpfuLR8y27Z7HjlYondfIxVGvjY3A_ST-_SPVPWZni9MEu5NsTZa67-6ur3x4RDYxs7wnXSkFkyYNauHIDNqWebl78advgZ8pTYLgCW8MgbPf9SP4qLjA/s550/sample3.jpg" title="True Nature"/>
  </a>Tree in field with blue sky.</li>
  <li><a href="#">
  <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRzM3enq8YtW8FdJbk-C53PRths5BYRtdir-oIXbOwObmujQSQVbss6k8kFE9SqoZvMEM3wZPtbzjjGUtsRXq1XVKAEIT6ANCk9KBaHpxa-9RGgAVjCHaGi6CUteAXWhZfmLN8Nl7Y-tWC/s550/sample4.jpg" title="Sunrise""/>
  </a>Amaizing sunrise moment</li>
  <li><a href="#">
  <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlpVS92OyUwYklTAS25kjz5AA8b4XfTbm9a8_UGDszeUpljh7AowIaZi-lpD5glxW-3uHhDkIbTrL7J33jaJ5hYwtGtlvZHlrzuhM0HWCn2aEsU9Ict3R7ObhNGbPgR2405eljMdbg87bs/s550/sample5.jpg" title="CAR in HDR Nature"/>
  </a></li>
  <li><a href="#">
  <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEQ4LvFuJmwh0GyikTXW32sQvVrE5HMT6_hH46hvA782aagcDzoYREispOoEiA6m6y0yQhSJ-_bI0NzqYsLOmtwsf2eb-waRuRU-vy4bAWc-b834wlR3bgpz8GFlQRvz9Nvdway-hDPiM9/s550/sample6.jpg" title="Sunshine"/>
  </a></li>
   </ul>
    </div> 
    
 <div class="jslider_thumbs">
        <div>
  <a href="#" title="Sunset"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1Paz58m0u1oDhwYyoNimnkMCZ9MSIf3j_VR4B9z3CyqJRnb4OEOINTgbKQNZGw3BqcwQ039MtPktZk-Qq8zHYHZ2Nrc9srj4eza5SEL-bUbDef0-UjMLZcMXfH4lbOjcr0oxFQg2rzzxH/s85/sample1.jpg"/></a>
  <a href="#" title="Rainbow"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9-TeEc-OwZOgwB4EdreFGAi_t4TfyTDuBU7L5j_f_BMokko-TNr75ReA0hSkZSGHxYIyi32d6H7nmNSE1aFq32RwAjioaM1Bbp6o4ndalyobjnnrIonNe4RkIqyAIhcpV0L6t3dAUizRy/s85/sample2.jpg"/></a>
  <a href="#" title="True Nature"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLWX36J0Tn4eHAKtxWBS7KbM4bbkcgO6WXjg60a_2hF9sYHrX7YswkOe0jl-XgYUtEvDQ4Shv52JWlrr3CDEN3Iedrw7hAjR414EhkypbSWIROvUdi0LjnfhjD6YGPqJXZSHqLMunQIQCd/s85/sample3.jpg"/></a>
  <a href="#" title="Sunrise"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj23f_1YhLBOS2xPG6ExQcth2n2bKgnSNhOUpsTeuanTkjSol0XhyphenhyphenSeW_JOCkf_p3Ckkr735p-3KZ2jSGSn2VBv7iN_1NJeK7NS99tHjeNJkitZmd94beHZgynitM9dYBGJVECmLlO1871q/s85/sample4.jpg"/></a>
  <a href="#" title="CAR in HDR Nature"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiC__ez2N4qe63pjcl52STMp8SMm_UF2JPAte6pcigJ9Ed3cCy1Q9k5kb411tDD4CEzfUFO6lrZtG1sM0owQvbq_KCBaoNPDHtX74EtUiK6tlK5WMOOGHnH8E4qVyPmN-QRFPcj58pR2aOe/s85/sample5.jpg"/></a>
  <a href="#" title="Sunshine"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgJYmNA76VFZCP2cdRsGNhU8ISVz8yGcK3Hir9EqpHZqALAGLzi27Kiu3o60AO0g6fx_phGUDmVPI-PtS0h9-SeTCXxEho6glXNA5hriSng48GIGJlg0T8zDiAlTk6KrtO_gKcTCvOUXsj/s85/sample6.jpg"/></a>
        </div>
 </div>
    
</div>
</div>
</div>
<script type="text/javascript" src="http://dimpost.googlecode.com/files/wow-slider.js"></script>

Nivo Slider.

<!-- SLIDER CSS -->
<style type="text/css">
/*
 * jQuery FlexSlider v2.2.0
 * http://www.woothemes.com/flexslider/
 *
 * Copyright 2012 WooThemes
 * Free to use under the GPLv2 license.
 * http://www.gnu.org/licenses/gpl-2.0.html
 *
 * Contributing author: Tyler Smith (@mbmufffin)
 */


/* Browser Resets
*********************************/
.flex-container a:active,
.flexslider a:active,
.flex-container a:focus,
.flexslider a:focus  {outline: none;}
.slides,
.flex-control-nav,
.flex-direction-nav {margin: 0; padding: 0; list-style: none;}


/* FlexSlider Necessary Styles
*********************************/
.flexslider li {
border: 0 none !important;
padding: 0 !important;
text-indent: 0 !important;
margin-bottom: 0 !important;
}
.flexslider {margin: 0; padding: 0;}
.flexslider .slides > li {display: none; -webkit-backface-visibility: hidden;} /* Hide the slides before the JS is loaded. Avoids image jumping */
.flexslider .slides img {width: 100%; display: block;}
.flexslider .slides, .flexslider .slides img, .flex-direction-nav { margin: 0 !important; padding: 0 !important; }
.flex-pauseplay span {text-transform: capitalize;}

/* Clearfix for the .slides element */
.slides:after {content: "\0020"; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;}
html[xmlns] .slides {display: block;}
* html .slides {height: 1%;}

/* No JavaScript Fallback */
/* If you are not using another script, such as Modernizr, make sure you
 * include js that eliminates this class on page load */
.no-js .slides > li:first-child {display: block;}

/* FlexSlider Default Theme
*********************************/
.flexslider { margin: 0 0 60px; background: #fff; border: 4px solid #fff; position: relative; -webkit-border-radius: 4px; -moz-border-radius: 4px; -o-border-radius: 4px; border-radius: 4px; -webkit-box-shadow: 0 1px 4px rgba(0,0,0,.2); -moz-box-shadow: 0 1px 4px rgba(0,0,0,.2); -o-box-shadow: 0 1px 4px rgba(0,0,0,.2); box-shadow: 0 1px 4px rgba(0,0,0,.2); zoom: 1; }
.flex-viewport { max-height: 2000px; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease; }
.loading .flex-viewport { max-height: 300px; }
.flexslider .slides { zoom: 1; }
.carousel li { margin-right: 5px; }

/* Direction Nav */
.flex-direction-nav {*height: 0;}
.flex-direction-nav a  { text-decoration:none; display: block; width: 40px; height: 45px; margin: -20px 0 0; position: absolute; top: 50%; z-index: 10; overflow: hidden; opacity: 0; cursor: pointer; color: rgba(0,0,0,0.8); text-shadow: 1px 1px 0 rgba(255,255,255,0.3); -webkit-transition: all .3s ease; -moz-transition: all .3s ease; transition: all .3s ease; }
.flex-direction-nav .flex-prev { background: url("http://project.dimpost.com/flexslider-basic/img/arrows1.png") no-repeat scroll -15px -92px transparent; left: -50px; }
.flex-direction-nav .flex-next { background: url("http://project.dimpost.com/flexslider-basic/img/arrows1.png") no-repeat scroll -15px -15px transparent; right: -50px; text-align: right; }
.flexslider:hover .flex-prev { opacity: 0.5; left: 10px; }
.flexslider:hover .flex-next { opacity: 0.5; right: 10px; }
.flexslider:hover .flex-next:hover, .flexslider:hover .flex-prev:hover { opacity: 0.9; }


/* Pause/Play */
.flex-pauseplay a { display: block; width: 20px; height: 20px; position: absolute; bottom: 5px; left: 10px; opacity: 0.8; z-index: 10; overflow: hidden; cursor: pointer; color: #000; }
.flex-pauseplay a:before  { font-family: "flexslider-icon"; font-size: 20px; display: inline-block; content: '\f004'; }
.flex-pauseplay a:hover  { opacity: 1; }
.flex-pauseplay a.flex-play:before { content: '\f003'; }

/* Control Nav */
.flex-control-nav {width: 100%; position: absolute; bottom: -40px; text-align: center;}
.flex-control-nav li {margin: 0 6px; display: inline-block; zoom: 1; *display: inline;}
.flex-control-paging li a {width: 11px; height: 11px; display: block; background: #666; background: rgba(0,0,0,0.5); cursor: pointer; text-indent: -9999px; -webkit-border-radius: 20px; -moz-border-radius: 20px; -o-border-radius: 20px; border-radius: 20px; -webkit-box-shadow: inset 0 0 3px rgba(0,0,0,0.3); -moz-box-shadow: inset 0 0 3px rgba(0,0,0,0.3); -o-box-shadow: inset 0 0 3px rgba(0,0,0,0.3); box-shadow: inset 0 0 3px rgba(0,0,0,0.3); }
.flex-control-paging li a:hover { background: #333; background: rgba(0,0,0,0.7); }
.flex-control-paging li a.flex-active { background: #000; background: rgba(0,0,0,0.9); cursor: default; }

.flex-control-thumbs {margin: 5px 0 0; position: static; overflow: hidden;}
.flex-control-thumbs li {width: 25%; float: left; margin: 0;}
.flex-control-thumbs img {width: 100%; display: block; opacity: .7; cursor: pointer;}
.flex-control-thumbs img:hover {opacity: 1;}
.flex-control-thumbs .flex-active {opacity: 1; cursor: default;}

@media screen and (max-width: 860px) {
  .flex-direction-nav .flex-prev { opacity: 1; left: 10px;}
  .flex-direction-nav .flex-next { opacity: 1; right: 10px;}
}
</style>
    
<!-- SLIDER HTML -->
      <div id="flex-isfb">
        <!-- Preloader -->
        <div id="preloader"></div>
        <style>
        /* Preloader */
        #preloader {
            position: absolute;
            top:0;
            left:0;
            right:0;
            bottom:0;
            background-color:#fff; /* change if the mask should have another color then white */
            z-index:999999999999; /* makes sure it stays on top */
        }
        
        </style>
        <div class="flexslider">
          <ul class="slides">
            <li>
                <a href="http://dimpost.com">
                <img src="http://project.dimpost.com/flexslider-basic/img/1.jpg" />
                </a>
            </li>
            <li>
                <a href="http://dimpost.com">
                <img src="http://project.dimpost.com/flexslider-basic/img/2.jpg" />
                </a>
            </li>
            <li>
                <a href="http://dimpost.com">
                <img src="http://project.dimpost.com/flexslider-basic/img/3.jpg" />
                </a>
            </li>
          </ul>
        </div>
      </div>

<!-- SLIDER JS -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://project.dimpost.com/flexslider-basic/js/jquery.flexslider-min.js"></script>
  <script type="text/javascript">
    $(window).load(function(){
      $('.flexslider').flexslider({
  animation: "slide",
  controlNav: true, 
  directionNav: true,
  easing: "swing",
  slideshowSpeed: 3000,        
     animationSpeed: 600, 
      });
    });
    //<![CDATA[
        $(window).load(function() { 
            $('#preloader').delay(350).fadeOut('slow'); 
        })
    //]]>
</script>

Javascript image slider.

<style type="text/css"/>
 /* dimpost.com - Basic Style */
body{
 background: transparent;
 font:15px/2 'Adobe Caslon Pro', Georgia, Serif;
 margin:0;
 padding:0;
}
a{outline:0 none}
#pagewrap{
 margin:10px auto;
 padding:0;
 position:relative;
 height:400px;
 width: 640px;
}
#slidewrap{position:absolute;}
#slider {
    border-color: #c0c0c0;
    border-radius: 5px 5px 5px 5px;
    border-style: solid;
    border-width: 10px 10px 30px;
    box-shadow: 0 0 3px #2F2F2F;
    height: 280px;
    margin: 10px;
    position: relative;
    width: 600px;
}
#slider images{
    position:absolute;
    top:0px;
    left:0px;
    display:none;
}
/* The Nivo Slider styles */
.nivoSlider {
 position:relative;
}
.nivoSlider images {
 position:absolute;
 top:0px;
 left:0px;
}
/* If an image is wrapped in a link */
.nivoSlider a.nivo-imageLink {
 position:absolute;
 top:0px;
 left:0px;
 width:100%;
 height:100%;
 border:0;
 padding:0;
 margin:0;
 z-index:6;
 display:none;
}
/* The slices and boxes in the Slider */
.nivo-slice {
 display:block;
 position:absolute;
 z-index:5;
 height:100%;
}
.nivo-box {
 display:block;
 position:absolute;
 z-index:5;
}
.nivo-directionNav{display:none!important}
.nivo-html-caption {
    display:none;
}
.nivo-caption{
 position:absolute;
 right:20px;
 text-align:center;
 top:130px;
 width:192px;
 z-index:60;
}
.nivo-caption p{margin:0}
.nivo-caption .title{font-style:italic}
.nivo-controlNav {
    bottom: -23px;
    display: block;
    height: 15px;
    left: 204px;
    position: absolute;
    text-align: center;
    width: 192px;
    z-index: 51;
 opacity: 0.6;
}
.nivo-controlNav a{
 background:transparent url(http://project.dimpost.com/image-slider/images/button.png) no-repeat center center;
 display:inline-block;
 height:14px;
 width:14px;
 text-indent:-9999px;
 cursor:pointer;
}
.nivo-controlNav .active{
 background:transparent url(http://project.dimpost.com/image-slider/images/button_active.png); 
}
 </style>
 <script src="http://project.dimpost.com/image-slider/jquery-1.6.1.min.js" type="text/javascript"></script>
 <script src="http://project.dimpost.com/image-slider/jquery.nivo.slider.pack.js" type="text/javascript"></script>
 <script type="text/javascript">
 $(window).load(function() {
  $('#slider').nivoSlider();
 });
 </script>
 <!--[if IE]>
  <script src="modernizr-2.0.min.js"></script>
 <![endif]-->   

<div id="pagewrap">
<div id="slidewrap">
 <div id="slider">
 <a href="http://dimpost.com/" target="_blank"><img alt="" title="#caption1" src="http://project.dimpost.com/image-slider/images/sample0.jpg" /></a>
 <a href="#" target="_blank"><img alt="" title="#caption2" src="http://project.dimpost.com/image-slider/images/sample1.jpg" /></a>
 <a href="#" target="_blank"><img alt="" title="#caption3" src="http://project.dimpost.com/image-slider/images/sample2.jpg" /></a>
 <a href="#" target="_blank"><img alt="" title="#caption4" src="http://project.dimpost.com/image-slider/images/sample3.jpg" /></a>
 <a href="#" target="_blank"><img alt="" title="#caption5" src="http://project.dimpost.com/image-slider/images/sample4.jpg" /></a>
 <a href="#" target="_blank"><img alt="" title="#caption6" src="http://project.dimpost.com/image-slider/images/sample5.jpg" /></a>
 </div>
</div>
</div>

Pure css3 image slider.

<style type="text/css" media="screen">
.container {
    margin: 0 auto;
    overflow: hidden;
    width: 700px;
}
#content-slider {
    height: 335px;
    width: 100%;
}
#slider {
    background: none repeat scroll 0 0 #000000;
    border: 5px solid #FFFFFF;
    box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.7);
    height: 320px;
    margin: 10px auto;
    overflow: visible;
    position: relative;
    width: 680px;
}
#mask {
    height: 320px;
    overflow: hidden;
}
#slider ul {
 margin:0;
 padding:0;
 position:relative;
}
#slider li {
 width:680px;
 height:320px;
 position:absolute;
 top:-325px;
 list-style:none;
}

#slider li.firstanimation {
 -moz-animation:cycle 25s linear infinite; 
 -webkit-animation:cycle 25s linear infinite;  
}
#slider li.secondanimation {
 -moz-animation:cycletwo 25s linear infinite;
 -webkit-animation:cycletwo 25s linear infinite;  
}
#slider li.thirdanimation {
 -moz-animation:cyclethree 25s linear infinite;
 -webkit-animation:cyclethree 25s linear infinite;  
}
#slider li.fourthanimation {
 -moz-animation:cyclefour 25s linear infinite;
 -webkit-animation:cyclefour 25s linear infinite;  
}
#slider li.fifthanimation {
 -moz-animation:cyclefive 25s linear infinite;
 -webkit-animation:cyclefive 25s linear infinite;  
}

#slider .tooltip {
 background:rgba(0,0,0,0.7);
 width:300px;
 height:60px;
 position:relative;
 bottom:75px;
 left:-320px;
 -moz-transition:all 0.3s ease-in-out;
 -webkit-transition:all 0.3s ease-in-out;  
}
#slider .tooltip h1 {
 color:#fff;
 font-size:24px;
 font-weight:300;
 line-height:60px;
 padding:0 0 0 20px;
}
#slider li#first:hover .tooltip, 
#slider li#second:hover .tooltip, 
#slider li#third:hover .tooltip, 
#slider li#fourth:hover .tooltip, 
#slider li#fifth:hover .tooltip {
 left:0px;
}

/* PROGRESS BAR */
.progress-bar { 
 position:relative;
 top:-5px;
 width:680px; 
 height:5px;
 background:#000;
 -moz-animation:fullexpand 25s ease-out infinite;
 -webkit-animation:fullexpand 25s ease-out infinite;
}
/* ANIMATION */
@-moz-keyframes cycle {
 0%  { top:0px; }
 4%  { top:0px; } 
 16% { top:0px; opacity:1; z-index:0; } 
 20% { top:325px; opacity:0; z-index:0; } 
 21% { top:-325px; opacity:0; z-index:-1; }
 92% { top:-325px; opacity:0; z-index:0; }
 96% { top:-325px; opacity:0; }
 100%{ top:0px; opacity:1; }
 
}
@-moz-keyframes cycletwo {
 0%  { top:-325px; opacity:0; }
 16% { top:-325px; opacity:0; }
 20% { top:0px; opacity:1; }
 24% { top:0px; opacity:1; } 
 36% { top:0px; opacity:1; z-index:0; } 
 40% { top:325px; opacity:0; z-index:0; }
 41% { top:-325px; opacity:0; z-index:-1; } 
 100%{ top:-325px; opacity:0; z-index:-1; }
}
@-moz-keyframes cyclethree {
 0%  { top:-325px; opacity:0; }
 36% { top:-325px; opacity:0; }
 40% { top:0px; opacity:1; }
 44% { top:0px; opacity:1; } 
 56% { top:0px; opacity:1; } 
 60% { top:325px; opacity:0; z-index:0; }
 61% { top:-325px; opacity:0; z-index:-1; } 
 100%{ top:-325px; opacity:0; z-index:-1; }
}
@-moz-keyframes cyclefour {
 0%  { top:-325px; opacity:0; }
 56% { top:-325px; opacity:0; }
 60% { top:0px; opacity:1; }
 64% { top:0px; opacity:1; }
 76% { top:0px; opacity:1; z-index:0; }
 80% { top:325px; opacity:0; z-index:0; }
 81% { top:-325px; opacity:0; z-index:-1; }
 100%{ top:-325px; opacity:0; z-index:-1; }
}
@-moz-keyframes cyclefive {
 0%  { top:-325px; opacity:0; }
 76% { top:-325px; opacity:0; }
 80% { top:0px; opacity:1; }
 84% { top:0px; opacity:1; }
 96% { top:0px; opacity:1; z-index:0; }
 100%{ top:325px; opacity:0; z-index:0; }
}

@-webkit-keyframes cycle {
 0%  { top:0px; }
 4%  { top:0px; }
 16% { top:0px; opacity:1; z-index:0; } 
 20% { top:325px; opacity:0; z-index:0; }
 21% { top:-325px; opacity:0; z-index:-1; }
 50% { top:-325px; opacity:0; z-index:-1; }
 92% { top:-325px; opacity:0; z-index:0; }
 96% { top:-325px; opacity:0; }
 100%{ top:0px; opacity:1; }
 
}
@-webkit-keyframes cycletwo {
 0%  { top:-325px; opacity:0; }
 16% { top:-325px; opacity:0; }
 20% { top:0px; opacity:1; }
 24% { top:0px; opacity:1; } 
 36% { top:0px; opacity:1; z-index:0; } 
 40% { top:325px; opacity:0; z-index:0; }
 41% { top:-325px; opacity:0; z-index:-1; }  
 100%{ top:-325px; opacity:0; z-index:-1; }
}
@-webkit-keyframes cyclethree {
 0%  { top:-325px; opacity:0; }
 36% { top:-325px; opacity:0; }
 40% { top:0px; opacity:1; }
 44% { top:0px; opacity:1; } 
 56% { top:0px; opacity:1; z-index:0; } 
 60% { top:325px; opacity:0; z-index:0; } 
 61% { top:-325px; opacity:0; z-index:-1; }
 100%{ top:-325px; opacity:0; z-index:-1; }
}
@-webkit-keyframes cyclefour {
 0%  { top:-325px; opacity:0; }
 56% { top:-325px; opacity:0; }
 60% { top:0px; opacity:1; }
 64% { top:0px; opacity:1; }
 76% { top:0px; opacity:1; z-index:0; }
 80% { top:325px; opacity:0; z-index:0; }
 81% { top:-325px; opacity:0; z-index:-1; }
 100%{ top:-325px; opacity:0; z-index:-1; }
}
@-webkit-keyframes cyclefive {
 0%  { top:-325px; opacity:0; }
 76% { top:-325px; opacity:0; }
 80% { top:0px; opacity:1; }
 84% { top:0px; opacity:1; }
 96% { top:0px; opacity:1; z-index:0; }
 100%{ top:325px; opacity:0; z-index:0; }
}

/* ANIMATION BAR */
@-moz-keyframes fullexpand {
    0%, 20%, 40%, 60%, 80%, 100% { width:0%; opacity:0; }
    4%, 24%, 44%, 64%, 84% { width:0%; opacity:0.3; }
   16%, 36%, 56%, 76%, 96% { width:100%; opacity:0.7; }
   17%, 37%, 57%, 77%, 97% { width:100%; opacity:0.3; }
   18%, 38%, 58%, 78%, 98% { width:100%; opacity:0; } 
}
@-webkit-keyframes fullexpand {
    0%, 20%, 40%, 60%, 80%, 100% { width:0%; opacity:0; }
    4%, 24%, 44%, 64%, 84% { width:0%; opacity:0.3; }
   16%, 36%, 56%, 76%, 96% { width:100%; opacity:0.7; }
   17%, 37%, 57%, 77%, 97% { width:100%; opacity:0.3; }
   18%, 38%, 58%, 78%, 98% { width:100%; opacity:0; } 
}
</style>

<div class="container">
 <div id="content-slider">
     <div id="slider">
         <div id="mask">
            <ul>
            <li id="first" class="firstanimation">
            <a href="http://dimpost.com">
            <img src="http://project.dimpost.com/image-slider/images/img_1.jpg" alt="Cougar"/>
            </a>
            <div class="tooltip">
            <h1>Cougar</h1>
            </div>
            </li>

            <li id="second" class="secondanimation">
            <a href="#">
            <img src="http://project.dimpost.com/image-slider/images/img_2.jpg" alt="Lions"/>
            </a>
            <div class="tooltip">
            <h1>Lions</h1>
            </div>
            </li>
            
            <li id="third" class="thirdanimation">
            <a href="#">
            <img src="http://project.dimpost.com/image-slider/images/img_3.jpg" alt="Snowalker"/>
            </a>
            <div class="tooltip">
            <h1>Snowalker</h1>
            </div>
            </li>
                        
            <li id="fourth" class="fourthanimation">
            <a href="#">
            <img src="http://project.dimpost.com/image-slider/images/img_4.jpg" alt="Howling"/>
            </a>
            <div class="tooltip">
            <h1>Howling</h1>
            </div>
            </li>
                        
            <li id="fifth" class="fifthanimation">
            <a href="#">
            <img src="http://project.dimpost.com/image-slider/images/img_5.jpg" alt="Sunbathing"/>
            </a>
            <div class="tooltip">
            <h1>Sunbathing</h1>
            </div>
            </li>
            </ul>
            </div>
            <div class="progress-bar"></div>
        </div>
    </div>
</div>

Flex Slider basic image.

<!-- SLIDER CSS -->
<style type="text/css">
/*
 * jQuery FlexSlider v2.2.0
 * http://www.woothemes.com/flexslider/
 *
 * Copyright 2012 WooThemes
 * Free to use under the GPLv2 license.
 * http://www.gnu.org/licenses/gpl-2.0.html
 *
 * Contributing author: Tyler Smith (@mbmufffin)
 */


/* Browser Resets
*********************************/
.flex-container a:active,
.flexslider a:active,
.flex-container a:focus,
.flexslider a:focus  {outline: none;}
.slides,
.flex-control-nav,
.flex-direction-nav {margin: 0; padding: 0; list-style: none;}


/* FlexSlider Necessary Styles
*********************************/
.flexslider li {
border: 0 none !important;
padding: 0 !important;
text-indent: 0 !important;
margin-bottom: 0 !important;
}
.flexslider {margin: 0; padding: 0;}
.flexslider .slides > li {display: none; -webkit-backface-visibility: hidden;} /* Hide the slides before the JS is loaded. Avoids image jumping */
.flexslider .slides img {width: 100%; display: block;}
.flexslider .slides, .flexslider .slides img, .flex-direction-nav { margin: 0 !important; padding: 0 !important; }
.flex-pauseplay span {text-transform: capitalize;}

/* Clearfix for the .slides element */
.slides:after {content: "\0020"; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;}
html[xmlns] .slides {display: block;}
* html .slides {height: 1%;}

/* No JavaScript Fallback */
/* If you are not using another script, such as Modernizr, make sure you
 * include js that eliminates this class on page load */
.no-js .slides > li:first-child {display: block;}

/* FlexSlider Default Theme
*********************************/
.flexslider { margin: 0 0 60px; background: #fff; border: 4px solid #fff; position: relative; -webkit-border-radius: 4px; -moz-border-radius: 4px; -o-border-radius: 4px; border-radius: 4px; -webkit-box-shadow: 0 1px 4px rgba(0,0,0,.2); -moz-box-shadow: 0 1px 4px rgba(0,0,0,.2); -o-box-shadow: 0 1px 4px rgba(0,0,0,.2); box-shadow: 0 1px 4px rgba(0,0,0,.2); zoom: 1; }
.flex-viewport { max-height: 2000px; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease; }
.loading .flex-viewport { max-height: 300px; }
.flexslider .slides { zoom: 1; }
.carousel li { margin-right: 5px; }

/* Direction Nav */
.flex-direction-nav {*height: 0;}
.flex-direction-nav a  { text-decoration:none; display: block; width: 40px; height: 45px; margin: -20px 0 0; position: absolute; top: 50%; z-index: 10; overflow: hidden; opacity: 0; cursor: pointer; color: rgba(0,0,0,0.8); text-shadow: 1px 1px 0 rgba(255,255,255,0.3); -webkit-transition: all .3s ease; -moz-transition: all .3s ease; transition: all .3s ease; }
.flex-direction-nav .flex-prev { background: url("http://project.dimpost.com/flexslider-basic/img/arrows1.png") no-repeat scroll -15px -92px transparent; left: -50px; }
.flex-direction-nav .flex-next { background: url("http://project.dimpost.com/flexslider-basic/img/arrows1.png") no-repeat scroll -15px -15px transparent; right: -50px; text-align: right; }
.flexslider:hover .flex-prev { opacity: 0.5; left: 10px; }
.flexslider:hover .flex-next { opacity: 0.5; right: 10px; }
.flexslider:hover .flex-next:hover, .flexslider:hover .flex-prev:hover { opacity: 0.9; }


/* Pause/Play */
.flex-pauseplay a { display: block; width: 20px; height: 20px; position: absolute; bottom: 5px; left: 10px; opacity: 0.8; z-index: 10; overflow: hidden; cursor: pointer; color: #000; }
.flex-pauseplay a:before  { font-family: "flexslider-icon"; font-size: 20px; display: inline-block; content: '\f004'; }
.flex-pauseplay a:hover  { opacity: 1; }
.flex-pauseplay a.flex-play:before { content: '\f003'; }

/* Control Nav */
.flex-control-nav {width: 100%; position: absolute; bottom: -40px; text-align: center;}
.flex-control-nav li {margin: 0 6px; display: inline-block; zoom: 1; *display: inline;}
.flex-control-paging li a {width: 11px; height: 11px; display: block; background: #666; background: rgba(0,0,0,0.5); cursor: pointer; text-indent: -9999px; -webkit-border-radius: 20px; -moz-border-radius: 20px; -o-border-radius: 20px; border-radius: 20px; -webkit-box-shadow: inset 0 0 3px rgba(0,0,0,0.3); -moz-box-shadow: inset 0 0 3px rgba(0,0,0,0.3); -o-box-shadow: inset 0 0 3px rgba(0,0,0,0.3); box-shadow: inset 0 0 3px rgba(0,0,0,0.3); }
.flex-control-paging li a:hover { background: #333; background: rgba(0,0,0,0.7); }
.flex-control-paging li a.flex-active { background: #000; background: rgba(0,0,0,0.9); cursor: default; }

.flex-control-thumbs {margin: 5px 0 0; position: static; overflow: hidden;}
.flex-control-thumbs li {width: 25%; float: left; margin: 0;}
.flex-control-thumbs img {width: 100%; display: block; opacity: .7; cursor: pointer;}
.flex-control-thumbs img:hover {opacity: 1;}
.flex-control-thumbs .flex-active {opacity: 1; cursor: default;}

@media screen and (max-width: 860px) {
  .flex-direction-nav .flex-prev { opacity: 1; left: 10px;}
  .flex-direction-nav .flex-next { opacity: 1; right: 10px;}
}
</style>
    
<!-- SLIDER HTML -->
      <div id="flex-isfb">
        <!-- Preloader -->
        <div id="preloader"></div>
        <style>
        /* Preloader */
        #preloader {
            position: absolute;
            top:0;
            left:0;
            right:0;
            bottom:0;
            background-color:#fff; /* change if the mask should have another color then white */
            z-index:999999999999; /* makes sure it stays on top */
        }
        
        </style>
        <div class="flexslider">
          <ul class="slides">
            <li>
                <a href="http://dimpost.com">
                <img src="http://project.dimpost.com/flexslider-basic/img/1.jpg" />
                </a>
            </li>
            <li>
                <a href="http://dimpost.com">
                <img src="http://project.dimpost.com/flexslider-basic/img/2.jpg" />
                </a>
            </li>
            <li>
                <a href="http://dimpost.com">
                <img src="http://project.dimpost.com/flexslider-basic/img/3.jpg" />
                </a>
            </li>
          </ul>
        </div>
      </div>

<!-- SLIDER JS -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://project.dimpost.com/flexslider-basic/js/jquery.flexslider-min.js"></script>
  <script type="text/javascript">
    $(window).load(function(){
      $('.flexslider').flexslider({
  animation: "slide",
  controlNav: true, 
  directionNav: true,
  easing: "swing",
  slideshowSpeed: 3000,        
     animationSpeed: 600, 
      });
    });
    //<![CDATA[
        $(window).load(function() { 
            $('#preloader').delay(350).fadeOut('slow'); 
        })
    //]]>
</script>

Jquery carousel slider. _____________________________________________________

<style type="text/css">
/*
* jQuery FlexSlider v2.0
* http://www.woothemes.com/flexslider/
*
* Copyright 2012 WooThemes
* Free to use under the GPLv2 license.
* http://www.gnu.org/licenses/gpl-2.0.html
*
* Contributing author: Tyler Smith (@mbmufffin)
*/
/* Browser Resets */
.flex-container a:active,
.flexslider a:active,
.flex-container a:focus,
.flexslider a:focus{
outline:none;
}
.slides,
.flex-control-nav,
.flex-direction-nav{
margin:0;
padding:0;
list-style:none;
}
/* FlexSlider Necessary Styles
*********************************/
.flexslider{
margin:0;
padding:0;
}
.flexslider .slides > li{
display:none;
-webkit-backface-visibility:hidden;
-moz-backface-visibility:hidden;
-ms-backface-visibility:hidden;
-o-backface-visibility:hidden;
backface-visibility:hidden;
}
/* Hide the slides before the JS is loaded. Avoids image jumping */
.flexslider .slides img{
width:100%;
display:block;
}
.flex-pauseplay span{
text-transform:capitalize;
}
/* Clearfix for the .slides element */
.flexslider a.intro {
bottom:0;
color:rgba(0, 0, 0, 0.1);
font-size:14px;
position:absolute;
right:0;
text-decoration:none;
z-index:99999;
}
.slides:after{
content:".";
display:block;
clear:both;
visibility:hidden;
line-height:0;
height:0;
}
html[xmlns] .slides{
display:block;
}
* html .slides{
height:1%;
}
/* No JavaScript Fallback */
/* If you are not using another script, such as Modernizr, make sure you
* include js that eliminates this class on page load */
.no-js .slides > li:first-child{
display:block;
}
/* FlexSlider Default Theme
*********************************/
.flexslider{
margin:0 0 60px;
background:#fff;
border:4px solid #fff;
position:relative;
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px;
-webkit-box-shadow:0 1px 4px rgba(0,0,0,.2);
-moz-box-shadow:0 1px 4px rgba(0,0,0,.2);
box-shadow:0 1px 4px rgba(0,0,0,.2);
zoom:1;
}
.flex-viewport{
max-height:2000px;
-webkit-transition:all 1s ease;
-moz-transition:all 1s ease;
-o-transition:all 1s ease;
transition:all 1s ease;
}
.loading .flex-viewport{
max-height:300px;
}
.flexslider .slides{
zoom:1;
}
.carousel li{
margin-right:5px;
}
/* Direction Nav */
.flexslider li {
border: 0 none !important;
padding: 0 !important;
text-indent: 0 !important;
}
.flex-direction-nav a{
width:30px;
height:30px;
margin:-20px 0 0;
display:block;
background:url(http://project.dimpost.com/flexslider-carousel/images/bg_direction_nav.png) no-repeat 0 0;
position:absolute;
top:50%;
cursor:pointer;
text-indent:-9999px;
opacity:0;
-webkit-transition:all .3s ease;
-moz-transition:all .3s ease;
-o-transition:all .3s ease;
transition:all .3s ease;
}
.flex-direction-nav .flex-next{
background-position:100% 0;
right:-36px;
}
.flex-direction-nav .flex-prev{
left:-36px;
}
.flexslider:hover .flex-next{
opacity:0.8;
right:5px;
}
.flexslider:hover .flex-prev{
opacity:0.8;
left:5px;
}
.flexslider:hover .flex-next:hover, .flexslider:hover .flex-prev:hover{
opacity:1;
}
.flex-direction-nav .disabled{
opacity:.3!important;
filter:alpha(opacity=30);
cursor:default;
}
/* Control Nav */
.flex-control-nav{
width:100%;
position:absolute;
bottom:-40px;
text-align:center;
}
.flex-control-nav li{
margin:0 6px;
display:inline-block;
zoom:1;
*display:inline;
}
.flex-control-paging li a{
width:11px;
height:11px;
display:block;
background:#666;
background:rgba(0,0,0,0.5);
cursor:pointer;
text-indent:-9999px;
-webkit-border-radius:20px;
-moz-border-radius:20px;
border-radius:20px;
-webkit-box-shadow:inset 0 0 3px rgba(0,0,0,0.3);
-moz-box-shadow:inset 0 0 3px rgba(0,0,0,0.3);
box-shadow:inset 0 0 3px rgba(0,0,0,0.3);
}
.flex-control-paging li a:hover{
background:#333;
background:rgba(0,0,0,0.7);
}
.flex-control-paging li a.flex-active{
background:#000;
background:rgba(0,0,0,0.9);
cursor:default;
}
.flex-control-thumbs{
margin:5px 0 0;
position:static;
overflow:hidden;
}
.flex-control-thumbs li{
width:25%;
float:left;
margin:0;
}
.flex-control-thumbs img{
width:100%;
display:block;
opacity:.7;
cursor:pointer;
}
.flex-control-thumbs img:hover{
opacity:1;
}
.flex-control-thumbs .active{
opacity:1;
cursor:default;
}
</style>
<script type="text/javascript" src="http://project.dimpost.com/flexslider-carousel/jquery.js"></script>
<script type="text/javascript" src="http://project.dimpost.com/flexslider-carousel/jquery.flexslider-min.js"></script>
<script type="text/javascript">
 $(document).ready(function(){   
$(window).load(function() {
  $('.flexslider').flexslider({
    animation: "slide",
    animationLoop: false,
    itemWidth: 210,
    itemMargin: 0,
    minItems: 1,
    maxItems: 4
  });
});
});
</script>
<div class="flexslider">
  <ul class="slides">
    <li>
      <img src="http://project.dimpost.com/flexslider-carousel/images/slide1.jpg" />
    </li>
    <li>
      <img src="http://project.dimpost.com/flexslider-carousel/images/slide2.jpg" />
    </li>
    <li>
      <img src="http://project.dimpost.com/flexslider-carousel/images/slide3.jpg" />
    </li>
    <li>
      <img src="http://project.dimpost.com/flexslider-carousel/images/slide4.jpg" />
    </li>
    <li>
      <img src="http://project.dimpost.com/flexslider-carousel/images/slide2.jpg" />
    </li>
    <li>
      <img src="http://project.dimpost.com/flexslider-carousel/images/slide1.jpg" />
    </li>
    <li>
      <img src="http://project.dimpost.com/flexslider-carousel/images/slide4.jpg" />
    </li>
    <li>
      <img src="http://project.dimpost.com/flexslider-carousel/images/slide3.jpg" />
    </li>
    <li>
      <img src="http://project.dimpost.com/flexslider-carousel/images/slide1.jpg" />
    </li>
    <li>
      <img src="http://project.dimpost.com/flexslider-carousel/images/slide4.jpg" />
    </li>
    <li>
      <img src="http://project.dimpost.com/flexslider-carousel/images/slide3.jpg" />
    </li>
    <li>
      <img src="http://project.dimpost.com/flexslider-carousel/images/slide2.jpg" />
    </li>
  </ul>
</div>

Kalau salah satu kode html atau script slideshow di atas sudah kalian copy, selanjutnya silahkan kalian pastekan kode html slideshow tsb ke dalam widget blog kalian, hasilnya silahkan kalian lihat sendiri ya?

Demikian share dari saya tentang 10 macam cara membuat slideshow blogger, semoga bermanfaat.

Article reference from : http://www.mycirebon.net/2014/09/cara-mudah-membuat-image-slider-di.html

10 cara membuat slideshow blogger tampa mengedit kode html

0 comments:

Products Overseas

Info Surakarta

Serba-Serbi

Kursus Facebook Ads

PPDB JAWA TENGAH 2022/2023

Kirimkan Pesan/ Pertanyaan Anda