Easy Responsive Slider Plugin With jQuery - mixslider

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.