Minimal Elegant Accordion Slider with jQuery and CSS3

A minimalist jQuery accordion plugin for creating a responsive accordion style slider from a list of images that auto expand on mouse hover.

Basic usage:

1. Create a list of images for the accordion slider.

<div class="accordion" id="demo">
  <ul class="accordion__ul">
    <li class="accordion__li">
      <img class="accordion__img" src="1.png" alt="Image 1">
    </li>
    <li class="accordion__li">
      <img class="accordion__img" src="2.png" alt="Image 2">
    </li>
    <li class="accordion__li">
      <img class="accordion__img" src="3.png" alt="Image 3">
    </li>
    ...
  </ul>
</div>

2. Add the following CSS snippets into your document.

.accordion {
  height: 300px;
  overflow: hidden;
  position: relative;
}

.accordion:after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: #fff;
}

.accordion._create:after { display: none; }

.accordion__ul {
  display: block;
  list-style: none;
  margin: 0;
  padding: 0;
  width: 9999px;
  height: 300px;
  overflow: hidden;
  position: absolute;
  left: 0;
  top: 0;
}

.accordion__li {
  display: block;
  list-style: none;
  margin: 0;
  padding: 0;
  height: 300px;
  float: left;
  overflow: hidden;
  box-shadow: 0 0 10px 0 #000;
  transition: all 0.3s ease-out;
}

.accordion__img {
  display: block;
  cursor: pointer;
}

3. Load jQuery JavaScript library and other required resources at the end of the document.

<script src="lib/jquery.min.js"></script>
<script src="lib/limit.js"></script>
<script src="src/zA7n.js"></script>

4. Call the function on the top element to initialize the accordion slider plugin.

$('#demo').zA7n();

---

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