Beranda jQuery Slider Plugin

Carousel Slider Powerful With jQuery Plugin

02.07
A+ A- Print Email

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).

,