Home Showbiz Business Carousel With jQuery Plugin

Showbiz Business Carousel With jQuery Plugin


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

Silahkan anda laporkan jika ada link yang rusak atau beberapa tutorial yang tidak bekerja, karena saya akan segera memperbaikinya, dan berhubung saya baru mengganti themes blog, jadi pasti banyak artikel yang berantakan! Saya harap anda dapat membantu saya untuk memperbaiki semuanya dengan berkomentar di artikel yang bermasalah.. thanks sebelumnya sudah berkunjung keblog utta yang sederhana ini...
Please rate this article:
{[['', '']]}
{["Useless", "Boring", "Need more details", "Perfect"]}

Jika Artikel ini menarik, Silahkan copy paste permalink berikut ini di blog sobat!

thumbnail
About The Author

Hai,.. I am just an ordinary man who just might share the knowledge that I know ahead of you, No one is more perfect. Always keep learning and sharing of knowledge, Just be Yourself and be The Unique that makes them know who you are.!!


  • Diposkan oleh ← Ⓐкα UTτα`

    • You might also like these article :

    1 Comments
    Comments

    + komentar + 1 komentar

    Tolong memberi komentar yang tidak melanggar norma-norma. Kami berhak menghapus komentar yang kasar, mengejek, bersifat menyerang, dan tidak berhubungan dengan artikel di atas. Oleh sebab itu, kiranya dapat menggunakan bahasa yang jelas!

    Pedoman wajib untuk memasukkan komentar:
    1. Tidak boleh memakai lebih dari satu kolom komentar.
    2. Pertanyaan/masukan harus berhubungan dengan uraian diatas.
    3. Sebaiknya satu atau dua pertanyaan dalam satu kolom komentar.
    4. Hanya menggunakan bahasa Indonesia yang umum dan dimengerti semua orang.
    5. Tidak diperbolehkan menggunakan huruf besar untuk menekankan sesuatu.
    6. Tidak diijinkan mencantumkan hyperlink dari situs lain.

    Bila Anda punya nama atau blog gunakan komentar sebagai "Name/ URL".

    Sebelumnya utta minta maaf yg sebsr2Nya jka komentar anda blm sempat dibls. ^^