Fully Customizable jQuery Slideshow Plugin

A simple but fully customizable jQuery plugin that helps you to quickly create horizontal or vertical content slideshows with transitions and fade effects.

Features:

• Highly customizable
• Support for Horizontal or Vertical layout
• Based on transition objects
• Custom html structure.
• Support for Infinite scroll
• Support for any html content

Basic Usage:

1. Include necessary javascript files on your web page

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="../../src/jocode_class.js"></script>
<script src="../../src/jocode_slideshow.js"></script>
<script src="../../src/fx/slideshow/scroll.js"></script>
<script src="../../src/jocode_navigation_slideshow.js"></script>
<script src="../../src/fx/navigation/scroll.js"></script>

2. The HTML

<div class="slideshow"> <a href="#" class="button first"></a> <a href="#" class="button previous"></a> <a href="#" class="button play"></a> <a href="#" class="button pause"></a> <a href="#" class="button resume"></a> <a href="#" class="button stop"></a> <a href="#" class="button next"></a> <a href="#" class="button last"></a>
<div class='scroller'>
<div>
<div>HTML Content1</div>
<div>HTML Content2</div>
<div>HTML Content3</div>
<div>HTML Content4</div>
<div>HTML Content5</div>
<div>HTML Content6</div>
<div>HTML Content7</div>
<div>HTML Content8</div>
<div>HTML Content9</div>
<div>HTML Content10</div>
<div>HTML Content11</div>
<div>HTML Content12</div>
<div>HTML Content13</div>
</div>
</div>
<div class='navigation'>
<div> <a href="#" class="button scroll_first"></a> <a href="#" class="button scroll_previous"></a>
<div class='scroller'>
<div> <a href="#">Nav1</a> <a href="#">Nav2</a> <a href="#">Nav3</a> <a href="#">Nav4</a> <a href="#">Nav5</a> <a href="#">Nav6</a> <a href="#">Nav7</a> <a href="#">Nav8</a> <a href="#">Nav9</a> <a href="#">Nav10</a> <a href="#">Nav11</a> <a href="#">Nav12</a> <a href="#">Nav13</a> </div>
</div>
<a href="#" class="button scroll_next"></a> <a href="#" class="button scroll_last"></a> </div>
</div>
</div>

3. The CSS

.slideshow {
display: inline-block;
overflow: hidden;
position: relative;
text-align: center;
width : 500px;/*what you want*/
}
.slideshow img {
vertical-align: middle;
}
.slideshow a:active, .slideshow a:focus {
border: none;
outline: none;
}
.slideshow > .scroller {
overflow: hidden;
width : 500px;/*what you want*/
}
.slideshow > .scroller > div {
display: table;
table-layout: fixed;
position: relative;
width : 0;/*important disable auto width*/
}
.slideshow > .scroller > div > div {
display: table-cell;
vertical-align: middle;
text-align: center;
width : 500px;/*what you want*/
}
.slideshow > .button {
position: relative;
display : inline-block;
width : 25px;/*what you want*/
height : 25px;/*what you want*/
margin : 5px;/*what you want*/
background-image: url(../player_horizontal.png);
background-repeat: no-repeat;
}
.slideshow > .button.disabled {
display : none;
}
.slideshow > .button.first {
background-position: 0 0;
}
.slideshow > .button.previous {
background-position: -25px 0px;
}
.slideshow > .button.play {
background-position: -50px 0px;
}
.slideshow > .button.pause {
background-position: -75px 0px;
}
.slideshow > .button.resume {
background-position: -50px 0px;
}
.slideshow > .button.stop {
background-position: -100px 0px;
}
.slideshow > .button.next {
background-position: -125px 0px;
}
.slideshow > .button.last {
background-position: -150px 0px;
}
.slideshow > .navigation {
display: inline-table;
}
.slideshow >.navigation > div {
display: table-cell;
text-align: center;
vertical-align: middle;
}
.slideshow > .navigation > div > * {
float: left;
}
.slideshow > .navigation > div > .scroller {
display: inline-block;
overflow: hidden;
max-width : 350px;/*what you want*/
}
.slideshow > .navigation > div > .button {
width : 25px;/*what you want*/
height : 25px;/*what you want*/
margin : 5px;/*what you want*/
background-image: url(../player.png);
background-repeat: no-repeat;
background-position: center;
}
.slideshow > .navigation > div > .button.scroll_first {
background-position: 0 -25px;
}
.slideshow > .navigation > div > .button.scroll_previous {
background-position: 0 0px;
}
.slideshow > .navigation > div > .button.scroll_next {
background-position: -50px 0px;
}
.slideshow > .navigation > div > .button.scroll_last {
background-position: -50px -25px;
}
.slideshow > .navigation > div > .scroller > div {
display: table;
table-layout: fixed;
width : 0;/*disable auto width*/
}
.slideshow > .navigation > div > .scroller > div > a {
display: table-cell;
text-align: center;
vertical-align: middle;
width : 50px;/*what you want*/
height : 38px;/*what you want*/
}
.slideshow > .navigation > div > .scroller > div > a.selected {
background-color: red;
}
.slideshow > .navigation > div > .scroller > div > a.scrolled {
background-color: gray;
}

4. Initialize the plugin with options

$(function(){
$('.slideshow').jocodeSlideshow({

selector : '> .scroller > div > div',

bt_first : '.first',
bt_previous : '.previous',
bt_play : '.play',
bt_pause : '.pause',
bt_resume : '.resume',
bt_stop : '.stop',
bt_next: '.next',
bt_last : '.last',

disabled_bt_class : 'disabled',

auto_play : true,
delay : 1000,
   
start_index : 0,
   
fx : new $.JocodeFxSlideshow.Scroll({
duration : 1000
}),

navigation : new $.JocodeNavigationSlideshow({

selector : '> .navigation > div > .scroller > div >  a',

selected_class : 'selected',
scrolled_class : 'scrolled',

bt_next: '.scroll_next',
bt_previous : '.scroll_previous',
bt_first: '.scroll_first',
bt_last : '.scroll_last',

fx : new $.JocodeFxNavigationSlideshow.Scroll()
})

});
});

More Example:

• Basic Example
• Horizontal fade Example
• Infinite horizontal scroll Example
• Vertical scroll Example

---

This awesome jQuery plugin is developed by unknown. For more Advanced Usages, please check the demo page or visit the official website.