Lightweight jQuery Any Html Elements Carousel Plugin - WaltzerJS

Lightweight jQuery Any Html Elements Carousel Plugin - WaltzerJS
File Size: 22.4KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

WaltzerJS is a lightweight and fast jQuery slider plugin used to create a highly customizable carousel slider with lots of configurable options.

Features:

  • Vertical or horizontal scrolling orientation.
  • Supports any html elements like images, DIVs, text, etc.
  • Endless loop.
  • Auto play on load and Pause on hover.
  • Arrow button and pager navigation.
  • Circular or linear scrolling.
  • Multi-items scrolling during each transition,
  • Easing effects support. (Requires jQuery easing plugin or jQuery UI).
  • Cross browser. Support all modern browsers and even IE 7/8/9.
  • Callback functions supported.

Basic Usage:

1. Include the jQuery javascript library and jQuery WaltzerJS plugin on the page.

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

2. Markup html structure.

<div id="carousel">

<div class="item">
<div>Item 1</div>
</div>

<div class="item">
<div>Item 2</div>
</div>

<div class="item">
<div>Item 3</div>
</div>

...

</div>

3. Add the following styles to your CSS file and change them to suit for your needs.

.item {
float: left;
margin-right: 48px;
width: 162px;
padding: 20px;
height: 162px;
border: 1px solid #b3b3b3;
background-color: #fff;
border-radius: 5px;
}
.item div {
background: #ddd;
width: 99%;
height: 99%;
color: white;
color: #b3b3b3;
text-align: center;
line-height: 162px;
font-size: 60px;
border-radius: 5px;
border: 1px solid #b3b3b3;
}
.left-nav-btn, .right-nav-btn {
position: absolute;
width: 37px;
height: 37px;
top: 80px;
cursor: pointer;
opacity: 0.8;
background: transparent url('../images/arrows.png') top left no-repeat;
-webkit-transition: opacity 0.2s linear;
-moz-transition: opacity 0.2s linear;
-o-transition: opacity 0.2s linear;
transition: opacity 0.2s linear;
}
.left-nav-btn {
left: -80px;
}
.right-nav-btn {
right: -80px;
background-position: top right;
}
.left-nav-btn:hover, .right-nav-btn:hover {
opacity: 1;
}
/* Vertical Mode */

.vert.outerWrapper {
margin: 50px auto 60px auto;
width: 204px;
height: 456px;
}
.vert .item {
float: left;
margin-bottom: 48px;
width: 162px;
}
.vert .left-nav-btn, .vert .right-nav-btn {
position: absolute;
width: 37px;
height: 37px;
cursor: pointer;
left: 82px;
background: transparent url('../images/arrows_vert.png') top left no-repeat;
}
.vert .left-nav-btn {
top: -60px;
}
.vert .right-nav-btn {
top: auto;
bottom: -60px;
background-position: bottom left;
}
.leftWrapper {
width: 48%;
float: left;
}
.rightWrapper {
width: 48%;
float: right;
}
.leftWrapper h2, .rightWrapper h2 {
width: 100%;
text-align: center;
}
.outerWrapper2 .item {
margin-right: 50px;
width: 110px;
padding: 20px;
}
/* Pager */

.pager {
line-height: 100px;
text-align: center;
}
.pager > span {
cursor: pointer;
border-radius: 8px;
display: inline-block;
width: 16px;
height: 16px;
background: #DDDDDD;
border: 1px solid #B3B3B3;
margin: 0 4px;
overflow: none;
}
.pager > span.active {
background: #B3B3B3;
}
.pager > span > span {
display: none;
}

4. Call the plugin with default options.

<script type="text/javascript">
$(document).ready(function() {
$('#carousel').waltzer();
});
</script>

5. Configurations.

<script type="text/javascript">
$(document).ready(function() {
$('#carousel').waltzer({
vertical: false, // enable vertical scrolling
scroll: 1, // Number of items to scroll during each transition.
offset: 0, // Item to start on, items will be reordered positioning the specified item first.
circular: true, // Circular or linear scrolling.
auto: false, // autoplay on load
autoPause : 1000, // Pause time between each automatic transition, when autoplay is enabled.
speed: 300, // Time to complete each transition.
easing: 'swing', // easing options. Requires jQuery easing plugin or jQuery UI.
navBtns: true, // arrows navigation
leftNavBtn: 'left-nav-btn', // Class name for the 'previous' button 
rightNavBtn: 'right-nav-btn', // Class name for the 'next' button 
pager: false, // pager navigation
onCreate: null, // callback function
onComplete: null, // callback function
onForwardComplete: null, // callback function
onBackwardComplete: null // callback function
});
});
</script>

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