Versatile Mobile-friendly Carousel Web Component – APSlider

Category: Javascript , Slider | April 4, 2024
Views Total:30 views
Official Page:Go to website
Last Update:April 4, 2024


Versatile Mobile-friendly Carousel Web Component – APSlider


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.

  <p>Slide 1</p>
  <p>Slide 2</p>
  <p>Slide 3</p>

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

      "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>

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
// go to a specific slide
myCarousel.goTo(index, hasAnimation);
// go to the next slide;
// go to the prev slide
// pause the autoplay
// resume the autoplay;
// add a new slide
myCarousel.addSlide(htmlOrDom, index, addBefre);
// remove a slide
myCarousel.removeSlide(index, removeBefore);
// filter slides
// unfilter slider
// get option
// update option
myCarousel.setOption(option, value, refresh);
// destroy the instance
// get apslider object



  • CSS update

You Might Be Interested In:

Leave a Reply