Smooth jQuery Based Accordion-style Image Slider - Accordion.js

A lightweight and CSS-less jQuery plugin used for generating a horizontal accordion-style slider where the image auto expands to the full size and collapses the others on mouse hover.

How to use it:

1. Insert your images as backgrounds to the accordion slider as follows:

<div class="mySlider">
  <ul>
    <li style="background:url(1.jpg) -25px 0 no-repeat"></li>
    <li style="background:url(2.jpg) -25px 0 no-repeat"></li>
    <li style="background:url(3.jpg) -25px 0 no-repeat"></li>
    <li style="background:url(4.jpg) -25px 0 no-repeat"></li>
    <li style="background:url(5.jpg) -25px 0 no-repeat"></li>
  </ul>
</div>

2. The basic CSS styles.

.mySlider {
  width: 1000px;
  height: 398px;
  overflow: hidden;
  margin: 0 auto;
}

.mySlider li {
  width: 166.6px;
  height: 398px;
  float: left;
  box-shadow: 0 28px 14px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}

3. Download the insert the jQuery Accordion.js script into the document.

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

4. Call the plugin with options on the top container.

$('.mySlider').accordion({
  currentWidth:'874',
  otherWidth:'25',
  itemDefautWidth:'166'
})

5. Call the plugin with options on the top container.

$('.mySlider').accordion({
  currentWidth:'874',
  otherWidth:'25',
  itemDefautWidth:'166'
})

6. Change the default animation speed.

$('.mySlider').accordion({
  currentWidth:'874',
  otherWidth:'25',
  itemDefautWidth:'166',
  speed:500
})

---

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