Accordion Slider - jQuery slider plugin

A responsive and touch-enabled jQuery accordion slider plugin that combines the functionality of a slider with that of an accordion.

The Accordion Slider is also available as a WordPress plugin.

Main features:

modular architecture
responsive
touch-swipe
CSS3 transitions
animated layers (and static)
deep linking
lazy loading
retina-enabled
video support
JavaScript breakpoints

Check the plugin's presentation page for examples and more details of the available features.

Getting started

1. Get a copy of the plugin

You can fork or download the plugin from GitHub, or you can install it through npm.

$ npm install accordion-slider

2. Load the required files

Inside the page's head tag include the accordion's CSS file.

<link rel="stylesheet" href="dist/css/accordion-slider.min.css"/>

In the page's footer, just before </body>, include the required JavaScript files.

<script type="text/javascript" src="https://code.jquery.com/jquery-3.6.2.min.js"></script>
<script src="dist/js/jquery.accordionSlider.min.js"></script>

3. Create the HTML markup

<body>
    <div id="my-accordion" class="accordion-slider">
        <div class="as-panels">
            <div class="as-panel">
                <img class="as-background" src="path/to/image1.jpg"/>
            </div>
            <div class="as-panel">
                <img class="as-background" src="path/to/image2.jpg"/>
            </div>
            <div class="as-panel">
                <img class="as-background" src="path/to/image3.jpg"/>
            </div>
            <div class="as-panel">
                <img class="as-background" src="path/to/image4.jpg"/>
            </div>
            <div class="as-panel">
                <img class="as-background" src="path/to/image5.jpg"/>
            </div>
        </div>
    </div>
</body>

The structure you see in the code above (accordion-slider > as-panels > as-panel) as well as the class names used are required.

More about the supported content (i.e., layers, html, video) in the Modules doc.

4. Instantiate the accordion

<script type="text/javascript">
    jQuery(document).ready(function($) {
        $('#my-accordion').accordionSlider();
    });
</script>

Accordion Slider has 40+ customizable options. More about this in the JavaScript API documentation.

Detailed usage instructions

Support

If you found a bug or have a feature suggestion, please submit it in the Issues tracker.

License

The plugin is available under the MIT license.

Package detail