Author: | bqworks |
---|---|
Views Total: | 96 views |
Official Page: | Go to website |
Last Update: | June 15, 2024 |
License: | MIT |
Preview:

Description:
The Vanilla JavaScript version of the Feature-rich Accordion Slider In jQuery.
accordion-slider.js is a standalone JavaScript library for creating responsive, touch-enabled, high-performance, and rich-content accordion sliders.
More Features:
- Autoplay.
- Custom controls.
- Deep linking.
- Keyboard accessibility.
- Dynamic & static layers.
- Content lazy loading.
- Mousewheel support.
- Retina ready.
- Background swapping.
- Touch swipe support.
- Supports HTML5/Youtube/Vimeo videos.
Table Of Contents:
How to use it:
1. Install and import the accordion-slider.js.
# NPM $ npm i accordion-slider-js
// core import AccordionSlider from 'accordion-slider-js';
// optional addons import AccordionSlider, { Autoplay, Breakpoints, Buttons, DeepLinking, Keyboard, Layers, LazyLoading, MouseWheel, Retina, SwapBackground, TouchSwipe, Video} from 'accordion-slider-js';
2. Import the necessary stylesheets.
// core import 'accordion-slider-js/css';
// optional addons import 'accordion-slider-js/css/buttons'; import 'accordion-slider-js/css/layers'; import 'accordion-slider-js/css/touch-swipe'; import 'accordion-slider-js/css/video';
3. The HTML structure for the accordion slider. Available CSS classes & HTML data attributes:
- as-background
- as-background-opened
- as-panels
- as-panel
- as-video
- as-layer
- as-opened
- as-closed
- as-black: black background
- as-white: white background
- as-padding: add a 10 pixel padding to the layer
- Adds a 10 pixel padding to the layer.
- as-rounded: add rounderd corners to the layer
- as-vertical: vertical layer
- data-width
- data-height
- data-depth: z-index
- data-position: ‘topLeft’, ‘topRight’, ‘bottomLeft’ or ‘bottomRight’
- data-horizontal: a fixed value, percentage value or ‘center’
- data-vertical
- data-show-transition: ‘left’, ‘right’, ‘up’ or ‘down’
- data-show-offset
- data-show-duration
- data-show-delay
- data-hide-transition: ‘left’, ‘right’, ‘up’ or ‘down’
- data-hide-offset
- data-hide-duration
- data-hide-delay
<div id="example" class="accordion-slider"> <div class="as-panels"> <!-- Panel 1 --> <div class="as-panel"> <a href="#"> <img class="as-background" src="blank.gif" data-src="/images/image1.jpg" data-retina="/images/[email protected]"/> </a> <div class="as-layer as-closed as-white as-vertical panel-counter" data-position="bottomLeft" data-horizontal="8" data-vertical="8"> Panel 1 </div> <h3 class="as-layer as-opened as-black as-padding" data-horizontal="40" data-vertical="10%" data-show-transition="left" data-hide-transition="left"> Lorem ipsum dolor sit amet </h3> <p class="as-layer as-opened as-white as-padding hide-medium-screen" data-horizontal="40" data-vertical="22%" data-show-transition="left" data-show-delay="200" data-hide-transition="left" data-hide-delay="200"> consectetur adipisicing elit </p> <p class="as-layer as-opened as-black as-padding hide-small-screen" data-horizontal="40" data-vertical="34%" data-width="350" data-show-transition="left" data-show-delay="400" data-hide-transition="left" data-hide-delay="500"> sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p> </div> <!-- Panel 2 --> <div class="as-panel"> <a href="#"> <img class="as-background" src="blank.gif" data-src="/images/image2.jpg" data-retina="/images/[email protected]"/> </a> <div class="as-layer as-closed as-white as-vertical panel-counter" data-position="bottomLeft" data-horizontal="8" data-vertical="8"> Panel 2 </div> <div class="as-layer" data-position="bottomLeft" data-horizontal="20" data-vertical="20" data-width="100%"> <p class="as-layer as-opened as-white as-padding" data-position="bottomLeft" data-show-transition="left" data-hide-transition="up" data-show-delay="400" data-hide-delay="200"> Lorem ipsum </p> <p class="as-layer as-opened as-black as-padding hide-small-screen" data-position="bottomLeft" data-horizontal="120" data-show-transition="left" data-hide-transition="up" data-show-delay="600" data-hide-delay="100"> dolor sit amet </p> <p class="as-layer as-opened as-white as-padding hide-small-screen" data-position="bottomLeft" data-horizontal="245" data-show-transition="left" data-hide-transition="up" data-show-delay="800"> consectetur adipisicing elit. </p> </div> </div> <!-- Panel 3 --> <div class="as-panel"> <a href="#"> <img class="as-background" src="blank.gif" data-src="/images/image3.jpg" data-retina="/images/[email protected]"/> </a> <div class="as-layer as-closed as-white as-vertical panel-counter" data-position="bottomLeft" data-horizontal="8" data-vertical="8"> Panel 3 </div> <p class="as-layer as-opened as-white as-padding" data-horizontal="center" data-vertical="44%" data-show-transition="right" data-hide-transition="left" data-show-delay="500" > Lorem ipsum dolor sit amet </p> <p class="as-layer as-opened as-black as-padding hide-small-screen" data-horizontal="center" data-vertical="58%" data-show-transition="left" data-show-delay="700" data-hide-transition="right" data-hide-delay="200"> consectetur adipisicing elit </p> </div> <!-- Panel 4 --> <div class="as-panel"> <a href="#"> <img class="as-background" src="blank.gif" data-src="/images/image4.jpg" data-retina="/images/[email protected]"/> </a> <div class="as-layer as-closed as-white as-vertical panel-counter" data-position="bottomLeft" data-horizontal="8" data-vertical="8"> Panel 4 </div> <p class="as-layer as-opened as-black as-padding" data-position="bottomLeft" data-show-transition="up" data-hide-transition="down"> Lorem ipsum dolor sit amet <span class="hide-small-screen">, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span> <span class="hide-medium-screen">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</span> </p> </div> <!-- Panel 5 --> <div class="as-panel"> <a href="#"> <img class="as-background" src="blank.gif" data-src="/images/image5.jpg" data-retina="/images/[email protected]"/> </a> <div class="as-layer as-closed as-white as-vertical panel-counter" data-position="bottomLeft" data-horizontal="8" data-vertical="8"> Panel 5 </div> <p class="as-layer as-opened as-white as-padding" data-vertical="10" data-horizontal="2%" data-width="96%" data-show-transition="down" data-show-delay="400" data-hide-transition="up"> Lorem ipsum dolor sit amet <span class="hide-small-screen">, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span> <span class="hide-medium-screen">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</span> </p> </div> <!-- Panel 6 --> <div class="as-panel"> <a href="#"> <img class="as-background" src="blank.gif" data-src="/images/image6.jpg" data-retina="/images/[email protected]"/> </a> <div class="as-layer as-closed as-white as-vertical panel-counter" data-position="bottomLeft" data-horizontal="8" data-vertical="8"> Panel 6 </div> <p class="as-layer as-opened as-white as-padding" data-horizontal="10" data-vertical="10" data-width="35%"> Lorem ipsum dolor sit amet <span class="hide-small-screen">, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span> <span class="hide-medium-screen">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</span> </p> </div> <!-- Panel 7 --> <div class="as-panel"> <a href="#"> <img class="as-background" src="blank.gif" data-src="/images/image7.jpg" data-retina="/images/[email protected]"/> </a> <div class="as-layer as-closed as-white as-vertical panel-counter" data-position="bottomLeft" data-horizontal="8" data-vertical="8"> Panel 7 </div> <p class="as-layer as-opened as-black as-padding" data-position="bottomLeft" data-vertical="10" data-horizontal="2%" data-width="96%" data-show-transition="up" data-show-delay="400" data-hide-transition="down"> Lorem ipsum dolor sit amet <span class="hide-small-screen">, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span> <span class="hide-medium-screen">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</span> </p> </div> <!-- Panel 8 --> <div class="as-panel"> <a href="#"> <img class="as-background" src="blank.gif" data-src="/images/image8.jpg" data-retina="/images/[email protected]"/> </a> <div class="as-layer as-closed as-white as-vertical panel-counter" data-position="bottomLeft" data-horizontal="8" data-vertical="8"> Panel 8 </div> <h3 class="as-layer as-opened as-white as-padding" data-position="topRight" data-horizontal="7%" data-vertical="40%" data-show-transition="up" data-show-delay="500"> Lorem ipsum dolor sit amet </h3> <p class="as-layer as-opened as-black as-padding hide-medium-screen" data-position="topRight" data-horizontal="7%" data-vertical="52%" data-show-transition="up" data-show-delay="700"> consectetur adipisicing elit </p> <p class="as-layer as-opened as-white as-padding hide-small-screen" data-position="topRight" data-horizontal="7%" data-vertical="64%" data-width="350" data-show-transition="up" data-show-delay="900"> sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p> </div> <!-- Panel 9 --> <div class="as-panel"> <a href="#"> <img class="as-background" src="blank.gif" data-src="/images/image9.jpg" data-retina="/images/[email protected]"/> </a> <div class="as-layer as-closed as-white as-vertical panel-counter" data-position="bottomLeft" data-horizontal="8" data-vertical="8"> Panel 9 </div> <div class="as-layer" data-position="bottomLeft" data-horizontal="5%" data-vertical="10" data-width="90%" data-height="28%"> <p class="as-layer as-opened as-black as-padding" data-show-transition="down" data-hide-transition="up"> Lorem ipsum dolor sit amet </p> <p class="as-layer as-opened as-white as-padding hide-small-screen" data-vertical="50" data-show-transition="up" data-hide-transition="down"> consectetur adipisicing elit <span class="hide-medium-screen">, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span> </p> </div> </div> <!-- Panel 10 --> <div class="as-panel"> <a href="#"> <img class="as-background" src="blank.gif" data-src="/images/image10.jpg" data-retina="/images/[email protected]"/> </a> <div class="as-layer as-closed as-white as-vertical panel-counter" data-position="bottomLeft" data-horizontal="8" data-vertical="8"> Panel 10 </div> <div class="as-layer" data-position="bottomLeft" data-horizontal="30" data-vertical="30" data-width="70%" data-height="50%"> <h3 class="as-layer as-opened as-white as-padding" data-show-transition="left" data-hide-transition="right"> Lorem ipsum dolor sit amet </h3> <p class="as-layer as-opened as-black as-padding hide-small-screen" data-vertical="50" data-show-transition="left" data-show-delay="200" data-hide-transition="right" data-hide-delay="200"> consectetur adipisicing elit </p> <p class="as-layer as-opened as-white as-padding hide-medium-screen" data-vertical="100" data-width="350" data-show-transition="left" data-show-delay="400" data-hide-transition="right" data-hide-delay="500"> sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p> </div> </div> <!-- Panel 11 --> <div class="as-panel"> <a href="#"> <img class="as-background" src="blank.gif" data-src="/images/image11.jpg" data-retina="/images/[email protected]"/> </a> <div class="as-layer as-closed as-white as-vertical panel-counter" data-position="bottomLeft" data-horizontal="8" data-vertical="8"> Panel 11 </div> <p class="as-layer as-opened as-white as-padding" data-position="bottomLeft" data-vertical="10" data-horizontal="2%" data-width="96%" data-show-transition="up"> Lorem ipsum dolor sit amet <span class="hide-small-screen">, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span> <span class="hide-medium-screen">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</span> </p> </div> <!-- Panel 12 --> <div class="as-panel"> <a href="#"> <img class="as-background" src="blank.gif" data-src="/images/image12.jpg" data-retina="/images/[email protected]"/> </a> <div class="as-layer as-closed as-white as-vertical panel-counter" data-position="bottomLeft" data-horizontal="8" data-vertical="8"> Panel 12 </div> <div class="as-layer" data-position="topRight" data-horizontal="20" data-vertical="10%" data-width="50%" data-height="50%"> <p class="as-layer as-opened as-white as-padding" data-show-transition="right" data-hide-transition="left" data-show-delay="500"> Lorem ipsum dolor sit amet </p> <p class="as-layer as-opened as-black as-padding hide-small-screen" data-vertical="50" data-show-transition="left" data-hide-transition="right" data-show-delay="700"> consectetur adipisicing elit <span class="hide-medium-screen">, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span> </p> </div> </div> <!-- Panel 13 --> <div class="as-panel"> <a href="#"> <img class="as-background" src="blank.gif" data-src="/images/image13.jpg" data-retina="/images/[email protected]"/> </a> <div class="as-layer as-closed as-white as-vertical panel-counter" data-position="bottomLeft" data-horizontal="8" data-vertical="8"> Panel 13 </div> <div class="as-layer" data-horizontal="30" data-vertical="30" data-width="100%"> <p class="as-layer as-opened as-black as-padding" data-show-transition="left" data-hide-transition="down" data-show-delay="400" data-hide-delay="200"> Lorem ipsum </p> <p class="as-layer as-opened as-white as-padding hide-small-screen" data-horizontal="120" data-show-transition="left" data-hide-transition="down" data-show-delay="600" data-hide-delay="100"> dolor sit amet </p> <p class="as-layer as-opened as-black as-padding hide-small-screen" data-horizontal="245" data-show-transition="left" data-hide-transition="down" data-show-delay="800"> consectetur adipisicing elit. </p> </div> </div> <!-- Panel 14 --> <div class="as-panel"> <a href="#"> <img class="as-background" src="blank.gif" data-src="/images/image14.jpg" data-retina="/images/[email protected]"/> </a> <div class="as-layer as-closed as-white as-vertical panel-counter" data-position="bottomLeft" data-horizontal="8" data-vertical="8"> Panel 14 </div> <p class="as-layer as-black as-padding" data-position="bottomRight" data-horizontal="10" data-vertical="10" data-width="40%"> Lorem ipsum dolor sit amet <span class="hide-small-screen">, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span> <span class="hide-medium-screen">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</span> </p> </div> </div> </div>
4. Initialize the accordion slider.
const accordion = new AccordionSlider( '#example', { // options here });
5. Available options:
const accordion = new AccordionSlider( '#example', { // core options width: 800, height: 400, responsive: true, responsiveMode: 'auto', // 'auto' or 'custom' aspectRatio: -1, orientation: 'horizontal', // 'horizontal' or 'vertical'. startPanel: -1, openedPanelSize: 'max', maxOpenedPanelSize: '80%', openPanelOn: 'hover', closePanelsOnMouseOut: true, mouseDelay: 200, panelDistance: 0, openPanelDuration: 700, closePanelDuration: 700, pageScrollDuration: 500, pageScrollEasing: 'swing', breakpoints: null, visiblePanels: -1, startPage: 0, shadow: true, shuffle: false, panelOverlap: true, // The list of add-ons that will be initialized when the slider is initialized. addOns: [], // addon options breakpoints: null, // Sets specific breakpoints autoplay: true, autoplayDelay: 5000, autoplayDirection: 'normal', // 'normal' (ascending order) or 'backwards' (descending order). autoplayOnHover: 'pause', // 'pause', 'stop' or 'none'. mouseWheel: true, mouseWheelSensitivity: 50, mouseWheelTarget: 'panel', // 'panel' or 'page' keyboard: true, keyboardOnlyOnFocus: false, keyboardTarget: 'panel', // 'panel' or 'page' buttons: true, swapBackgroundDuration: 700, fadeOutBackground: false, touchSwipe: true, touchSwipeThreshold: 50, openPanelVideoAction: 'playVideo', // 'playVideo' or 'none' closePanelVideoAction: 'pauseVideo', // 'pauseVideo' or 'stopVideo' playVideoAction: 'stopAutoplay', // 'stopAutoplay' or 'none' pauseVideoAction: 'none', 'startAutoplay' or 'none' endVideoAction: 'none', // 'startAutoplay', 'nextPanel', 'replayVideo' or 'none' });
6. API methods:
accordion.getPanelAt( index ) accordion.accordiongetCurrentIndex() accordion.getTotalPanels() accordion.nextPanel() accordion.previousPanel() accordion.openPanel( index ) accordion.closePanels() accordion.getVisiblePanels() accordion.getTotalPages() accordion.getCurrentPage() accordion.gotoPage( index ) accordion.nextPage() accordion.previousPage() accordion.addEventListener( type, handler ) accordion.removeEventListener( type ) accordion.destroy() accordion.update() accordion.resize()
7. Events:
accordion.addEventListener('beforeInit', (event) => { // do something }); accordion.addEventListener('init', (event) => { // do something }); accordion.addEventListener('beforeUpdate', (event) => { // do something }); accordion.addEventListener('update', (event) => { // do something }); accordion.addEventListener('beforeResize', (event) => { // do something }); accordion.addEventListener('resize', (event) => { // do something }); accordion.addEventListener('accordionMouseOver', (event) => { // do something }); accordion.addEventListener('accordionMouseOut', (event) => { // do something }); accordion.addEventListener('panelClick', (event) => { // do something }); accordion.addEventListener('panelMouseOver', (event) => { // do something }); accordion.addEventListener('panelMouseOut', (event) => { // do something }); accordion.addEventListener('panelOpen', (event) => { // do something }); accordion.addEventListener('panelsClose', (event) => { // do something }); accordion.addEventListener('pageScroll', (event) => { // do something }); accordion.addEventListener('panelOpenComplete', (event) => { // do something }); accordion.addEventListener('panelsCloseComplete', (event) => { // do something }); accordion.addEventListener('pageScrollComplete', (event) => { // do something });
Changelog:
v1.0.1 (06/15/2024)
- replace top, left, bottom,right with inset in video css