Responsive KenBurner Slider With jQuery Plugin

Responsive KenBurner Slider jQuery Plugin is the premium way of using a slider in your website. A combination of Ken Burns Effect, state-of-the-art Slider, Text Animations and Responsive rebuilding defines this slider. Customize this slider with just a little HTML and CSS to your very needs. Give each slider some captions to transport your message. Use your Ken Burns Animated banner elements with the possibility of playing YouTube and Vimeo clips in a special detail view with describing text.

CSS::

.centerme{margin-left:auto;margin-right:auto;}
.bannercontainer{max-width:940px;height:330px;background-color:#111;position:relative;margin-top:20px;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;}
.bannercontainer ul >li{display:none;}
.bannershadow{margin-top:0px;margin-bottom:25px;max-width:930px;height:40px;position:relative;}
.video_kenburn_wrap    {height:100%;}
a:focus {outline:none;}
.clear{clear:both;}

/* The Selector Style */
.selector {max-width:500px;max-height:46px;margin-left:0;overflow:hidden;float:left;margin-right:auto;position:relative;z-index:2000;top:350px;}
.selector .seltext{margin-left:0;float:left;background:url(http://www.themepunch.com/codecanyon/kenburner-responsive/images/navigationtext.png);width:150px;height:50px;margin-right:5px;}
.selector .thumbbutton{float:right;font-family: arial, sans-serif;background:url(http://www.themepunch.com/codecanyon/kenburner-responsive/images/navig_btn.png);width:auto;height:18px;padding:9px;padding-left:10px;padding-right:10px;margin-top:10px;color:#777;text-shadow: 0px 1px 0px #000000;font-size:12px;font-weight:bold;border-radius:5px 0px 0px 5px; -moz-border-radius:5px 0px 0px 5px; -webkit-border-radius:5px 0px 0px 5px; cursor:pointer;}
.selector .thumbbutton .grain{background:url(http://www.themepunch.com/codecanyon/kenburner-responsive/images/grain.png);}
.selector .middle{border-radius: 0px 0px 0px 0px;-moz-border-radius: 0px 0px 0px 0px;-webkit-border-radius: 0px 0px 0px 0px; }
.selector .right{border-radius: 0px 5px 5px 0px; -moz-border-radius: 0px 5px 5px 0px; -webkit-border-radius: 0px 5px 5px 0px; }
.selector .seperator{height:35px;width:1px;background-color:#101010;float:right;margin-top:10px;}
.selector .thumbbutton:hover, .selector .selected{color:#fff;background:url(http://www.themepunch.com/codecanyon/kenburner-responsive/images/navig_btn.png);background-position:bottom;}

/* Dark Burn Setting */
.dark .kenburn-bg{background:#111 url(http://www.themepunch.com/codecanyon/kenburner-responsive/kb-plugin/assets/bg/black25.png) repeat;padding:4px;border:1px solid rgba(255,255,255,0.06);border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px;box-shadow:0 0 5px rgba(0,0,0,0.3);-moz-box-shadow:0 0 5px rgba(0,0,0,0.3);-webkit-box-shadow:0 0 5px rgba(0,0,0,0.3);opacity:0.5;}

/* Preloader Slider */
.kenburn-preloader{background:#000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTeCixFbHssxJUoTzYrO0W3wAhhnwK5O4EYvbLZslYaYVw6R5SZqsU_NN7-1K0_Wzll5caB8TPdn3WogxCYJQjNxBOrpvWxgVL7VbHW9YEcbrpvNyVPHgnl3usfQhkYh7ChmgeylC2q9I/s1600/loading1.gif) no-repeat 50% 50%;width:32px;height:32px;position:absolute;left:50%;top:40%;z-index:9999;border-radius:5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; padding:5px;margin-left: -14px;}

/* Caption Slider */
.kb-fullsize .cp-right, .kb-fullsize .cp-top, .kb-fullsize .cp-left, .kb-fullsize .cp-bottom,
.kb-smallsize .cp-right, .kb-smallsize .cp-top, .kb-smallsize .cp-left, .kb-smallsize .cp-bottom,
.kb-mediumsize .cp-right, .kb-mediumsize .cp-top, .kb-mediumsize .cp-left, .kb-mediumsize .cp-bottom{
color:#fff;background:url(http://www.themepunch.com/codecanyon/kenburner-responsive/kb-plugin/assets/bg/black65.png);
position:absolute;}
.kb-minisize .cp-right, .kb-minisize .cp-top, .kb-minisize .cp-left, .kb-minisize .cp-bottom{visibility:hidden;width:0px;height:0px;}

/* Widht 959 Sizing Pixel */
.kb-fullsize .cp-right    { padding:30px 40px 30px 40px;top:0px;right:0px;height:100%;}
.kb-fullsize .cp-left    { padding:30px 40px 30px 40px;top:0px;left:0px;height:100%;}
.kb-fullsize .cp-top    { padding:5px 40px 5px 40px;top:0px;left:0px;width:99%;}
.kb-fullsize .cp-bottom    { padding:5px 40px 5px 40px;bottom:0px;left:0px;width:99%;}
.kb-fullsize .cp-title{color:#eee;font-size:200%;font-family: 'Oswald', sans-serif;text-shadow: 0px -1px 1px #000;}
.kb-fullsize p{font-family: century gothic, sans-serif;font-size:12px;color:#888;line-height:20px;text-shadow: 0px -1px 1px #000;}

/* Video Settings */
.kb-fullsize .video_clip{width:60%;height:100%;top:0px;left:0px;}
.kb-fullsize .video_video{width:100%;height:100%;}
.kb-fullsize .video_details{width:34%;padding:30px 3% 30px 3%;top:0px;right:0px;position:absolute;}
.kb-fullsize .video_kenburn h2{color:#ddd;font-size:26px;font-family: 'Oswald', sans-serif;text-shadow:0px -1px 1px #000;margin: 0;line-height:1;}

/* Widht 767 Sizing Pixel */
.kb-mediumsize .cp-right    { padding:15px 15px 15px 15px; top:0px;right:0px; height:100%;}
.kb-mediumsize .cp-left    { padding:15px 15px 15px 15px; top:0px;left:0px;  height:100%;}
.kb-mediumsize .cp-top    { padding:0px 15px 0px 15px; top:0px;left:0px;width:99%;}
.kb-mediumsize .cp-bottom    { padding:0px 15px 0px 15px; bottom:0px;left:0px;width:99%;}
.kb-mediumsize .cp-title{color:#ddd;font-size:18px;font-family: 'Oswald', sans-serif;text-shadow: 0px 1px 0px #000;}
.kb-mediumsize p{font-family:century gothic, sans-serif;font-size:12px;color:#888;line-height:18px;text-shadow: 0px 1px 0px #000;}

/* Video Settings */
.kb-mediumsize .video_clip{width:60%;height:100%;top:0px;left:0px;}
.kb-mediumsize .video_video{width:100%;height:100%;}
.kb-mediumsize .video_details{    width:34%;padding:30px 3% 30px 3%;top:0px;right:0px;position:absolute;}
.kb-mediumsize .video_kenburn h2{color:#ddd;font-size:200%;font-family: 'Oswald', sans-serif;text-shadow: 0px 1px 0px #000;margin: 0;line-height:1;}

/* Widht 570 Sizing Pixel */
.kb-smallsize .cp-right        { padding:15px 15px 15px 15px; top:0px;right:0px; height:100%;}
.kb-smallsize .cp-left        { padding:15px 15px 15px 15px; top:0px;left:0px;  height:100%;}
.kb-smallsize .cp-top        { padding:15px 15px 15px 15px; top:0px;left:0px;width:99%;}
.kb-smallsize .cp-bottom    { padding:15px 15px 15px 15px; bottom:0px; left:0px;width:99%;}
.kb-smallsize .cp-title{color:#ddd;font-size:13px;font-family: 'Oswald', sans-serif;text-shadow: 0px 1px 0px #000;}
.kb-smallsize p{font-family:century gothic, sans-serif;font-size:11px;color:#888;line-height:16px;text-shadow: 0px 1px 0px #000;}

/* Video Settings */
.kb-smallsize .video_clip{width:60%;height:100%;top:0px;left:0px;}
.kb-smallsize .video_video{width:100%;height:100%;}
.kb-smallsize .video_details{width:34%;padding:30px 3% 30px 3%;top:0px;right:0px;position:absolute;}
.kb-smallsize .video_kenburn h2{color:#ddd;font-size:150%;font-family: 'Oswald', sans-serif;text-shadow: 0px 1px 0px #000;font-family: 'Oswald', sans-serif;margin: 0;line-height:1;}

/* Widht 300 Sizing Pixel */
.kb-minisize .video_clip{width:100%;height:100%;padding-right:0px;top:0px;left:0px;}

/* Video Settings */
.kb-minisize .video_clip{width:100%;height:100%;top:0px;left:0px;}
.kb-minisize .video_video{width:100%;}
.kb-minisize .video_details{visibility:hidden;}
.kb-minisize .video_kenburn h2{font-size:0px;margin: 0;line-height:0;}

/* All Video Settings */
.kenburn-video-overlay{background:rgba(79,20,0,0.2) url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZ6FNF0FSWXOrME99o4RGk0a8TJZZA5zjNoNOlSW6mU2wihvw2vTc_0TJQDNobb8nXkZoDP0VqmGyvsw5yUB8QI9bCnZU73HbWA_9jxql0TAPk9ltmcqwmqFg6KeJj4LDAPgewJ11srrA/s1600/overlay.png);opacity:0.25;filter: alpha(opacity=25);-webkit-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=25)";-moz-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=25)"-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=25)";width:100%;height:100%;position:relative;z-index:1000;}
.kenburn-video-button{background:url(http://www.themepunch.com/codecanyon/kenburner-responsive/kb-plugin/assets/player/play.png) no-repeat;width:100px;height:100px;position:absolute;z-index:1500;
opacity:0.85;filter: alpha(opacity=85);-moz-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=85)";-webkit-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=85)";-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=85)";cursor:pointer;}
.kenburn-video-button:hover {opacity:1.0;}

/* Video Background */
.dark .video_kenburn{position:absolute;top: 0; bottom: 0px;width: 100%;background: #111;font-family:century gothic, sans-serif;font-size:12px;line-height: 20px;color:#888;text-shadow: #fff 1px 1px 1px;}

/* Buttons Darks */
.dark .kb-button {font-family: 'Oswald', sans-serif;float:left;height:31px;line-height:30px;font-size:13px;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius:3px;}
.dark .kb-button:link, .dark .kb-button:visited {color: #fff;padding: 0 10px 0 10px;text-align:center;text-shadow: 0px -1px 1px #000;background: url('http://www.themepunch.com/codecanyon/kenburner-responsive/kb-plugin/assets/button/button_dark.png') repeat-x center top;text-decoration: none;}
.dark .kb-button:hover, .dark .comment-reply-link:hover {background-position:bottom;text-decoration: none;}

/* Video Buttons */   
.dark .video_kenburn .close{width:30px;height:30px;position:absolute;background:url(http://www.themepunch.com/codecanyon/kenburner-responsive/kb-plugin/assets/button/close_dark.png) no-repeat top;right:10px;top:10px;cursor:pointer;}
.dark .video_kenburn .close:hover{background-position:bottom;opacity:0.5;
filter: alpha(opacity=50);-moz-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";-webkit-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";cursor:pointer;}
.kenburn_thumb_container .video{width:30px;height:30px;background:url(http://www.themepunch.com/codecanyon/kenburner-responsive/kb-plugin/assets/player/play_small.png) no-repeat;margin-top:-15px;margin-left:-15px;cursor:pointer;}

/* Thumbnail Options */
.kenburn_thumb_container_bg {background:#111 url(http://www.themepunch.com/codecanyon/kenburner-responsive/kb-plugin/assets/bg/thumbs_bg.png);padding:1px;margin-top:-1px;margin-left:-1px;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;box-shadow: 0px 0px 8px 2pxrgba(0, 0, 0, 0.80);-moz-box-shadow:0px 0px 8px 2px rgba(0, 0, 0, 0.80);-webkit-box-shadow: 0px 0px 8px 2px rgba(0, 0, 0, 0.80);}
.dark .kenburn-thumbs .overlay{width:100%;height:100%;position:absolute;top:0px;left:0px;background:rgba(79,20,0,0.2) url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZ6FNF0FSWXOrME99o4RGk0a8TJZZA5zjNoNOlSW6mU2wihvw2vTc_0TJQDNobb8nXkZoDP0VqmGyvsw5yUB8QI9bCnZU73HbWA_9jxql0TAPk9ltmcqwmqFg6KeJj4LDAPgewJ11srrA/s1600/overlay.png) ;}

/* Thumb Buttons */
.thumbbuttons{background:url(http://www.themepunch.com/codecanyon/kenburner-responsive/kb-plugin/assets/button/navigdots_bgtile.png);height:35px;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;position:absolute;bottom:-33px;z-index:1000;box-shadow: 0px 0px 8px 2pxrgba(0, 0, 0, 0.80);-moz-box-shadow:0px 0px 8px 2px rgba(0, 0, 0, 0.80);-webkit-box-shadow: 0px 0px 8px 2px rgba(0, 0, 0, 0.80);}
.thumbbuttons .grainme{background: url(http://www.themepunch.com/codecanyon/kenburner-responsive/kb-plugin/assets/bg/grain.png);height:35px;width:100%;}
.thumbbuttons .leftarrow{background:url(http://www.themepunch.com/codecanyon/kenburner-responsive/kb-plugin/assets/button/arrowleft.png) no-Repeat bottom left;width:9px;height:16px;margin-left:9px;margin-right:9px;margin-top:9px;float:left;cursor:pointer;}
.thumbbuttons .rightarrow{background:url(http://www.themepunch.com/codecanyon/kenburner-responsive/kb-plugin/assets/button/arrowright.png) no-Repeat bottom left;width:9px;height:16px;margin-top:9px;margin-right:9px;margin-left:18px;float:left;cursor:pointer;}
.thumbbuttons .minithumb{background: url(http://www.themepunch.com/codecanyon/kenburner-responsive/kb-plugin/assets/button/navigdots.png) no-Repeat bottom left;width:15px;height:15px;margin-top:9px;margin-left:9px;float:left;cursor:pointer;}
.thumbbuttons .thumbs{float:left;}
.thumbbuttons .rightarrow:hover, .thumbbuttons .leftarrow:hover, .thumbbuttons .minithumb:hover, .thumbbuttons .thumbs .selected{background-position:top left;}

SCRIPT::

<!-- get jQuery from the google apis -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script>   
<!-- jQuery Slider  -->   
<script type="text/javascript" src="http://www.themepunch.com/codecanyon/kenburner-responsive/kb-plugin/js/jquery.themepunch.plugins.min.js"></script>

<script type="text/javascript" src="http://www.themepunch.com/codecanyon/kenburner-responsive/kb-plugin/js/jquery.themepunch.kenburn.min.js"></script>


<script type="text/javascript">
$(document).ready(function() {
$.noConflict();
jQuery('.bannercontainer').kenburn(
{
thumbWidth:50,
thumbHeight:50,
thumbAmount:4,
thumbStyle:"both",
thumbVideoIcon:"off",
thumbVertical:"bottom",
thumbHorizontal:"center",
thumbXOffset:0,
thumbYOffset:40,
bulletXOffset:0,
bulletYOffset:-16,
repairChromeBug:"on",
hideThumbs:"on",
touchenabled:'on',
pauseOnRollOverThumbs:'off',
pauseOnRollOverMain:'on',
preloadedSlides:2,
timer:7,
debug:"off",
googleFonts:'Oswald',
googleFontJS:'http://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js',
});

jQuery('.tthumb').click(function() {
jQuery('.tbull').removeClass('selected');
jQuery('.tauto').removeClass('selected');
jQuery('.tthumb').addClass('selected');
jQuery('.tnone').removeClass('selected');
jQuery('.kenburn_thumb_container').css({'visibility':'visible'});
jQuery('.thumbbuttons').css({'visibility':'hidden'});
jQuery('body').addClass('tp_showthumbsalways');
jQuery('.kenburn_thumb_container').animate({'opacity':1},{duration:300,queue:false});
});

jQuery('.tauto').click(function() {
jQuery('.tauto').addClass('selected');
jQuery('.tthumb').removeClass('selected');
jQuery('.tnone').removeClass('selected');
jQuery('.tbull').removeClass('selected');
jQuery('body').removeClass('tp_showthumbsalways');
jQuery('.kenburn_thumb_container').css({'visibility':'visible'});
jQuery('.thumbbuttons').css({'visibility':'hidden'});
setTimeout(function() {
jQuery('.kenburn_thumb_container').animate({'opacity':0},{duration:300,queue:false});
},100);
});

jQuery('.tbull').click(function() {
jQuery('.tbull').addClass('selected');
jQuery('.tauto').removeClass('selected');
jQuery('.tthumb').removeClass('selected');
jQuery('.tnone').removeClass('selected');
jQuery('.kenburn_thumb_container').css({'visibility':'hidden'});
jQuery('.thumbbuttons').css({'visibility':'visible'});
});

jQuery('body').addClass('tp_showthumbsalways');
jQuery('.tthumb').click();
});
</script>

HTML::

<div class="bannercontainer centerme dark">
<ul>
<!-- THE 1. SLIDE -->
<li data-transition="fade" data-startalign="right,bottom" data-zoom="in" data-zoomfact="3" data-endAlign="center,top" data-panduration="12" data-colortransition="4"><img alt="" src="http://www.themepunch.com/codecanyon/kenburner-responsive/images/slides/image1.jpg" data-bw="http://www.themepunch.com/codecanyon/kenburner-responsive/images/slides/image1_blur.jpg" data-thumb="http://www.themepunch.com/codecanyon/kenburner-responsive/images/thumbs/thumb1.jpg"/>
<div class="creative_layer">
<div class="cp-left faderight" >
<p class="cp-title">The Responsive Ken Burner</p>
<p>This is the product that you<br/><i><strong>all have been waiting for!</strong></i></p>                               
<p>A Ken Burns JQuery Banner solution which<br/>is fully-responsive and offering cutting-edge<br/>caption effects!</p>
<a style="margin-top:10px" class="kb-button" href="http://ut2a-4down.blogspot.com/">See Dark Example</a>
<div class="clear"></div>
</div>                                   
</div>
</li>

<!-- THE 2. SLIDE -->
<li data-transition="slide" data-startalign="right,top" data-zoom="out" data-zoomfact="1.5" data-endAlign="left,bottom" data-panduration="8" data-colortransition="4"><img alt="" src="http://www.themepunch.com/codecanyon/kenburner-responsive/images/slides/image2.jpg" data-bw="http://www.themepunch.com/codecanyon/kenburner-responsive/images/slides/image2_blur.jpg" data-thumb="http://www.themepunch.com/codecanyon/kenburner-responsive/images/thumbs/thumb2.jpg"/>                   
<div class="video_kenburner">
<div class="video_kenburn_wrap">   
<div class="video_video">
<iframe class="video_clip" src="http://player.vimeo.com/video/7809605?title=0&amp;byline=0&amp;portrait=0"></iframe>
</div>
<div class="video_details">
<p class="cp-title">Vimeo Video</p>
<p>This is the product that you<br/><i><strong>all have been waiting for!</strong></i></p>                               
<p>A Ken Burns JQuery Banner solution which<br/>is fully-responsive and offering cutting-edge<br/>caption effects!</p>
<a style="margin-top:10px" class="kb-button" href="http://ut2a-4down.blogspot.com/">See Dark Example</a>
<div class="clear"></div>
</div>
<div class="close"></div>
</div>
</div>
<div class="creative_layer ">
<div class="cp-right fade">
<p class="cp-title">The Responsive Ken Burner</p>
<p>This is the product that you<br/><i><strong>all have been waiting for!</strong></i></p>
<p>A Ken Burns JQuery Banner solution which<br/>is fully-responsive and offering cutting-edge<br/>caption effects!</p>
<a style="margin-top:10px" class="kb-button" href="http://ut2a-4down.blogspot.com/">See Dark Example</a>
<div class="clear"></div>
</div>
</div>
</li>

<!-- THE 3. SLIDE -->
<li data-transition="slide" data-startalign="left,bottom" data-zoom="in" data-zoomfact="3" data-endAlign="center,center" data-panduration="8" data-colortransition="4"><img alt="" src="http://www.themepunch.com/codecanyon/kenburner-responsive/images/slides/image3.jpg" data-bw="http://www.themepunch.com/codecanyon/kenburner-responsive/images/slides/image3_blur.jpg" data-thumb="http://www.themepunch.com/codecanyon/kenburner-responsive/images/thumbs/thumb3.jpg"/>
<div class="creative_layer ">
<div class="cp-bottom fadeup">
<p class="cp-title">The Responsive Ken Burner</p>
<p>This is the product that you<i><strong>all have been waiting for!</strong></i> A Ken Burns JQuery Banner solution which is fully-responsive and offering cutting-edge caption effects!</p>                                   
</div>                                   
</div>
</li>

<!-- THE 4. SLIDE -->
<li data-transition="fade" data-startalign="right,top" data-zoom="out" data-zoomfact="1.2" data-endAlign="left,bottom" data-panduration="11" data-colortransition="4"><img alt="" src="http://www.themepunch.com/codecanyon/kenburner-responsive/images/slides/image4.jpg" data-bw="http://www.themepunch.com/codecanyon/kenburner-responsive/images/slides/image4_blur.jpg" data-thumb="http://www.themepunch.com/codecanyon/kenburner-responsive/images/thumbs/thumb4.jpg"/>                       
<div class="creative_layer ">
<div class="cp-top fadedown" >
<p class="cp-title">The Responsive Ken Burner</p>
<p>This is the product that you<i><strong>all have been waiting for!</strong></i> A Ken Burns JQuery Banner solution which is fully-responsive and offering cutting-edge caption effects!</p>
</div>                                   
</div>
</li>

<!-- THE 5. SLIDE -->
<li data-transition="fade" data-startalign="center,top" data-zoom="in" data-zoomfact="1.6" data-endAlign="center,bottom" data-panduration="12" data-colortransition="4"><img alt="" src="http://www.themepunch.com/codecanyon/kenburner-responsive/images/slides/image5.jpg" data-bw="http://www.themepunch.com/codecanyon/kenburner-responsive/images/slides/image5_blur.jpg" data-thumb="http://www.themepunch.com/codecanyon/kenburner-responsive/images/thumbs/thumb5.jpg"/>
<div class="video_kenburner">
<div class="video_kenburn_wrap">   
<div class="video_video">
<iframe class="video_clip" src="http://www.youtube.com/embed/-BrDlrytgm8?hd=1&amp;wmode=opaque&amp;autohide=1&amp;showinfo=0"></iframe>
</div>
<div class="video_details">
<p class="cp-title">Youtube Video</p>
<p>This is the product that you<br/><i><strong>all have been waiting for!</strong></i></p>
<p>A Ken Burns JQuery Banner solution which<br/>is fully-responsive and offering cutting-edge<br/>caption effects!</p>
<a style="margin-top:10px" class="kb-button" href="http://ut2a-4down.blogspot.com/">See Dark Example</a>
<div class="clear"></div>
</div>
<div class="close"></div>
</div>
</div>
<div class="creative_layer ">
<div class="cp-left fade">
<p class="cp-title">The Responsive Ken Burner</p>
<p>This is the product that you<br/><i><strong>all have been waiting for!</strong></i></p>
<p>A Ken Burns JQuery Banner solution which<br/>is fully-responsive and offering cutting-edge<br/>caption effects!</p>
<a style="margin-top:10px" class="kb-button" href="http://ut2a-4down.blogspot.com/">See Dark Example</a>
<div class="clear"></div>
</div>
</div>
</li>
</ul>

<div class="selector">
<div class="thumbbutton middle tbull right"><div class="grain">Bullets</div></div>
<div class="seperator"></div>
<div class="thumbbutton middle tauto"><div class="grain">Auto Hide</div></div>
<div class="seperator"></div>
<div class="thumbbutton selected tthumb"><div class="grain">Thumbs</div></div>
<div class="seltext"></div>
</div>

</div>
<div class="bannershadow centerme"><img width="100%" height="40px" src="http://www.themepunch.com/codecanyon/kenburner-responsive/images/bannershadow.png"/></div>
<!-- End HTML Slider -->

Example Responsive KenBurner Slider With jQuery Plugin.!


Please rate this article: