Slider.js: Reference Manual & API Guide

1. Installation & Setup

# Install via NPM
npm install @modracx/slider-js

# Or include via CDN script tag
<script src="https://cdn.jsdelivr.net/npm/@modracx/slider-js/dist/slider.min.js"></script>

2. HTML Structure

<div class="slider" id="featured-carousel">
  <div class="slider-track">
    <div class="slider-slide">Slide Content 1</div>
    <div class="slider-slide">Slide Content 2</div>
    <div class="slider-slide">Slide Content 3</div>
    <div class="slider-slide">Slide Content 4</div>
  </div>
  <button type="button" class="slider-prev" aria-label="Previous">‹</button>
  <button type="button" class="slider-next" aria-label="Next">›</button>
  <div class="slider-dots"></div>
</div>

import { Slider } from '@modracx/slider-js';

const carousel = new Slider('#featured-carousel', {
  slidesPerView: 1,
  spaceBetween: 16,
  loop: true,
  autoplay: {
    delay: 4500,
    pauseOnHover: true
  },
  breakpoints: {
    640: {
      slidesPerView: 2,
      spaceBetween: 20
    },
    1024: {
      slidesPerView: 3,
      spaceBetween: 24
    }
  }
});

3. Options & Configuration Matrix

4. Programmatic API Methods

// Slide Navigation
carousel.slideNext();
carousel.slidePrev();
carousel.slideTo(2); // 0-indexed jump

// Autoplay Controls
carousel.startAutoplay();
carousel.stopAutoplay();

// Update Layout on dynamic resize / DOM insertion
carousel.update();

// Cleanly destroy and remove event listeners
carousel.destroy();