Minimal Elegant Accordion Slider with jQuery and CSS3
File Size: | 8.13 KB |
---|---|
Views Total: | 6725 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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.