Lightweight jQuery Any Html Elements Carousel Plugin - WaltzerJS
File Size: | 148 KB |
---|---|
Views Total: | 15864 |
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 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.