Easy Responsive Slider Plugin With jQuery - mixslider
File Size: | 448 KB |
---|---|
Views Total: | 1212 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
mixslider is an easy, responsive, flexible and extendable jQuery content slider/carousel plugin that work with mouse, touch, and keyboard interactions.
Features:
- Auto rotation.
- Custom keyboard binding.
- Custom navigation controls.
- Auto sets the height to the current slide.
- Right-to-left (RTL) support.
How to use it:
1. Load the needed jQuery library and the jQuery mixslider plugin's files in the webpage.
<script src="//code.jquery.com/jquery.min.js"></script> <script src="/path/to/mixslider.js"></script> <link rel="stylesheet" href="/path/to/mixslider.css">
2. Load the Velocity.js library for fast, smooth animations if needed (OPTIONAL).
<script src="/path/to/velocity.js"></script>
3. Load the following JS libraries for touch & mouse drag support (OPTIONAL).
<script src="jquery.event.move.js"></script> <script src="jquery.event.swipe.js"></script>
4. The HTML structure. You're able to embed any HTML content to the slider as this:
<div class="my-slider"> <ul> <li>My slide</li> <li>Another slide</li> <li>My last slide</li> </ul> </div>
5. Active the slider plugin and you're done.
$('.my-slider').mixslider();
6. Possible plugin options to customize the slider.
$('.my-slider').mixslider({ // 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">Prev</a>', next: '<a class="' + self._ + '-arrow next">Next</a>' }, // How should Mixslider 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, // Swipe threshold - // lower float for enabling short swipe swipeThreshold: 0.2 });
7. API methods.
var mySlider = $('.my-slider').mixslider(); // re-calculates the slides mySlider.mixslider('calculateSlides'); // starts the slider mySlider.mixslider('star'); // stops the slider mySlider.mixslider('stop'); // sets index mySlider.mixslider('setIndex'); // animates to a specific slide mySlider.mixslider('animate:2'); // next slide mySlider.mixslider('next'); // previous slide mySlider.mixslider('prev');
8. Events.
var mySlider = $('.my-slider').mixslider(); mySlider.on('mixslider.ready', function() { // when ready }); mySlider.on('mixslider.change', function(event, index, slide) { // on each sliding });
Change log:
2017-04-20
- CSS update
This awesome jQuery plugin is developed by xmissra. For more Advanced Usages, please check the demo page or visit the official website.