Versatile Mobile-friendly Carousel Web Component – APSlider

Preview:

Description:

APSlider is a lightweight yet robust slider/carousel web component for creating sleek, responsive, touch-enabled carousels and sliders on your web projects.

It offers adaptive height, image lazy loading for efficient page loads, and the ability to sync multiple sliders for a truly cohesive user experience.

APSlider supports swipe gestures (or disables them if preferred), mouse dragging, infinite looping, and full accessibility with arrow key navigation. You can easily add, remove, filter, and unfilter slides, and customize settings like autoplay, dots, arrows, callbacks, and more.

But that’s just the tip of the iceberg. the component also allows for the incorporation of multiple items in one slide, perfect for showcasing a set of products or images in a compact space.

How to use it:

1. Download and load the APSlider’s files.

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

2. Wrap your slides into the <ap-slider /> custom element and the library will take care of the rest.

<ap-slider>
  <p>Slide 1</p>
  <p>Slide 2</p>
  <p>Slide 3</p>
...
</ap-slider>

3. Config the slider by passing the options via the ‘data-apslider’ attribute:

<ap-slider
    data-apslider='{
      "responsive": [{
        "breakpoint": 1024,
        "settings": {
          "slidesToShow": 3,
          "slidesToScroll": 3,
          "infinite": true
        }
      },
      {
        "breakpoint": 600,
        "settings": {
          "slidesToShow": 2,
          "slidesToScroll": 2
        }
      },
      {
        "breakpoint": 480,
        "settings": {
          "slidesToShow": 1,
          "slidesToScroll": 1
        }
      }
    ]}'}>
  <p>Slide 1</p>
  <p>Slide 2</p>
  <p>Slide 3</p>
...
</ap-slider>

4. All possible options.

{
  accessibility: true,
  adaptiveHeight: false,
  appendArrows: this,
  appendDots: this,
  arrows: true,
  asNavFor: null,
  autoplay: false,
  autoplaySpeed: 3000,
  centerMode: false,
  centerPadding: '50px',
  cssEase: 'ease',
  customPaging: function (slider, i) {
    const btn = this.createElement('button', null, {
      type: 'button'
    });
    btn.innerText = i + 1;
    return btn;
  },
  dots: true,
  dotsClass: 'apslider-dots',
  draggable: false,
  easing: 'linear',
  edgeFriction: 0.35,
  fade: false,
  focusOnSelect: false,
  focusOnChange: false,
  infinite: false,
  initialSlide: 0,
  lazyLoad: 'ondemand', // or 'progressive'.
  mobileFirst: false,
  pauseOnHover: true,
  pauseOnFocus: true,
  pauseOnDotsHover: false,
  prevArrow: '<button class="apslider-prev" aria-label="Previous" type="button">Previous</button>',
  nextArrow: '<button class="apslider-next" aria-label="Next" type="button">Next</button>',
  respondTo: 'window',
  responsive: null,
  rows: 1,
  rtl: false,
  slide: '', // element query to use as slide
  slidesPerRow: 1,
  slidesToShow: 1,
  slidesToScroll: 1,
  speed: 500,
  swipe: true,
  swipeToSlide: false,
  touchMove: true,
  touchThreshold: 5,
  variableWidth: false,
  vertical: false,
  verticalSwiping: false,
  waitForAnimate: true,
  zIndex: 1000
}

5. API methods.

const myCarousel = document.querySelector('.your-carousel');
// get the current slide index
myCarousel.getCurrentSlide();
// go to a specific slide
myCarousel.goTo(index, hasAnimation);
// go to the next slide
myCarousel.next();
// go to the prev slide
myCarousel.prev();
// pause the autoplay
myCarousel.pause();
// resume the autoplay
myCarousel.play();
// add a new slide
myCarousel.addSlide(htmlOrDom, index, addBefre);
// remove a slide
myCarousel.removeSlide(index, removeBefore);
// filter slides
myCarousel.filterSlides(htmlSelector);
// unfilter slider
myCarousel.unFilterSlides();
// get option
myCarousel.getOption(option);
// update option
myCarousel.setOption(option, value, refresh);
// destroy the instance
myCarousel.destroy();
// get apslider object
myCarousel.getAPSlider();

Changelog:

09/06/2024

• AP: fixed alignement when no dots