Touchable & Accessible Slider JavaScript Library – galleryLib.js

Preview:

Description:

galleryLib.js is a responsive, draggable, touchable, accessible slider/carousel library for both web & mobile.

More Features:

• Accessible for screen readers
• Custom spacing between slides.
• Horizontal & Vertical alignment.
• Navigation arrows and pagination dots.

How to use it:

1. Add the galleryLib.js library to the page.

<link rel="stylesheet" href="galleryLib.css" />
<script src="galleryLib.js"></script>

2. Add slides to the slider.

<div class="slider-selector">
  <div>Slide 1</div>
  <div>Slide 2</div>
  <div>Slide 3</div>
  <div>Slide 4</div>
  <div>Slide 5</div>
  ...
</div>

3. Initialize the slider with default options.

const slider = new Gallery( ".slider-selector", {
      // options here
});

4. Available options to customize the slider.

const slider = new Gallery( ".slider-selector", {
      // space between slides
      spaceBetweenSlides: 0,
      // initial slide index
      initialSlide: 0,
      // shows pagination dots
      dots: false,
      // shows navigation arrows
      arrows: false,
      // transition speed in milliseconds
      timeBetweenSlides: 500,
      // vertical alignment
      vertical: false,
      
});

5. Customize the styles of the pagination & navigation controls.

gallery-arrows {
  /* ... */
}
gallery-arrow {
  /* ... */
}
gallery-arrow-prev {
  /* ... */
}
gallery-arrow-next {
  /* ... */
}
gallery-arrow-clicked {
  /* ... */
}
gallery-dots {
  /* ... */
}
gallery-dot {
  /* ... */
}
gallery-dot-active {
  /* ... */
}