Clean and Flexible jQuery Content Slider Plugin - unslider
File Size: | 368 KB |
---|---|
Views Total: | 38505 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

unslider is a responsive and cross-browser jQuery plugin for creating clean and flexible content sliders on your web site. unslider currently supports almost all the html elements like image, text, video, etc.
Features:
- Lightweight (~3kb minified) and easy to implement
- Responsive and cross-browser
- Keyboard and Dot navigation support
- Customizable transition animations
- Touch & Swipe support
- Prev/Next button support
Basic Usage:
1. Include jQuery library and jQuery unslider on the page
<script src="http://code.jquery.com/jquery-latest.min.js"></script> <script src="unslider.min.js"></script>
2. Include OPTIONAL javascript files for mobile support
<script src="http://stephband.info/jquery.event.move/js/jquery.event.move.js"></script> <script src="http://stephband.info/jquery.event.swipe/js/jquery.event.swipe.js"></script>
3. Create a html list for your slider
<div class="demo"> <ul> <li style="background-image: url('img/1.jpg');"> <h1>Title 1</h1> <p>...</p> </li> <li style="background-image: url('img/2.jpg');"> <h1>Title 2</h1> <p>...</p> </li> ... </ul> </div>
4. Call the plugin with options
$(function() { $('.demo').unslider({ // Should the slider move on its own or only when // you interact with the nav/arrows? // Only accepts boolean true/false. autoplay: false, // 3 second delay between slides moving, pass // as a number in milliseconds. delay: 3000, // Animation speed in millseconds speed: 750, // An easing string to use. If you're using Velocity, use a // Velocity string otherwise you can use jQuery/jQ UI options. easing: 'swing', // [.42, 0, .58, 1], // Does it support keyboard arrows? // Can pass either true or false - // or an object with the keycodes, like so: // { // prev: 37, // next: 39 // } // You can call any internal method name // before the keycode and it'll be called. keys: { prev: 37, next: 39 }, // Do you want to generate clickable navigation // to skip to each slide? Accepts boolean true/false or // a callback function per item to generate. nav: true, // Should there be left/right arrows to go back/forth? // -> This isn't keyboard support. // Either set true/false, or an object with the HTML // elements for each arrow like below: arrows: { prev: '<a class="' + self._ + '-arrow prev">←</a>', next: '<a class="' + self._ + '-arrow next">→</a>' }, // How should Unslider animate? // It can do one of the following types: // "fade": each slide fades in to each other // "horizontal": each slide moves from left to right // "vertical": each slide moves from top to bottom animation: 'horizontal', // If you don't want to use a list to display your slides, // you can change it here. Not recommended and you'll need // to adjust the CSS accordingly. selectors: { container: 'ul:first', slides: 'li' }, // Do you want to animate the heights of each slide as // it moves animateHeight: false, // Active class for the nav activeClass: self._ + '-active', // Have swipe support? // You can set this here with a boolean and always use // initSwipe/destroySwipe later on. swipe: true }); });
Changelog:
2020-12-15
- Fixed Demo & Download link. Thanks to @Chris Lashmar.
2017-08-16
- Add noloop functionality, doesn't work when infinite option is true.
2016-02-06
- Correct swiping behavior
2016-02-03
- CommonJS compatible
2016-01-14
- Remove wrong variable
2016-01-09
- use child selector instead of descendant selector
2016-01-02
- JS update.
2015-12-24
- JS update.
2015-12-11
- fixed Modifying arrows
2015-11-21
- check slide position and swipe threshold before reverting slide back
- add vertical animation support and some optimisation
2015-04-12
- use triple equals & clean up some comparisons
This awesome jQuery plugin is developed by idiot. For more Advanced Usages, please check the demo page or visit the official website.