Easy Flexible Content Carousel Plugin For jQuery - easyLoop

easyLoop is a simple, flexible and highly customizable jQuery slider plugin that you're able to present any content in an automatic, horizontal or vertical carousel interface.

Key features:

• Custom controls.
• Endless looping.
• Autoplay.
• Supports both horizontal and vertical sliding.
• Multiple items in one slide.

How to use it:

1. Create a group of DIV container for the carousel.

<div id="loop-demo">
  <div>Slide 1</div>
  <div>Slide 2</div>
  <div>Slide 3</div>
  <div>Slide 4</div>
  <div>Slide 5</div>
</div>

2. Create carousel controls as follows.

<button class="loop-demo__btn loop-demo__btn--prev"><</button>
<button class="loop-demo__btn loop-demo__btn--next">></button>

3. Place jQuery library and the jQuery easyLoop plugin at the bottom of the webpage.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="easyLoop.js"></script>

4. Initialize the carousel by calling the function on the top DIV element.

$('#loop-demo').easyLoop({
  itemWidth: 600,
  itemHeight: 300
});

5. Plugin's configuration options with default values.

$('#loop-demo').easyLoop({

  // x = horizontal
  // y = vertical
  axis: "x",

  // required
  itemWidth: 100,
  itemHeight: 100,

  // how many items per slide
  numPerScreen: 1,

  // duration in ms
  duration: 400,

  // autoplay options
  autoPlay: true,
  autoPlayInterval: 2000,
  autoPlayDirection: 1, // 1 or -1

  // center the div
  center: true,

  // CSS classes for carousel controls
  triggerClass: loopName + "__btn",
  triggerPrevClass: loopName + "__btn--prev",
  triggerNextClass: loopName + "__btn--next",
  wrapperClass: loopName + "__wrap",

  // debug mode
  debug: false
  
});

---

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