Feature-rich Accordion Slider In Vanilla JavaScript

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:

• Installation
• HTML Structure
• Options
• API Methods
• Events

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.2 (06/22/2024)

• change rgba to rgb in layers add-on css

v1.0.1 (06/15/2024)

• replace top, left, bottom,right with inset in video css