Carousel Slider Powerful With jQuery Plugin

All in one banner rotator is powerful jQuery plugin that you can be configured to act as Banner Rotator, Thumbnails Banner, Banner with Playlist, Content Slider and Carousel. I have added it here even though it is much more than a jQuery image slider because it is awesome!

CSS::

/* the container */
.allinone_carousel {position:relative;}
.allinone_carousel img {max-width:none;max-height:none;}
.allinone_carousel_list {margin:0;padding:0;list-style:none;display:none;}
.allinone_carousel .contentHolder {position:relative;overflow:hidden;}
.mycanvas {position:absolute;top:8px;right:10px;z-index:1000;}
.myloader {background:url(http://www.responsivejqueryslider.com/skins/loader.gif);
width:37px;height:37px;position:absolute;left:49%;top:49%;z-index:999;}

/* Sweet SKIN */
.allinone_carousel.sweet .contentHolderUnit {position:absolute;
/*float:left;display:block;*/
width:520px;height:385px;overflow:hidden;cursor: pointer;
/*border:1px #F00 solid;*/
background:url(http://www.responsivejqueryslider.com/skins/sweet/empty.gif) repeat;}
.allinone_carousel.sweet .elementTitle {position:absolute;left:0;top:15px;width:100%;text-align:center;font: bold 22px/30px 'Droid Sans', Verdana, Helvetica, sans-serif;color:#FFFFFF;text-transform:capitalize;}
.allinone_carousel.sweet .playOver {position:absolute;width:100px;height:70px;background:url(http://www.responsivejqueryslider.com/skins/sweet/play_overON.png) 0 0 no-repeat;display:none;z-index:200;cursor: pointer;}
.allinone_carousel.sweet .playOver:hover {background:url(http://www.responsivejqueryslider.com/skins/sweet/play_overOFF.png) 0 0 no-repeat;display:none;z-index:200;cursor: pointer;}
.allinone_carousel.sweet .bannerControls {position:absolute;left:0;top:0;z-index:101;width:100%;}
.allinone_carousel.sweet .leftNav {position:absolute;left:-5px;width:110px;height:157px;background:url(http://www.responsivejqueryslider.com/skins/sweet/leftNavOFF.png) 0 0 no-repeat;cursor: pointer;}
.allinone_carousel.sweet .leftNav:hover {background:url(http://www.responsivejqueryslider.com/skins/sweet/leftNavON.png) 0 0 no-repeat;}
.allinone_carousel.sweet .rightNav {position:absolute;right:-5px;width:110px;height:157px;background:url(http://www.responsivejqueryslider.com/skins/sweet/rightNavOFF.png) 0 0 no-repeat;cursor: pointer;}
.allinone_carousel.sweet .rightNav:hover {background:url(http://www.responsivejqueryslider.com/skins/sweet/rightNavON.png) 0 0 no-repeat;}
.allinone_carousel.sweet .bottomNav {position:absolute;height:35px;width:0;padding-left:9px;z-index:140;}
.allinone_carousel.sweet .bottomNavButtonOFF {float:left;display:block;width:19px;height:19px;background:url(http://www.responsivejqueryslider.com/skins/sweet/bottomNavOFF.png) 0 0 no-repeat;padding-left:9px;cursor: pointer;}
.allinone_carousel.sweet .bottomNavButtonON {float:left;display:block;width:19px;height:19px;padding-left:9px;background:url(http://www.responsivejqueryslider.com/skins/sweet/bottomNavON.png) 0 0 no-repeat;cursor: pointer;}
.allinone_carousel.sweet .bottomNavLeft {position:absolute;width:63px;height:35px;bottom:-10px;z-index:140;}
.allinone_carousel.sweet .bottomNavRight {position:absolute;width:63px;height:35px;bottom:-10px;z-index:140;}
.allinone_carousel.sweet .bottomOverThumb {position:absolute;width:88px;height:106px;background:url(http://www.responsivejqueryslider.com/skins/charming/bottomOverThumbBg.png) 23px bottom no-repeat;bottom:27px;margin-left:-25px;}
.allinone_carousel.sweet .bottomOverThumb img {border:4px solid #111;}

.hideElement {display:none;}

SCRIPT::

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

<script src="http://ut2a-4down-blogspot-com.googlecode.com/files/jquery-ui-1.8.16.custom.min.js" type="text/javascript"></script>
<script src="http://www.responsivejqueryslider.com/js/allinone_carousel.js" type="text/javascript"></script>

<!-- Active Script Slider -->
<script type='text/javascript'>
jQuery(function() {
jQuery('#allinone_carousel_sweet').allinone_carousel({
skin: 'sweet',
width: 990,
height: 454,
autoPlay: 4,
resizeImages:true,
autoHideBottomNav:false,
easing:'easeOutBounce',
numberOfVisibleItems:5,
elementsHorizontalSpacing:110,
elementsVerticalSpacing:20,
verticalAdjustment:0,
animationTime:0.5,
circleColor:'#00b7ea',
behindCircleColor:'#000000',
circleLeftPositionCorrection:50,
circleTopPositionCorrection:20,
nextPrevMarginTop:25,
playMovieMarginTop:-15,
bottomNavMarginBottom:-25
});
});
</script>

HTML::

<!-- HTML Content Slider -->
<div style="background:url(http://www.responsivejqueryslider.com/preview_images/sweetBg.jpg) top center no-repeat;width:990px;height:530px;margin:15px auto 0 auto;"  id="box-div-contentSlider">

<div id="conslidebox" style="width:990px;margin: 0 auto;padding:10px 0 0 0;">

<div style="width:990px;height:460px;margin:15px auto 0 auto;">

<div id="allinone_carousel_sweet">
<div class="myloader"></div>
<!-- CONTENT -->
<ul class="allinone_carousel_list">
<li data-title="Nunc fringilla sapien id arcu mattis pulvinar" data-bottom-thumb="http://www.responsivejqueryslider.com/images/sweet/thumbs/01_sweet.jpg" data-video="true"><img src="http://www.responsivejqueryslider.com/images/sweet/05_sweet.png" alt="" /><iframe width="450" height="300" src="http://www.youtube.com/embed/ovOgvGH0HTk" frameborder="0" allowfullscreen=""></iframe></li>

<li data-title="Lorem ipsum dolor sit amet, consectetur adipiscing elit" data-bottom-thumb="http://www.responsivejqueryslider.com/images/sweet/thumbs/01_sweet.jpg"><img src="http://www.responsivejqueryslider.com/images/sweet/01_sweet.png" alt="" /></li>

<li data-title="Curabitur at enim a sem posuere consequat vel in lectus" data-bottom-thumb="http://www.responsivejqueryslider.com/images/sweet/thumbs/02_sweet.jpg" data-video="true"><img src="http://www.responsivejqueryslider.com/images/sweet/02_sweet.png" alt="" /><iframe width="520" height="360" src="http://www.youtube.com/embed/2muxrT5_a6E" frameborder="0" allowfullscreen=""></iframe></li>

<li data-link="http://codecanyon.net/user/LambertGroup" data-target="_blank" data-title="Donec sagittis nisi nec ante molestie lobortis" data-bottom-thumb="http://www.responsivejqueryslider.com/images/sweet/thumbs/03_sweet.jpg"><img src="http://www.responsivejqueryslider.com/images/sweet/03_sweet.png" alt="" /></li>

<li data-title="Cras pellentesque fermentum pellentesque" data-bottom-thumb="http://www.responsivejqueryslider.com/images/sweet/thumbs/04_sweet.jpg"><img src="http://www.responsivejqueryslider.com/images/sweet/04_sweet.png" alt="" /></li>

<li data-title="Nunc fringilla sapien id arcu mattis pulvinar" data-bottom-thumb="http://www.responsivejqueryslider.com/images/sweet/thumbs/05_sweet.jpg" data-video="true"><img src="http://www.responsivejqueryslider.com/images/sweet/05_sweet.png" alt="" /><iframe width="520" height="360" src="http://www.youtube.com/embed/zXwEP-jCotc" frameborder="0" allowfullscreen=""></iframe></li>

<li data-title="Sed imperdiet condimentum est, at cursus mauris lobortis eget" data-bottom-thumb="http://www.responsivejqueryslider.com/images/sweet/thumbs/06_sweet.jpg"><img src="http://www.responsivejqueryslider.com/images/sweet/06_sweet.png" alt="" /></li>

<li data-title="Quisque vestibulum congue massa" data-bottom-thumb="http://www.responsivejqueryslider.com/images/sweet/thumbs/07_sweet.jpg"><img src="http://www.responsivejqueryslider.com/images/sweet/07_sweet.png" alt="" /></li>

<li data-title="Mauris vel odio mi, eget euismod sem" data-bottom-thumb="http://www.responsivejqueryslider.com/images/sweet/thumbs/08_sweet.jpg"><img src="http://www.responsivejqueryslider.com/images/sweet/08_sweet.png" alt="" /></li>

<li data-title="Suspendisse ultrices sollicitudin venenatis" data-bottom-thumb="http://www.responsivejqueryslider.com/images/sweet/thumbs/09_sweet.jpg"><img src="http://www.responsivejqueryslider.com/images/sweet/09_sweet.png" alt="" /></li>

<li data-title="Aenean venenatis porta turpis, in tempor lorem ornare" data-bottom-thumb="http://www.responsivejqueryslider.com/images/sweet/thumbs/10_sweet.jpg"><img src="http://www.responsivejqueryslider.com/images/sweet/10_sweet.png" alt="" /></li>
</ul>

</div>

</div>

</div>

</div>
<!--end Content Slider-->

Example  Carousel Slider Powerful With jQuery Plugin!


by CodeCanyon (Premium Plugin).

Please rate this article: