A lightweight, flexible, and modern JavaScript slider designed for developers. SuperSlider works out-of-the-box with responsive breakpoints, autoplay, loop, centered mode, free drag mode, RTL support, pagination, arrows, and external controls. Perfect for images, cards, or any HTML content.

• Fully responsive with breakpoints (mobile, tablet, desktop)
• Autoplay with customizable speed
• Looping slides with seamless clones
• Free drag mode (mouse & touch)
• Centered slides support
• Horizontal RTL mode
• Pagination dots
• Navigation arrows (built-in or external)
• Smooth transitions
• Easy initialization with JavaScript

Include the CSS and JS files in your project:

<link rel="stylesheet" href="super-slider.css">
<script src="super-slider.js"></script>

<div class="super-slider" id="mySlider">
    <div class="super-slider-wrapper">
        <div class="super-slide"><img src="img1.jpg" alt="Slide 1"></div>
        <div class="super-slide"><img src="img2.jpg" alt="Slide 2"></div>
        <div class="super-slide"><img src="img3.jpg" alt="Slide 3"></div>
        <!-- More slides -->
    </div>
    <div class="super-slider-pagination"></div>
    <div class="super-slider-arrows">
        <button class="super-slider-arrow super-slider-arrow-prev">←</button>
        <button class="super-slider-arrow super-slider-arrow-next">→</button>
    </div>
</div>

new SuperSlider("#mySlider", {
    autoplay: true,
    speed: 3000,
    loop: true,
    slidesPerView: { mobile: 1, tablet: 2, desktop: 3 },
    spaceBetween: { mobile: 10, tablet: 15, desktop: 20 },
    arrows: true,
    pagination: true,
    centered: false,
    freeMode: true,
    rtl: false
});

You can bind external buttons with data-controller:

<div id="prevBtn">Prev</div>
<div id="nextBtn">Next</div>

<button class="super-slider-arrow super-slider-arrow-prev" data-controller="#prevBtn"></button>
<button class="super-slider-arrow super-slider-arrow-next" data-controller="#nextBtn"></button>

• next() – Move to the next slide
• prev() – Move to the previous slide
• goTo(index, animate = true) – Go to specific slide
• goToReal(index) – Go to the real slide (ignoring clones)
• update() – Refresh slides & layout
• destroy() – Remove slider & clean DOM

Check demo.html included to see all features in action.