Automatic Accordion Slider Plugin For jQuery - Accordion.js

A minimal horizontal accordion slider plugin that automatically expands slides in sequence and also allows to switch slides manually on mouse hover.

How to use it:

1. Create a list of images (or any other elements) and insert them into the accordion slider.

<div class="accordion">
  <li><img src="1.jpg" alt=""></li>
  <li><img src="2.jpg" alt=""></li>
  <li><img src="3.jpg" alt=""></li>
  <li><img src="4.jpg" alt=""></li>
  <li><img src="5.jpg" alt=""></li>
  <li><img src="6.jpg" alt=""></li>
  ...
</div>

2. Include jQuery JavaScript library and the jQuery Accordion.js script on the web page.

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

3. Call the function on the top container to activate the accordion slider.

$('.accordion').accordion();

4. Then you can apply your custom styles to the accordion slider.

.accordion li {
  list-style: none;
  position: absolute;
  overflow: hidden;
}

.accordion {
  width: 700px;
  height: 300px;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
}

---

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