Beranda jQuery Slider Plugin

Showbiz Business Carousel With jQuery Plugin

04.01
A+ A- Print Email

This is a highly customizable plugin to show you or your customer’s services, portfolio items, blog contents. Basically all business information thinkable.

CSS Light Style!

/* Services Slider Light */
.example-wrapper{position:relative;width:980px;height:400px;margin:auto;margin-top:20px;}

/* THEME 1 SETTINGS */
.theme1 .main-container {background-color:#fff;border:1px solid #e6e6e6;padding:30px;-webkit-box-shadow:0px 0px 5px 1px rgba(100,100,100,0.1);-moz-box-shadow:0px 0px 5px 1px rgba(100,100,100,0.1);box-shadow:0px 0px 5px 1px rgba(100,100,100,0.1);
}
.theme1 {font-family:Arial, sans-serif;font-size:12px;line-height:20px;color:#777;text-shadow:#fff 1px 1px 1px;}
.theme1 h2{font-family: 'PT Sans Narrow', sans-serif;font-size:18px;font-weight:normal;color:#999;text-shadow:#fff 1px 1px 1px;margin:0px;width:100%;}
.theme1 .thumb{padding:4px;height:auto;background:#fff;position:relative;z-index:50;
box-shadow:0 5px 4px -5px #bbb;-webkit-box-shadow:0 5px 4px -5px #bbb;-moz-box-shadow:0 5px 4px -5px #bbb;border-bottom:1px solid #fff;border:1px solid #eee;}

/* THEME-1 MORE */
.theme1 .page-more{visibility:hidden;}
.theme1 >ul{visibility:hidden;}
.theme1 .big-image{
float:left;border:1px solid #ddd;padding:4px;height:auto;background:#fff;position:relative;z-index:50;margin-right:30px;}
.theme1 .details{position:relative;float:left;width:160px;margin-right:30px;}
.theme1 .details_double{position:relative;float:left;width:320px;margin-right:30px;}
.theme1 .video_clip{position:relative;float:left;width:498px;height:280px;border:1px solid #ddd;padding:4px;margin-right:30px;}
.theme1 .check {list-style:none;margin-left:0px;padding-left:0px;}
.theme1 .check li{background:url(http://www.themepunch.com/codecanyon/showbiz/services-plugin/assets/check.png) no-repeat left;padding-left:25px;list-style:none;line-height:27px;margin:0px;}
.theme1 .closer{width:30px;height:30px;position:absolute;background:url(http://www.themepunch.com/codecanyon/showbiz/services-plugin/assets/button/close.png) no-repeat top;right:0px;margin-right:-20px;margin-top:-20px;top:0px;cursor:pointer;z-index:10000;}

.theme1 .closer:hover{background-position:bottom;opacity:0.5;filter:alpha(opacity=50);-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";cursor:pointer;}

/* BUTTON LIGHT */
.buttonlight {margin-top:10px;height:30px;line-height:30px;font-size:12px;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;}
.buttonlight:link, .buttonlight:visited {color:#777;padding:5px 20px 5px 20px;text-align:center;text-shadow:1px 1px 0px #fff;background: #999 url('http://www.themepunch.com/codecanyon/showbiz/services-plugin/assets/button/btn_light.png') repeat-x center top;border:1px solid #cdcdcd;text-decoration:none;font-weight:bold;}
.buttonlight:hover, .comment-reply-link:hover {color:#fff;text-shadow:1px 1px 0px #000;background:#333;border:1px solid #555555;text-decoration:none;}

/* TOOLBAR Light */
.toolbar{visibility:hidden;}
.toolbar .left{background:url(http://www.themepunch.com/codecanyon/showbiz/services-plugin/assets/button/left.png) no-repeat top;width:30px;height:45px;position:absolute;left:0px;top:60px;z-index:100;margin-left:-29px;cursor:pointer;}
.toolbar .left:hover{background-position:bottom;}
.toolbar .right:hover{background-position:bottom;}
.toolbar .right{background:url(http://www.themepunch.com/codecanyon/showbiz/services-plugin/assets/button/right.png) no-repeat top;width:30px;height:45px;position:absolute;right:0px;top:60px;z-index:100;margin-right:-30px;cursor:pointer;}

/* More SIGNS Light */   
.hover-more-sign{background:url('http://www.themepunch.com/codecanyon/showbiz/services-plugin/assets/button/more.png') no-repeat;width:50px;height:50px;position:absolute;margin-left:-25px;margin-top:-25px;cursor:pointer;}
.hover-blog-link-sign{background:url('http://www.themepunch.com/codecanyon/showbiz/services-plugin/assets/button/link.png') no-repeat;width:50px;height:50px;position:absolute;cursor:pointer;}

/* THE PRELOADER Light */
.services-preloader{background:url(http://www.themepunch.com/codecanyon/showbiz/services-plugin/assets/loader/preloader.gif) no-repeat;width:24px;height:24px;position:absolute;left:49%;top:49%;z-index:9999;}

CSS Dark Style!

/* Services Slider Dark */
.example-wrapper2{position:relative;width:761px;height:400px;margin:auto;margin-top:20px;}
/* THEME 2 SETTINGS */
.theme2 .main-container {background-color:#111;border:1px solid #222;padding:20px;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;}

.theme2 {font-family: Arial, sans-serif;font-size:12px;line-height:20px;color:#999;text-shadow:#000 1px 1px 1px;}
.theme2 h2{font-family: 'PT Sans Narrow', sans-serif;font-size:17px;font-weight:bold;color:#ddd;text-shadow:#000 1px 1px 1px;margin:0px;width:100%;}

.theme2 .thumb{border:1px solid #222;padding:0px;height:auto;background:#111;position:relative;z-index:50;box-shadow:0 5px 4px -5px #000;-webkit-box-shadow:0 5px 4px -5px #000;-moz-box-shadow:0 5px 4px -5px #000;border-bottom:1px solid #111;}

/* THEME-2 MORE */
.theme2 .page-more{visibility:hidden;}
.theme2 >ul{visibility:hidden;}
.theme2 .big-image{float:left;border:1px solid #222;height:auto;background:#111;position:relative;z-index:50;margin-right:30px;}
.theme2 .details{position:relative;float:left;width:140px;margin-right:20px;}
.theme2 .details_double{position:relative;float:left;width:300px;margin-right:20px;}
.theme2 .video_clip{position:relative;float:left;width:533px;height:300px;border:1px solid #222;margin-right:20px;}
.theme2 .check {list-style:none;margin-left:0px;padding-left:0px;}
.theme2 .check li{background:url(http://www.themepunch.com/codecanyon/showbiz/services-plugin/assets/check.png) no-repeat left;padding-left:25px;list-style:none;line-height:27px;margin:0px;}
.theme2 .closer{width:30px;height:30px;position:absolute;background:url(http://www.themepunch.com/codecanyon/showbiz/services-plugin/assets/button/close_dark.png) no-repeat top;right:0px;margin-right:-10px;margin-top:-10px;top:0px;cursor:pointer;z-index:10000;}
.theme2 .closer:hover{background-position:bottom;opacity:0.5;filter:alpha(opacity=50);
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";cursor:pointer;}

/* BUTTON DARK */
.buttondark {margin-top:10px;float:left;height:30px;line-height:30px;font-size:12px;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;}
.buttondark:link, .buttondark:visited {color:#fff;padding:0 20px 0 20px;text-align:center;text-shadow:1px 1px 0px #000;background:#999 url('http://www.themepunch.com/codecanyon/showbiz/services-plugin/assets/button/btn_dark.png') repeat-x center top;border: 1px solid #222;text-decoration:none;font-weight:bold;}
.buttondark:hover, .comment-reply-link:hover {color:#fff;text-shadow:1px 1px 0px #000;background:#111;border:1px solid #222;text-decoration:none;}

/* TOOLBAR Dark */
.toolbar{visibility:hidden;}
.theme2 .toolbar .left{background:url(http://www.themepunch.com/codecanyon/showbiz/services-plugin/assets/button/left_dark.png) no-repeat top;width:30px;height:45px;position:absolute;left:0px;top:60px;z-index:100;margin-left:-29px;cursor:pointer;}
.theme2 .toolbar .right{background:url(http://www.themepunch.com/codecanyon/showbiz/services-plugin/assets/button/right_dark.png) no-repeat top;width:30px;height:45px;position:absolute;right:0px;top:60px;z-index:100;margin-right:-30px;cursor:pointer;}
.theme2 .toolbar .left:hover{background-position:bottom;}
.theme2 .toolbar .right:hover{background-position:bottom;}

/* More SIGNS Dark */   
.hover-more-sign{background:url('http://www.themepunch.com/codecanyon/showbiz/services-plugin/assets/button/more.png') no-repeat;width:50px;height:50px;position:absolute;margin-left:-25px;margin-top:-25px;cursor:pointer;}
.hover-blog-link-sign{background:url('http://www.themepunch.com/codecanyon/showbiz/services-plugin/assets/button/link.png') no-repeat;width:50px;height:50px;position:absolute;cursor:pointer;}

/* THE PRELOADER DARK */
.services-preloader{background:url(http://www.themepunch.com/codecanyon/showbiz/services-plugin/assets/loader/preloader.gif) no-repeat;width:24px;height:24px;position:absolute;left:49%;top:49%;z-index:9999;}

HTML Light Style!

<div class="example-wrapper" style="margin-top:20px;">

<div id="services-example-1" class="theme1">
<ul>

<!-- SLIDE 1 -->
<li>
<img class="thumb" src="http://www.themepunch.com/codecanyon/showbiz/images/services/service1.jpg" data-bw="http://www.themepunch.com/codecanyon/showbiz/images/services/service1_bw.jpg"/>
<div style="margin-top:16px"></div>
<h2>Slide With Large Image</h2>
<p>Lorem ipsum dolor sit amet, conseteetur sadipscing elitr,<br> sed diam monumy eirmod...</p>
<a class="buttonlight morebutton" href="#">View More</a>
<!--
***********************************************************************************************************
- HERE YOU CAN DEFINE THE EXTRA PAGE WHICH SHOULD BE SHOWN IN CASE THE "BUTTON" HAS BEED PRESSED -
***********************************************************************************************************
-->
<div class="page-more">
<img class="big-image" width="498" height="280" src="http://www.themepunch.com/codecanyon/showbiz/images/services/large1.jpg"/>
<div class="details">
<h2>Our Strategy</h2>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labora et dolore magna.</p>
<p>At vero eou et accusam et justo duo dolores et ea rebum.<br>Stet clita kasd gubergen.</p>
<a class="buttonlight" href="#">Visit Website</a>
</div>
<div class="details">
<h2>Step Towards Success</h2>
<ul class="check">
<li>List Item Number One</li>
<li>List Item Number Two</li>
<li>List Item Number Three</li>
<li>List Item Number Four</li>
</ul>
<img src="http://www.themepunch.com/codecanyon/showbiz/images/certified.png"/>
</div>
<div  class="closer"></div>
</div>
</li>

<!-- SLIDE 2 -->
<li>
<img class="thumb" src="http://www.themepunch.com/codecanyon/showbiz/images/services/service2.jpg" data-bw="http://www.themepunch.com/codecanyon/showbiz/images/services/service2_bw.jpg"/>
<div style="margin-top:16px"></div>
<h2>Youtube Video</h2>
<p>Lorem ipsum dolor sit amet, conseteetur sadipscing elitr,<br> sed diam monumy eirmod...</p>
<a class="buttonlight morebutton" href="#">View More</a>
<!--
***********************************************************************************************************
- HERE YOU CAN DEFINE THE EXTRA PAGE WHICH SHOULD BE SHOWN IN CASE THE "BUTTON" HAS BEED PRESSED -
***********************************************************************************************************
-->
<div class="page-more">
<iframe class="video_clip" src="http://www.youtube.com/embed/kjX-8kQmakk?hd=1&amp;wmode=opaque&amp;autohide=1&amp;showinfo=0" height="280" width="498" frameborder="0" webkitAllowFullScreen allowFullScreen></iframe>
<div class="details">
<h2>Our Strategy</h2>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labora et dolore magna.</p>
<p>At vero eou et accusam et justo duo dolores et ea rebum.<br>Stet clita kasd gubergen.</p>
<a class="buttonlight" href="#">Visit Website</a>
</div>
<div class="details">
<h2>Step Towards Success</h2>
<ul class="check">
<li>List Item Number One</li>
<li>List Item Number Two</li>
<li>List Item Number Three</li>
<li>List Item Number Four</li>
</ul>
<img src="http://www.themepunch.com/codecanyon/showbiz/images/certified.png"/>
</div>
<div  class="closer"></div>
</div>
</li>

<!-- SLIDE 3 -->
<li>
<img class="thumb" src="http://www.themepunch.com/codecanyon/showbiz/images/services/service3.jpg" data-bw="http://www.themepunch.com/codecanyon/showbiz/images/services/service3_bw.jpg"/>
<div style="margin-top:16px"></div>
<h2>Vimeo Video</h2>
<p>Lorem ipsum dolor sit amet, conseteetur sadipscing elitr,<br> sed diam monumy eirmod...</p>
<a class="buttonlight morebutton" href="#">View More</a>
<!--
***********************************************************************************************************
- HERE YOU CAN DEFINE THE EXTRA PAGE WHICH SHOULD BE SHOWN IN CASE THE "BUTTON" HAS BEED PRESSED -
***********************************************************************************************************
-->
<div class="page-more">
<div class="details">
<h2>Our Strategy</h2>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labora et dolore magna.</p>
<p>At vero eou et accusam et justo duo dolores et ea rebum.<br>Stet clita kasd gubergen.</p>
<a class="buttonlight" href="#">Visit Website</a>
</div>
<iframe class="video_clip" src="http://player.vimeo.com/video/24456787?title=0&amp;byline=0&amp;portrait=0" width="498" height="280" frameborder="0" webkitAllowFullScreen allowFullScreen></iframe>
<div class="details">
<h2>Step Towards Success</h2>
<ul class="check">
<li>List Item Number One</li>
<li>List Item Number Two</li>
<li>List Item Number Three</li>
<li>List Item Number Four</li>
</ul>
<img src="http://www.themepunch.com/codecanyon/showbiz/images/certified.png"/>
</div>
<div class="closer"></div>
</div>
</li>

<!-- SLIDE 4 -->
<li>
<img class="thumb" src="http://www.themepunch.com/codecanyon/showbiz/images/services/service4.jpg" data-bw="http://www.themepunch.com/codecanyon/showbiz/images/services/service4_bw.jpg"/>
<div style="margin-top:16px"></div>
<h2>Design Your Layout</h2>
<p>Lorem ipsum dolor sit amet, conseteetur sadipscing elitr,<br> sed diam monumy eirmod...</p>
<a class="buttonlight morebutton" href="#">View More</a>
<!--
***********************************************************************************************************
- HERE YOU CAN DEFINE THE EXTRA PAGE WHICH SHOULD BE SHOWN IN CASE THE "BUTTON" HAS BEED PRESSED -
***********************************************************************************************************
-->
<div class="page-more">
<img class="big-image" width="498" height="280" src="http://www.themepunch.com/codecanyon/showbiz/images/services/large2.jpg"/>
<div class="details_double">
<h2>Just An Image & Text</h2>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labora et dolore magna.</p>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labora et dolore magna.</p>
<p>At vero eou et accusam et justo duo dolores et ea rebum.<br>Stet clita kasd gubergen, no sea takimata sanctus est Lorem ipsum dolor.</p>
<a class="buttonlight" href="#">Visit Website</a>
</div>
<div  class="closer"></div>
</div>
</li>

<!-- SLIDE 5 -->
<li>
<img class="thumb" src="http://www.themepunch.com/codecanyon/showbiz/images/services/service5.jpg" data-bw="http://www.themepunch.com/codecanyon/showbiz/images/services/service5_bw.jpg"/>
<div style="margin-top:16px"></div>
<h2>No Image Just Text</h2>
<p>Lorem ipsum dolor sit amet, conseteetur sadipscing elitr,<br> sed diam monumy eirmod...</p>
<a class="buttonlight morebutton" href="#">View More</a>
<!--
***********************************************************************************************************
- HERE YOU CAN DEFINE THE EXTRA PAGE WHICH SHOULD BE SHOWN IN CASE THE "BUTTON" HAS BEED PRESSED -
***********************************************************************************************************
-->
<div class="page-more">
<div class="details">
<h2>Diverse Layouts</h2>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labora et dolore magna.</p>
<p>At vero eou et accusam et justo duo dolores et ea rebum.<br>Stet clita kasd gubergen, no sea takimata sanctus est Lorem ipsum dolor.</p>
</div>
<div class="details">
<h2>Step Towards Success</h2>
<ul class="check">
<li>List Item Number One</li>
<li>List Item Number Two</li>
<li>List Item Number Three</li>
<li>List Item Number Four</li>
</ul>
<img src="http://www.themepunch.com/codecanyon/showbiz/images/certified.png"/>
</div>
<div class="details_double">
<h2>Wide Text Block</h2>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labora et dolore magna.</p>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labora et dolore magna.</p>
<p>At vero eou et accusam et justo duo dolores et ea rebum.<br>Stet clita kasd gubergen, no sea takimata sanctus est Lorem ipsum dolor.</p>
<a class="buttonlight" href="#">Visit Website</a>
</div>
<div class="details">
<h2>Short Text Block</h2>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labora et dolore magna.</p>
<p>At vero eou et accusam et justo duo dolores et ea rebum.<br>Stet clita kasd gubergen, no sea takimata sanctus est Lorem ipsum dolor.</p>
</div>
<div  class="closer"></div>
</div>
</li>

<!-- SLIDE 6 -->
<li>
<img class="thumb" src="http://www.themepunch.com/codecanyon/showbiz/images/services/service1.jpg" data-bw="http://www.themepunch.com/codecanyon/showbiz/images/services/service1_bw.jpg"/>
<div style="margin-top:16px"></div>
<h2>Slide With Large Image</h2>
<p>Lorem ipsum dolor sit amet, conseteetur sadipscing elitr,<br> sed diam monumy eirmod...</p>
<a class="buttonlight morebutton" href="#">View More</a>
<!--
***********************************************************************************************************
- HERE YOU CAN DEFINE THE EXTRA PAGE WHICH SHOULD BE SHOWN IN CASE THE "BUTTON" HAS BEED PRESSED -
***********************************************************************************************************
-->
<div class="page-more">
<img class="big-image" width="498" height="280" src="http://www.themepunch.com/codecanyon/showbiz/images/services/large1.jpg"/>
<div class="details">
<h2>Our Strategy</h2>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labora et dolore magna.</p>
<p>At vero eou et accusam et justo duo dolores et ea rebum.<br>Stet clita kasd gubergen.</p>
<a class="buttonlight" href="#">Visit Website</a>
</div>
<div class="details">
<h2>Step Towards Success</h2>
<ul class="check">
<li>List Item Number One</li>
<li>List Item Number Two</li>
<li>List Item Number Three</li>
<li>List Item Number Four</li>
</ul>
<img src="http://www.themepunch.com/codecanyon/showbiz/images/certified.png"/>
</div>
<div  class="closer"></div>
</div>
</li>

<!-- SLIDE 7 -->
<li>
<img class="thumb" src="http://www.themepunch.com/codecanyon/showbiz/images/services/service2.jpg" data-bw="http://www.themepunch.com/codecanyon/showbiz/images/services/service2_bw.jpg"/>
<div style="margin-top:16px"></div>
<h2>Youtube Video</h2>
<p>Lorem ipsum dolor sit amet, conseteetur sadipscing elitr,<br> sed diam monumy eirmod...</p>
<a class="buttonlight morebutton" href="#">View More</a>
<!--
***********************************************************************************************************
- HERE YOU CAN DEFINE THE EXTRA PAGE WHICH SHOULD BE SHOWN IN CASE THE "BUTTON" HAS BEED PRESSED -
***********************************************************************************************************
-->
<div class="page-more">
<iframe class="video_clip" src="http://www.youtube.com/embed/kjX-8kQmakk?hd=1&amp;wmode=opaque&amp;autohide=1&amp;showinfo=0" height="280" width="498" frameborder="0" webkitAllowFullScreen allowFullScreen></iframe>
<div class="details">
<h2>Our Strategy</h2>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labora et dolore magna.</p>
<p>At vero eou et accusam et justo duo dolores et ea rebum.<br>Stet clita kasd gubergen.</p>
<a class="buttonlight" href="#">Visit Website</a>
</div>
<div class="details">
<h2>Step Towards Success</h2>
<ul class="check">
<li>List Item Number One</li>
<li>List Item Number Two</li>
<li>List Item Number Three</li>
<li>List Item Number Four</li>
</ul>
<img src="http://www.themepunch.com/codecanyon/showbiz/images/certified.png"/>
</div>
<div class="closer"></div>
</div>
</li>

<!-- SLIDE 8 -->
<li>
<img class="thumb" src="http://www.themepunch.com/codecanyon/showbiz/images/services/service3.jpg" data-bw="http://www.themepunch.com/codecanyon/showbiz/images/services/service3_bw.jpg"/>
<div style="margin-top:16px"></div>
<h2>Vimeo Video</h2>
<p>Lorem ipsum dolor sit amet, conseteetur sadipscing elitr,<br> sed diam monumy eirmod...</p>
<a class="buttonlight morebutton" href="#">View More</a>
<!--
***********************************************************************************************************
- HERE YOU CAN DEFINE THE EXTRA PAGE WHICH SHOULD BE SHOWN IN CASE THE "BUTTON" HAS BEED PRESSED -
***********************************************************************************************************
-->
<div class="page-more">
<div class="details">
<h2>Our Strategy</h2>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labora et dolore magna.</p>
<p>At vero eou et accusam et justo duo dolores et ea rebum.<br>Stet clita kasd gubergen.</p>
<a class="buttonlight" href="#">Visit Website</a>
</div>
<iframe class="video_clip" src="http://player.vimeo.com/video/24456787?title=0&amp;byline=0&amp;portrait=0" width="498" height="280" frameborder="0" webkitAllowFullScreen allowFullScreen></iframe>
<div class="details">
<h2>Step Towards Success</h2>
<ul class="check">
<li>List Item Number One</li>
<li>List Item Number Two</li>
<li>List Item Number Three</li>
<li>List Item Number Four</li>
</ul>
<img src="http://www.themepunch.com/codecanyon/showbiz/images/certified.png"/>
</div>
<div class="closer"></div>
</div>
</li>

<!-- SLIDE 9 -->
<li>
<img class="thumb" src="http://www.themepunch.com/codecanyon/showbiz/images/services/service4.jpg" data-bw="http://www.themepunch.com/codecanyon/showbiz/images/services/service4_bw.jpg"/>
<div style="margin-top:16px"></div>
<h2>Design Your Layout</h2>
<p>Lorem ipsum dolor sit amet, conseteetur sadipscing elitr,<br> sed diam monumy eirmod...</p>
<a class="buttonlight morebutton" href="#">View More</a>
<!--
***********************************************************************************************************
- HERE YOU CAN DEFINE THE EXTRA PAGE WHICH SHOULD BE SHOWN IN CASE THE "BUTTON" HAS BEED PRESSED -
***********************************************************************************************************
-->
<div class="page-more">
<img class="big-image" width="498" height="280" src="http://www.themepunch.com/codecanyon/showbiz/images/services/large2.jpg"/>
<div class="details_double">
<h2>Just An Image & Text</h2>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labora et dolore magna.</p>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labora et dolore magna.</p>
<p>At vero eou et accusam et justo duo dolores et ea rebum.<br>Stet clita kasd gubergen, no sea takimata sanctus est Lorem ipsum dolor.</p>
<a class="buttonlight" href="#">Visit Website</a>
</div>
<div  class="closer"></div>
</div>
</li>

<!-- SLIDE 10 -->
<li>
<img class="thumb" src="http://www.themepunch.com/codecanyon/showbiz/images/services/service5.jpg" data-bw="http://www.themepunch.com/codecanyon/showbiz/images/services/service5_bw.jpg"/>
<div style="margin-top:16px"></div>
<h2>No Image Just Text</h2>
<p>Lorem ipsum dolor sit amet, conseteetur sadipscing elitr,<br> sed diam monumy eirmod...</p>
<a class="buttonlight morebutton" href="#">View More</a>
<!--
***********************************************************************************************************
- HERE YOU CAN DEFINE THE EXTRA PAGE WHICH SHOULD BE SHOWN IN CASE THE "BUTTON" HAS BEED PRESSED -
***********************************************************************************************************
-->
<div class="page-more">
<div class="details">
<h2>Diverse Layouts</h2>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labora et dolore magna.</p>
<p>At vero eou et accusam et justo duo dolores et ea rebum.<br>Stet clita kasd gubergen, no sea takimata sanctus est Lorem ipsum dolor.</p>
</div>
<div class="details">
<h2>Step Towards Success</h2>
<ul class="check">
<li>List Item Number One</li>
<li>List Item Number Two</li>
<li>List Item Number Three</li>
<li>List Item Number Four</li>
</ul>
<img src="http://www.themepunch.com/codecanyon/showbiz/images/certified.png"/>
</div>
<div class="details_double">
<h2>Wide Text Block</h2>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labora et dolore magna.</p>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labora et dolore magna.</p>
<p>At vero eou et accusam et justo duo dolores et ea rebum.<br>Stet clita kasd gubergen, no sea takimata sanctus est Lorem ipsum dolor.</p>
<a class="buttonlight" href="#">Visit Website</a>
</div>
<div class="details">
<h2>Short Text Block</h2>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labora et dolore magna.</p>
<p>At vero eou et accusam et justo duo dolores et ea rebum.<br>Stet clita kasd gubergen, no sea takimata sanctus est Lorem ipsum dolor.</p>
</div>
<div class="closer"></div>
</div>
</li>

</ul>
<div class="toolbar">
<div class="left"></div><div class="right"></div>
</div>

</div>
</div>

HTML Dark Style!

<div class="example-wrapper2" style="margin-top:20px;">
<div id="services-example-2" class="theme2">
<ul>

<!-- SLIDE 1 -->
<li>
<img class="thumb" src="http://www.themepunch.com/codecanyon/showbiz/images/services_dark/service1.jpg" data-bw="http://www.themepunch.com/codecanyon/showbiz/images/services_dark/service1_bw.jpg"/>
<div style="margin-top:10px"></div>
<h2>Jack</h2>
<p>Lorem ipsum dolor sit amet...</p>
<a class="buttondark morebutton" href="#">Detail</a>
<!--
***********************************************************************************************************
- HERE YOU CAN DEFINE THE EXTRA PAGE WHICH SHOULD BE SHOWN IN CASE THE "BUTTON" HAS BEED PRESSED -
***********************************************************************************************************
-->
<div class="page-more">
<img class="big-image" width="200" height="338" src="http://www.themepunch.com/codecanyon/showbiz/images/services_dark/large1.jpg"/>
<div class="details">
<h2>Our Strategy</h2>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labora et dolore magna.</p>
<p>At vero eou et accusam et justo duo dolores et ea rebum.<br>Stet clita kasd gubergen.</p>
<a class="buttondark" href="#">Visit Website</a>
</div>
<div class="details">
<h2>Step Towards Success</h2>
<ul class="check">
<li>Item Number One</li>
<li>Item Number Two</li>
<li>Item Number Three</li>
<li>Item Number Four</li>
</ul>
<img src="http://www.themepunch.com/codecanyon/showbiz/images/certified_dark.png"/>
</div>
<div class="details">
<h2>Read This</h2>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labora et dolore magna.</p>
<p>At vero eou et accusam et justo duo dolores et ea rebum.<br>Stet clita kasd gubergen.</p>
</div>
<div class="closer"></div>
</div>
</li>

<!-- SLIDE 2 -->
<li>
<img class="thumb" src="http://www.themepunch.com/codecanyon/showbiz/images/services_dark/service2.jpg" data-bw="http://www.themepunch.com/codecanyon/showbiz/images/services_dark/service2_bw.jpg"/>
<div style="margin-top:10px"></div>
<h2>Melissa</h2>
<p>Lorem ipsum dolor sit amet...</p>
<a class="buttondark morebutton" href="#">Detail</a>
<!--
***********************************************************************************************************
- HERE YOU CAN DEFINE THE EXTRA PAGE WHICH SHOULD BE SHOWN IN CASE THE "BUTTON" HAS BEED PRESSED -
***********************************************************************************************************
-->
<div class="page-more">
<iframe class="video_clip" src="http://www.youtube.com/embed/kjX-8kQmakk?hd=1&amp;wmode=opaque&amp;autohide=1&amp;showinfo=0" height="280" width="498" frameborder="0" webkitAllowFullScreen allowFullScreen></iframe>
<div class="details">
<h2>Youtube Video</h2>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labora et dolore magna.</p>
<p>At vero eou et accusam et justo duo dolores et ea rebum.</p>
<a class="buttondark" href="#">Visit Website</a>
</div>
<div class="closer"></div>
</div>
</li>

<!-- SLIDE 3 -->
<li>
<img class="thumb" src="http://www.themepunch.com/codecanyon/showbiz/images/services_dark/service3.jpg" data-bw="http://www.themepunch.com/codecanyon/showbiz/images/services_dark/service3_bw.jpg"/>
<div style="margin-top:10px"></div>
<h2>Claire</h2>
<p>Lorem ipsum dolor sit amet...</p>
<a class="buttondark morebutton" href="#">Detail</a>
<!--
***********************************************************************************************************
- HERE YOU CAN DEFINE THE EXTRA PAGE WHICH SHOULD BE SHOWN IN CASE THE "BUTTON" HAS BEED PRESSED -
***********************************************************************************************************
-->
<div class="page-more">
<iframe class="video_clip" src="http://player.vimeo.com/video/24456787?title=0&amp;byline=0&amp;portrait=0" width="498" height="280" frameborder="0" webkitAllowFullScreen allowFullScreen></iframe>
<div class="details">
<h2>Vimeo Video</h2>
<ul class="check">
<li>Item Number One</li>
<li>Item Number Two</li>
<li>Item Number Three</li>
<li>Item Number Four</li>
</ul>
<img src="http://www.themepunch.com/codecanyon/showbiz/images/certified_dark.png"/>
</div>
<div class="closer"></div>
</div>
</li>

<!-- SLIDE 4 -->
<li>
<img class="thumb" src="http://www.themepunch.com/codecanyon/showbiz/images/services_dark/service4.jpg" data-bw="http://www.themepunch.com/codecanyon/showbiz/images/services_dark/service4_bw.jpg"/>
<div style="margin-top:10px"></div>
<h2>Gina</h2>
<p>Lorem ipsum dolor sit amet...</p>
<a class="buttondark morebutton" href="#">Detail</a>
<!--
***********************************************************************************************************
- HERE YOU CAN DEFINE THE EXTRA PAGE WHICH SHOULD BE SHOWN IN CASE THE "BUTTON" HAS BEED PRESSED -
***********************************************************************************************************
-->
<div class="page-more">
<img class="big-image" width="200" height="338" src="http://www.themepunch.com/codecanyon/showbiz/images/services_dark/large1.jpg"/>
<div class="details_double">
<h2>Just An Image & Text</h2>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labora et dolore magna.</p>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labora et dolore magna.</p>
<p>At vero eou et accusam et justo duo dolores et ea rebum.<br>Stet clita kasd gubergen, no sea takimata sanctus est Lorem ipsum dolor.</p>
<a class="buttondark" href="#">Visit Website</a>
</div>
<div class="details">
<h2>Useful Things</h2>
<ul class="check">
<li>Item Number One</li>
<li>Item Number Two</li>
<li>Item Number Three</li>
<li>Item Number Four</li>
</ul>
<img src="http://www.themepunch.com/codecanyon/showbiz/images/certified_dark.png"/>
</div>
<div class="closer"></div>
</div>
</li>

<!-- SLIDE 5 -->
<li>
<img class="thumb" src="http://www.themepunch.com/codecanyon/showbiz/images/services_dark/service5.jpg" data-bw="http://www.themepunch.com/codecanyon/showbiz/images/services_dark/service5_bw.jpg"/>
<div style="margin-top:10px"></div>
<h2>Thomas</h2>
<p>Lorem ipsum dolor sit amet...</p>
<a class="buttondark morebutton" href="#">Detail</a>
<!--
***********************************************************************************************************
- HERE YOU CAN DEFINE THE EXTRA PAGE WHICH SHOULD BE SHOWN IN CASE THE "BUTTON" HAS BEED PRESSED -
***********************************************************************************************************
-->
<div class="page-more">
<div class="details_double">
<h2>Just An Image & Text</h2>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labora et dolore magna.</p>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labora et dolore magna.</p>
<p>At vero eou et accusam et justo duo dolores et ea rebum.<br>Stet clita kasd gubergen, no sea takimata sanctus est Lorem ipsum dolor.</p>
<a class="buttondark" href="#">Visit Website</a>
</div>
<img class="big-image" width="200" height="338" src="http://www.themepunch.com/codecanyon/showbiz/images/services_dark/large1.jpg">
<div class="details">
<h2>Useful Things</h2>
<ul class="check">
<li>Item Number One</li>
<li>Item Number Two</li>
<li>Item Number Three</li>
<li>Item Number Four</li>
</ul>
<img src="http://www.themepunch.com/codecanyon/showbiz/images/certified_dark.png"/>
</div>
<div  class="closer"></div>
</div>
</li>

<!-- SLIDE 6 -->
<li>
<img class="thumb" src="http://www.themepunch.com/codecanyon/showbiz/images/services_dark/service6.jpg" data-bw="http://www.themepunch.com/codecanyon/showbiz/images/services_dark/service6_bw.jpg">
<div style="margin-top:10px"></div>
<h2>Just A Link</h2>
<p>Lorem ipsum dolor sit amet...</p>
<a class="buttondark" href="#">Detail</a>
<!--
***********************************************************************************************************
- HERE YOU CAN DEFINE THE EXTRA PAGE WHICH SHOULD BE SHOWN IN CASE THE "BUTTON" HAS BEED PRESSED -
***********************************************************************************************************
-->
<div class="page-more"></div>
</li>

</ul>
<div class="toolbar">
<div class="left"></div><div class="right"></div>
</div>

</div>
</div>

SCRIPT Light Style!

<!-- get jQuery from the google apis -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script>

<script type="text/javascript" src="http://www.themepunch.com/codecanyon/showbiz/services-plugin/js/jquery.cssAnimate.mini.js"></script>

<!-- TOUCH AND MOUSE WHEEL SETTINGS -->
<script type="text/javascript" src="http://www.themepunch.com/codecanyon/showbiz/services-plugin/js/jquery.touchwipe.min.js"></script>

<script type="text/javascript" src="http://www.themepunch.com/codecanyon/showbiz/services-plugin/js/jquery.mousewheel.min.js"></script>

<!-- jQuery SERVICES Slider  -->
<script type="text/javascript" src="http://www.themepunch.com/codecanyon/showbiz/services-plugin/js/jquery.themepunch.services.min.js"></script>

<!-- ACTIVATE THE BANNER HERE -->
<script type="text/javascript">
$(document).ready(function() {
$.noConflict();
jQuery('#services-example-1').services(
{
width:920,
height:290,
slideAmount:5,
slideSpacing:30,
touchenabled:"on",
mouseWheel:"on",
hoverAlpha:"off",
slideshow:3000,
hovereffect:"on",
callBack:function() { }
});
});
</script>

SCRIPT Dark Style!

<!-- get jQuery from the google apis -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script>

<script type="text/javascript" src="http://www.themepunch.com/codecanyon/showbiz/services-plugin/js/jquery.cssAnimate.mini.js"></script>

<!-- TOUCH AND MOUSE WHEEL SETTINGS -->
<script type="text/javascript" src="http://www.themepunch.com/codecanyon/showbiz/services-plugin/js/jquery.touchwipe.min.js"></script>

<script type="text/javascript" src="http://www.themepunch.com/codecanyon/showbiz/services-plugin/js/jquery.mousewheel.min.js"></script>

<!-- jQuery SERVICES Slider  -->
<script type="text/javascript" src="http://www.themepunch.com/codecanyon/showbiz/services-plugin/js/jquery.themepunch.services.min.js"></script>

<!-- ACTIVATE THE BANNER HERE -->
<script type="text/javascript">
$(document).ready(function() {
$.noConflict();
jQuery('#services-example-2').services(
{
width:720,
height:345,
slideAmount:6,
slideSpacing:20,
touchenabled:"on",
mouseWheel:"on",
hoverAlpha:"off",
slideshow:3000,
hovereffect:"on",
callBack:function() { }
});
});
</script>

Example Showbiz Business Carousel With jQuery Plugin (Dark Style)

  • Jack

    Lorem ipsum dolor sit amet...

    Detail

    Our Strategy

    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labora et dolore magna.

    At vero eou et accusam et justo duo dolores et ea rebum.
    Stet clita kasd gubergen.

    Visit Website

    Step Towards Success

    • Item Number One
    • Item Number Two
    • Item Number Three
    • Item Number Four

    Read This

    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labora et dolore magna.

    At vero eou et accusam et justo duo dolores et ea rebum.
    Stet clita kasd gubergen.

  • Melissa

    Lorem ipsum dolor sit amet...

    Detail

    Youtube Video

    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labora et dolore magna.

    At vero eou et accusam et justo duo dolores et ea rebum.

    Visit Website

  • Claire

    Lorem ipsum dolor sit amet...

    Detail

    Vimeo Video

    • Item Number One
    • Item Number Two
    • Item Number Three
    • Item Number Four

  • Gina

    Lorem ipsum dolor sit amet...

    Detail

    Just An Image & Text

    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labora et dolore magna.

    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labora et dolore magna.

    At vero eou et accusam et justo duo dolores et ea rebum.
    Stet clita kasd gubergen, no sea takimata sanctus est Lorem ipsum dolor.

    Visit Website

    Useful Things

    • Item Number One
    • Item Number Two
    • Item Number Three
    • Item Number Four

  • Thomas

    Lorem ipsum dolor sit amet...

    Detail

    Just An Image & Text

    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labora et dolore magna.

    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labora et dolore magna.

    At vero eou et accusam et justo duo dolores et ea rebum.
    Stet clita kasd gubergen, no sea takimata sanctus est Lorem ipsum dolor.

    Visit Website

    Useful Things

    • Item Number One
    • Item Number Two
    • Item Number Three
    • Item Number Four

  • Just A Link

    Lorem ipsum dolor sit amet...

    Detail

,