SuperSlider Masterpiece Demo

1. Image Slider

This is a standard image slider with autoplay, loop, arrows, pagination, and centered mode enabled.

JS Initialization:

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

2. Box Slider

This slider uses HTML boxes instead of images. Shows that SuperSlider works with any HTML content.

JS Initialization:

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

3. Markup Structure

Basic HTML structure required for SuperSlider:

<div class="super-slider" id="sliderID">
    <div class="super-slider-wrapper">
        <div class="super-slide">Your Content</div>
        <div class="super-slide">Your Content</div>
    </div>
    <div class="super-slider-pagination"></div>
    <div class="super-slider-arrows"></div>
</div>

Notes:

.super-slider-wrapper must contain all slides.
.super-slide can contain any HTML (images, divs, etc.).
Pagination and arrows are optional, plugin will create or bind automatically if specified in options.