Lightweight jQuery Any Html Elements Carousel Plugin - WaltzerJS

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 src="jquery.min.js"></script>
<script 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>

  ... more slides here

</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 on document ready. Done.

$(document).ready(function() {
  $('#carousel').waltzer();
});

5. All default configurations & callback functions.

$('#carousel').waltzer({

  // Enable vertical scrolling
  vertical: false, 

  // Number of items to scroll during each transition.
  scroll: 1, 

  // Item to start on, items will be reordered positioning the specified item first.
  offset: 0, 

  // Circular or linear scrolling.
  circular: true, 

  // Autoplay on load
  auto: false, 

  // Pause time between each automatic transition, when autoplay is enabled.
  autoPause : 1000, 

  // Time to complete each transition.
  speed: 300, 

  // Easing options. Requires jQuery easing plugin or jQuery UI.
  easing: 'swing', 

  // Enable arrows navigation
  navBtns: true, 

  // Class name for the 'previous' button 
  leftNavBtn: 'left-nav-btn', 

  // Class name for the 'next' button 
  rightNavBtn: 'right-nav-btn', 

  // Enable pager navigation
  pager: false, 

  // Callback functions
  onCreate: null, 
  onComplete: null, 
  onForwardComplete: null,
  onBackwardComplete: null

});

6. API methods..

// start/stop auto play
$('#carousel').waltzer('start');
$('#carousel').waltzer('stop');

// go to the next slide
$('#carousel').waltzer('forward');

// back to the previous slide
$('#carousel').waltzer('backward');

// destroy the carousel
$('#carousel').waltzer('destroy');

7. Event handlers.

$('#carousel').on('forward', function(e){
  // do something
});

$('#carousel').on('backward', function(e){
  // do something
});

$('#carousel').on('forwardComplete', function(e){
  // do something
});

$('#carousel').on('backwardComplete', function(e){
  // do something
});

$('#carousel').on('move', function(e){
  // do something
});

$('#carousel').on('moved', function(e){
  // do something
});

Changelog:

2020-01-06

• JS & Demo updated

---

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