Horizontal Stacked Accordion Slider With jQuery And CSS3 - cascadingDivs

File Size: 7.97 KB
Views Total: 5564
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Horizontal Stacked Accordion Slider With jQuery And CSS3 - cascadingDivs

cascadingDivs is a lightweight (2kb minified) jQuery accordion plugin which makes use of CSS3 transitions to slide between a group of stacked elements just like a horizontal slider.

How to use it:

1. The plugin works with any html elements (e.g. images, text, etc). Just wrap the slider content into a DIV container as shown below and we're ready to go.

<div id="mySlider">
  <div>
    Slide 1
  </div>
  <div>
    Slide 2
  </div>
  <div>
    Slide 3
  </div>
</div>

2. Load the latest version of jQuery library before you load the jQuery cascadingDivs plugin.

<script src="//code.jquery.com/jquery-3.0.0.min.js"></script>
<script src="cascadingDivs.min.js"></script>

3. Call the function on the top container and done.

$('#mySlider').cascadingDivs();

4. Available options.

$('#mySlider').cascadingDivs({

  // jQuery selector for slide items
  divSelector: 'div'

  // transition speed
  slideTime: .5
  
});

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