Minimal Responsive Content Slider Plugin - jQuery SliderPlex

SliderPlex is a simple, responsive jQuery content slider/carousel plugin that features auto rotation, pause on hover, navigation arrows, CSS3 animations and much more.

How to use it:

1. Make sure both the jQuery and jQuery SliderPlex plugin's files are included.

<link rel="stylesheet" href="SliderPlex.min.css">
<script src="jquery.min.js"></script>
<script src="SliderPlex.js"></script>

2. Create an html list of html contents for the slider.

<div class="slider slider-plex">
  <ul>
      <li>
          <img src="0.jpg">
      </li>
      <li>
          <img src="1.jpg">
      </li>
      <li>
          <img src="2.jpg">
      </li>
      ...
  </ul>
</div>

3. Initialize the responsive slider with default options.

$('.slider').SliderPlex();

4. Possible plugin options to customize the slider.

$('.slider').SliderPlex({

  // in seconds
  interval: 8,

  // enable auto play
  autoPlay: true,

  // or 'slide', 'zoom'
  transition: 'fade',

  // in seconds
  transitionTime: .5,

  // false = left
  direction: 'right',

  // enables navigation arrows
  arrows: true,
  nonFocusArrows: false,

  // auto pause
  pauseOnMouseOver: false,
  pauseOnMouseDown: true,

  // fill container's space
  fillSpace: false
  
});

---

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