This is a jQuery banner rotator plugin featuring multiple transitions. The thumbnails and buttons allow for easy navigation of your banners/ads. The banner rotator is also re-sizable and configurable through the plugin’s parameters.

CSS::

.wt-rotator{
font-family:Arial,Helvetica,sans-serif;
font-size:12px;
background-color:#000;
border:1px solid #000;
position:relative;
width:825px;
height:300px;
overflow:hidden;
}
.wt-rotator a{
outline:none;
}
.wt-rotator .screen{background:#000;
position:relative;opacity:.9;
top:0;left:0;
width:825px;height:300px;
overflow:hidden;-webkit-transition:all .3s ease-out; -moz-transition:all .3s ease-out; transition:all .3s ease-out;}

.wt-rotator .screen:hover{opacity:1;}

.wt-rotator .strip{
display:block;
position:absolute;
top:0;
left:0;
z-index:0;
overflow:hidden;
}
.wt-rotator .content-box{
display:none;
position:absolute;
top:0;
left:0;
overflow:hidden;
}
.wt-rotator .main-img{
display:none;
position:absolute;
top:0;
left:0;
z-index:0;
border:0;
}
.wt-rotator .preloader{
position:absolute;
top:50%;
left:50%;
width:40px;
height:40px;
margin-top:-20px;
margin-left:-20px;
-moz-border-radius:4px;
-webkit-border-radius:4px;
border-radius:4px;
background:#000 url(http://2.s3.envato.com/files/18277954/assets/loader.gif) center no-repeat;
background:rgba(0,0,0,.7) url(http://2.s3.envato.com/files/18277954/assets/loader.gif) center no-repeat;
z-index:4;
display:none;
}
.wt-rotator .timer{
position:absolute;
left:0;
height:4px;
background-color:#00D8C6;
-moz-opacity:.6;
filter:alpha(opacity=60);
opacity:0.6;
z-index:4;
visibility:hidden;
font-size:0;
}
.wt-rotator .desc{
position:absolute;
color:#FFF;
z-index:6;
overflow:hidden;
visibility:hidden;
text-align:left;
}
.wt-rotator .inner-bg{
position:relative;
top:0;
left:0;
width:100%;
height:100%;
background-color:#000;
-moz-opacity:.7;
filter:alpha(opacity=70);
opacity:.7;
z-index:0;
}
.wt-rotator .inner-text{
position:absolute;
top:0;
left:0;
padding:10px;
width:auto;
height:auto;
z-index:1;
}
.wt-rotator .c-panel{
position:absolute;
top:0;
z-index:7;
visibility:hidden;
}
.wt-rotator .outer-hp,
.wt-rotator .outer-vp{
position:absolute;
background:#333;
background:-moz-linear-gradient(#444, #111);
background:-webkit-gradient(linear, 0 top, 0 bottom, from(#444), to(#111));
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#444444', endColorstr='#111111',GradientType=0);
border:1px solid #000;
}
.wt-rotator .outer-hp{
left:0;
width:100%;
border-left:none;
border-right:none;
}
.wt-rotator .outer-vp{
top:0;
height:100%;
border-top:none;
border-bottom:none;
}
.wt-rotator .back-scroll,
.wt-rotator .fwd-scroll{
position:absolute;
top:0;
left:0;
z-index:10;
background:url(http://2.s3.envato.com/files/18277954/assets/spacer.png) no-repeat;
}
.wt-rotator .thumbnails,
.wt-rotator .buttons{
display:inline;
position:relative;
float:left;
overflow:hidden;
}
.wt-rotator .thumbnails ul{
position:relative;
list-style:none;
margin:0;
padding:0;
}
.wt-rotator .thumbnails ul.inside{
position:absolute;
top:0;
left:0;
}
.wt-rotator .thumbnails li,
.wt-rotator .play-btn,
.wt-rotator .prev-btn,
.wt-rotator .next-btn{
position:relative;
list-style:none;
display:inline;
float:left;
overflow:hidden;
width:24px;
height:24px;
line-height:24px;
text-align:center;
color:#EEE;
text-shadow: 0 1px 0 #222;
background-color:#000;
background:-moz-linear-gradient(#333, #000);
background:-webkit-gradient(linear, 0 top, 0 bottom, from(#333), to(#000));
border:1px solid #111;
cursor:pointer;
font-size:12px;
font-weight:bold;
background-repeat:no-repeat !important;
background-position:center !important;
-moz-border-radius:3px;
-webkit-border-radius:3px;
border-radius:3px;
}
.wt-rotator .thumbnails li:hover{
color:#FFF;
text-shadow: 0 1px 0 #888;
background-color:#CCC;
background:-moz-linear-gradient(#CCC, #999);
background:-webkit-gradient(linear, 0 top, 0 bottom, from(#CCC), to(#999));
}
.wt-rotator .thumbnails li.curr-thumb{
color:#000;
text-shadow: 0 1px 0 #fff;
background-color:#FFF;
background:-moz-linear-gradient(#FFF, #E0E0E0);
background:-webkit-gradient(linear, 0 top, 0 bottom, from(#FFF), to(#E0E0E0));
cursor:default;
}
.wt-rotator .thumbnails li.image{
background:#000;border:1px solid #111;
-moz-border-radius:100%;
-webkit-border-radius:100%;
border-radius:100%;
}
.wt-rotator .thumbnails li.image.curr-thumb,
.wt-rotator .thumbnails li.image:hover{
border:1px solid #fff;
}
.wt-rotator .thumbnails li.image a{
display:block;
border:0;
}
.wt-rotator .thumbnails li.image img{
display:block;
border:0;
position:absolute;
-moz-opacity:1;-webkit-opacity:1;
filter:alpha(opacity=100);
opacity:1;
-webkit-transition:all .3s ease-out; -moz-transition:all .3s ease-out; transition:all .3s ease-out;
}
.wt-rotator .thumbnails li.image:hover img{
-moz-opacity:1;-webkit-opacity:1;
filter:alpha(opacity=100);
opacity:1;

}
.wt-rotator .thumbnails li.image.curr-thumb img{
-moz-opacity:50;-webkit-opacity:50;
filter:alpha(opacity=50);
opacity:0.50;
cursor:default;
}
.wt-rotator .thumbnails li *{
display:none;
}
.wt-rotator .thumbnails li div{
position:relative;
color:#FFF;
background-color:#000;
width:auto;
height:auto;
}
.wt-rotator .play-btn{
background:#000 url(http://2.s3.envato.com/files/18277954/assets/play.png);
background:url(http://2.s3.envato.com/files/18277954/assets/play.png), -moz-linear-gradient(#333, #000);
background:url(http://2.s3.envato.com/files/18277954/assets/play.png), -webkit-gradient(linear, 0 top, 0 bottom, from(#333), to(#000));
}
.wt-rotator .play-btn:hover{
background-color:#CCC !important;
background:url(http://2.s3.envato.com/files/18277954/assets/play.png), -moz-linear-gradient(#CCC, #999);
background:url(http://2.s3.envato.com/files/18277954/assets/play.png), -webkit-gradient(linear, 0 top, 0 bottom, from(#CCC), to(#999));
}
.wt-rotator .pause{
background:#000 url(http://2.s3.envato.com/files/18277954/assets/pause.png);
background:url(http://2.s3.envato.com/files/18277954/assets/pause.png), -moz-linear-gradient(#333, #000);
background:url(http://2.s3.envato.com/files/18277954/assets/pause.png), -webkit-gradient(linear, 0 top, 0 bottom, from(#333), to(#000));
}
.wt-rotator .pause:hover{
background-color:#CCC !important;
background:url(http://2.s3.envato.com/files/18277954/assets/pause.png), -moz-linear-gradient(#CCC, #999);
background:url(http://2.s3.envato.com/files/18277954/assets/pause.png), -webkit-gradient(linear, 0 top, 0 bottom, from(#CCC), to(#999));
}
.wt-rotator .prev-btn{
background:#000 url(http://2.s3.envato.com/files/18277954/assets/prev.png);
background:url(http://2.s3.envato.com/files/18277954/assets/prev.png), -moz-linear-gradient(#333, #000);
background:url(http://2.s3.envato.com/files/18277954/assets/prev.png), -webkit-gradient(linear, 0 top, 0 bottom, from(#333), to(#000));
}
.wt-rotator .prev-btn:hover{
background-color:#CCC !important;
background:url(http://2.s3.envato.com/files/18277954/assets/prev.png), -moz-linear-gradient(#CCC, #999);
background:url(http://2.s3.envato.com/files/18277954/assets/prev.png), -webkit-gradient(linear, 0 top, 0 bottom, from(#CCC), to(#999));
}
.wt-rotator .next-btn{
background:#000 url(http://2.s3.envato.com/files/18277954/assets/next.png);
background:url(http://2.s3.envato.com/files/18277954/assets/next.png), -moz-linear-gradient(#333, #000);
background:url(http://2.s3.envato.com/files/18277954/assets/next.png), -webkit-gradient(linear, 0 top, 0 bottom, from(#333), to(#000));
}
.wt-rotator .next-btn:hover{
background-color:#CCC !important;
background:url(http://2.s3.envato.com/files/18277954/assets/next.png), -moz-linear-gradient(#CCC, #999);
background:url(http://2.s3.envato.com/files/18277954/assets/next.png), -webkit-gradient(linear, 0 top, 0 bottom, from(#CCC), to(#999));
}
.wt-rotator .up{
background:#000 url(http://2.s3.envato.com/files/18277954/assets/up.png);
background:url(http://2.s3.envato.com/files/18277954/assets/up.png), -moz-linear-gradient(#333, #000);
background:url(http://2.s3.envato.com/files/18277954/assets/up.png), -webkit-gradient(linear, 0 top, 0 bottom, from(#333), to(#000));
}
.wt-rotator .up:hover{
background-color:#CCC !important;
background:url(http://2.s3.envato.com/files/18277954/assets/up.png), -moz-linear-gradient(#CCC, #999);
background:url(http://2.s3.envato.com/files/18277954/assets/up.png), -webkit-gradient(linear, 0 top, 0 bottom, from(#CCC), to(#999));
}
.wt-rotator .down{
background:#000 url(http://2.s3.envato.com/files/18277954/assets/down.png);
background:url(http://2.s3.envato.com/files/18277954/assets/down.png), -moz-linear-gradient(#333, #000);
background:url(http://2.s3.envato.com/files/18277954/assets/down.png), -webkit-gradient(linear, 0 top, 0 bottom, from(#333), to(#000));
}
.wt-rotator .down:hover{
background-color:#CCC !important;
background:url(http://2.s3.envato.com/files/18277954/assets/down.png), -moz-linear-gradient(#CCC, #999);
background:url(http://2.s3.envato.com/files/18277954/assets/down.png), -webkit-gradient(linear, 0 top, 0 bottom, from(#CCC), to(#999));
}
#rotator-tooltip{
position:absolute;
top:0;
left:0;
z-index:99999;
display:none;
}
#rotator-tooltip.txt-up{
margin-left:-10px;
margin-bottom:5px;
background:url(http://2.s3.envato.com/files/18277954/assets/vtip.png) no-repeat;
background-position:10px bottom;
background-position-x:10px;
background-position-y:bottom;
}
#rotator-tooltip.txt-down{
margin-left:-10px;
margin-top:24px;
background:url(http://2.s3.envato.com/files/18277954/assets/vtip.png) no-repeat;
background-position:10px top;
background-position-x:10px;
background-position-y:top;
}
#rotator-tooltip.img-up{
background:url(http://2.s3.envato.com/files/18277954/assets/vtip.png) center bottom no-repeat;
}
#rotator-tooltip.img-down{
background:url(http://2.s3.envato.com/files/18277954/assets/vtip.png) center top no-repeat;
}
#rotator-tooltip.img-right{
background:url(http://2.s3.envato.com/files/18277954/assets/htip.png) left center no-repeat;
}
#rotator-tooltip.img-left{
background:url(http://2.s3.envato.com/files/18277954/assets/htip.png) right center no-repeat;
}
#rotator-tooltip .tt-txt{
font-family:Arial,Helvetica,sans-serif;
font-size:12px;
color:#FFF;
background-color:#000;
max-width:300px;
padding:5px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
border-radius:3px;
margin:8px 0;
}
#rotator-tooltip img{
display:none;
background-color:#000;
padding:3px;
margin:8px;
-moz-border-radius:2px;
-webkit-border-radius:2px;
border-radius:2px;
}
.wt-rotator .s-prev,
.wt-rotator .s-next{
position:absolute;
top:50%;
margin-top:-25px;
width:40px;
height:50px;
cursor:pointer;
background:url(http://2.s3.envato.com/files/18277954/assets/large_buttons.png) no-repeat;
-moz-opacity:.8;
filter:alpha(opacity=80);
opacity:.8;
z-index:8;
}
.wt-rotator .s-prev{
left:0;
background-position:0 center;
}
.wt-rotator .s-next{
left:100%;
margin-left:-40px;
background-position:-40px center;
}
.wt-rotator .s-prev:hover,
.wt-rotator .s-next:hover{
-moz-opacity:.95;
filter:alpha(opacity=95);
opacity:.95;
background-color:transparent !important;
}
.wt-rotator .block,
.wt-rotator .vpiece,
.wt-rotator .hpiece{
position:absolute;
z-index:2;
}

.panel{
position:relative;
margin:20px auto;
background-color:#222;
width:825px;
min-height:100%;
padding:10px 20px;
text-align:left;border:1px solid #fff;
box-shadow:0px 0px 3px #111;-moz-box-shadow:0px 0px 3px #111;-webkit-box-shadow:0px 0px 3px #111;
}

SCRIPT::

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

<script type="text/javascript" src="http://2.s3.envato.com/files/18277954/js/jquery.easing.1.3.min.js"></script>
<script type="text/javascript" src="http://2.s3.envato.com/files/18277954/js/jquery.wt-rotator.min.js"></script>

<script type="text/javascript">
$(document).ready(   
function() {
var $panel = $(".panel");
var $container = $panel.find(".container");
var $infoSec = $panel.find(".info-section");
$container.wtRotator({
width:825,
height:300,
thumb_width:44,
thumb_height:44,
button_width:24,
button_height:24,
button_margin:5,
easing:"easeInOutBounce",
auto_start:true,
delay:5000,
transition:"random",
transition_speed:700,
block_size:75,
vert_size:55,
horz_size:50,
cpanel_align:"BR",
timer_align:"top",
display_thumbs:true,
display_dbuttons:true,
display_playbutton:true,
display_thumbimg:true,           
display_side_buttons:false,
tooltip_type:"image",
display_numbers:false,
display_timer:true,
mouseover_select:true,
mouseover_pause:false,
cpanel_mouseover:true,
text_mouseover:false,
text_effect:"fade",
text_sync:true,
shuffle:true,
block_delay:25,
vstripe_delay:73,
hstripe_delay:183
});});
</script>

HTML::

<div class="panel">
<div class="container">
<div class="wt-rotator">
<div class="screen"></div>
<div class="c-panel">
<div class="thumbnails">
<ul>
<li>
<a href="http://2.s3.envato.com/files/18277954/images/temple.jpg" title="temple"><img src="http://2.s3.envato.com/files/18277954/images/thumbs/temple.jpg"/></a>
<a href="http://ut2a-4down.blogspot.com/" target="_blank"></a>                       
<div style="left:5px; top:94px; width:336px; height:0;">
<h1>JQuery Banner Rotator</h1>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Ut tincidunt mi a lectus gravida pulvinar. Aliquam viverra cursus felis,
lobortis elementum tortor malesuada non.
Suspendisse hendrerit tortor a mauris auctor eu sodales metus laoreet. </div>
</li>

<li><a href="http://2.s3.envato.com/files/18277954/images/main_ghat.jpg" title="main ghat"><img src="http://2.s3.envato.com/files/18277954/images/thumbs/main_ghat.jpg"/></a>
<a href="http://ut2a-4down.blogspot.com/" target="_blank"></a>
<div style="left:5px; top:36px; width:336px; height:0; color:#000; background-color:#FFF">
<h1 style="color:#0CF">JQuery Banner Rotator</h1>
Lorem ipsum ad vis puto molestie, ex est simul docendi, ei ius decore patrioque complectitur.
Per te dolor necessitatibus. Duo quis modo in, reque sonet an pri. In lorem fugit impedit eum, pro docendi rationibus reformidans et.
Cum ei ludus feugait luptatum.</div>                                                     
</li>

<li>
<a href="http://2.s3.envato.com/files/18277954/images/triworks_abstract26.jpg" title="3D abstract art"><img src="http://2.s3.envato.com/files/18277954/images/thumbs/triworks_abstract26.jpg"/></a>  
<a href="http://ut2a-4down.blogspot.com/" target="_blank"></a>
<div style="left:5px; top:36px; width:336px; height:0; color:#000; background-color:#FFF">
<h1 style="color:#0CF">JQuery Banner Rotator</h1>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Ut tincidunt mi a lectus gravida pulvinar. Aliquam viverra cursus felis,
lobortis elementum tortor malesuada non.
Suspendisse hendrerit tortor a mauris auctor eu sodales metus laoreet. </div>                                                                                
</li>

<li>
<a href="http://2.s3.envato.com/files/18277954/images/singapore.jpg" title="singapore"><img src="http://2.s3.envato.com/files/18277954/images/thumbs/singapore.jpg"/></a>                 
<a href="http://ut2a-4down.blogspot.com/" target="_blank"></a>
<div style="left:484px; top:36px; width:336px; height:0;">
<h1>JQuery Banner Rotator</h1>
Lorem ipsum ad vis puto molestie, ex est simul docendi, ei ius decore patrioque complectitur.
Per te dolor necessitatibus. Duo quis modo in, reque sonet an pri. In lorem fugit impedit eum, pro docendi rationibus reformidans et.
Cum ei ludus feugait luptatum.</div>                                                                                                                    
</li>

<li>
<a href="http://2.s3.envato.com/files/18277954/images/flowers.jpg" title="flowers"><img src="http://2.s3.envato.com/files/18277954/images/thumbs/flowers.jpg"/></a>       
<a href="http://ut2a-4down.blogspot.com/" target="_blank"></a>
<div style="left:5px; top:94px; width:336px; height:0;">
<h1>JQuery Banner Rotator</h1>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Ut tincidunt mi a lectus gravida pulvinar. Aliquam viverra cursus felis,
lobortis elementum tortor malesuada non.
Suspendisse hendrerit tortor a mauris auctor eu sodales metus laoreet. </div>                                                                    
</li>

<li>
<a href="http://2.s3.envato.com/files/18277954/images/koala.jpg" title="koala bear"><img src="http://2.s3.envato.com/files/18277954/images/thumbs/koala.jpg"/></a>                   
<a href="http://ut2a-4down.blogspot.com/" target="_blank"></a>
<div style="left:5px; top:36px; width:350px; height:0;">
<h1>JQuery Banner Rotator</h1>
Lorem ipsum ad vis puto molestie, ex est simul docendi, ei ius decore patrioque complectitur.
Per te dolor necessitatibus. Duo quis modo in, reque sonet an pri. In lorem fugit impedit eum, pro docendi rationibus reformidans et.
Cum ei ludus feugait luptatum.</div>    
</li>

<li>
<a href="http://2.s3.envato.com/files/18277954/images/hk.jpg" title="hong kong"><img src="http://2.s3.envato.com/files/18277954/images/thumbs/hk.jpg"/></a>                   
<a href="http://ut2a-4down.blogspot.com/" target="_blank"></a>
<div style="left:5px; top:36px; width:350px; height:0;">
<h1>JQuery Banner Rotator</h1>
Lorem ipsum ad vis puto molestie, ex est simul docendi, ei ius decore patrioque complectitur.
Per te dolor necessitatibus. Duo quis modo in, reque sonet an pri. In lorem fugit impedit eum, pro docendi rationibus reformidans et.
Cum ei ludus feugait luptatum.</div>                                                           
</li>

<li>
<a href="http://2.s3.envato.com/files/18277954/images/china.jpg" title="china"><img src="http://2.s3.envato.com/files/18277954/images/thumbs/china.jpg"/></a>                   
<a href="http://ut2a-4down.blogspot.com/" target="_blank"></a>
<div style="left:484px; top:36px; width:336px; height:0; color:#000; background-color:#FFF">
<h1 style="color:#0CF">JQuery Banner Rotator</h1>
Lorem ipsum ad vis puto molestie, ex est simul docendi, ei ius decore patrioque complectitur.
Per te dolor necessitatibus. Duo quis modo in, reque sonet an pri. In lorem fugit impedit eum, pro docendi rationibus reformidans et.
Cum ei ludus feugait luptatum.</div>                                                         
</li>

<li>
<a href="http://2.s3.envato.com/files/18277954/images/lion.jpg" title="lion"><img src="http://2.s3.envato.com/files/18277954/images/thumbs/lion.jpg"/></a>                   
<a href="http://ut2a-4down.blogspot.com/" target="_blank"></a>
<div style="left:5px; top:94px; width:336px; height:0;">
<h1>JQuery Banner Rotator</h1>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Ut tincidunt mi a lectus gravida pulvinar. Aliquam viverra cursus felis,
lobortis elementum tortor malesuada non.
Suspendisse hendrerit tortor a mauris auctor eu sodales metus laoreet. </div>                                                            
</li>
</ul>
</div> 

<div class="buttons">
<div class="prev-btn"></div>
<div class="play-btn"></div>   
<div class="next-btn"></div>              
</div>

</div>
</div>
</div>
</div>
<div style='clear:both;'></div>

Example Slideshow With jQuery Banner Rotator Plugin.!


This is a jQuery banner rotator plugin featuring multiple transitions. The thumbnails and buttons allow for easy navigation of your banners. The banner rotator is also re-sizable and configurable through the plugin's parameters and stylesheet.

Please rate this article: