This time I will share jQuery Plugin and tutorial about Smooth jQuery Based Accordion-style Image Slider – Accordion.js, hope it will help you in programming stack.
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:
3 |
<li style="background:url(1.jpg) -25px 0 no-repeat"></li> |
4 |
<li style="background:url(2.jpg) -25px 0 no-repeat"></li> |
5 |
<li style="background:url(3.jpg) -25px 0 no-repeat"></li> |
6 |
<li style="background:url(4.jpg) -25px 0 no-repeat"></li> |
7 |
<li style="background:url(5.jpg) -25px 0 no-repeat"></li> |
2. The basic CSS styles.
12 |
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.
1 |
<script src="//code.jquery.com/jquery.min.js"></script> |
2 |
<script src="src/jquery.accordion.js"></script> |
4. Call the plugin with options on the top container.
1 |
$('.mySlider').accordion({ |
5. Call the plugin with options on the top container.
1 |
$('.mySlider').accordion({ |
6. Change the default animation speed.
1 |
$('.mySlider').accordion({ |
This awesome jQuery plugin is developed by Sunnyson303. For more Advanced Usages, please check the demo page or visit the official website.
