PiSlider

Simple, mobile-first, dependency-free image slider with CSS-only animations

Instalation

To install using npm:

npm install pi-slider

Or just clone/download the repo and do what you want

Setup

Import these files via module bundler

Usage

Place the code below in your HTML

<div class="pi-slider">
    <div class="pi-slides-wrapper">
        <div class="pi-slide">
            <img src="/path-to-image/slide-1.jpg" alt="">
        </div>
    </div>
</div>

Create instance of the slider with selector and optional options

new PiSlider("selector", {options})

You're ready to go!

Options

animation: 'slide',                     // <String> - Animation name [fade, slide-h, slide-v, slide-fade-h, slide-fade-v]
reversed: false,                        // <Boolean> - Should the animation and slides queue be inverted
autoHeight: false,                      // <Boolean> - If animation is set to "fade", automatically sets slider height
navigation: true,                       // <Boolean> - Show navigation. Can be selector to place navigation in specific parent element
applyNavigationStyles: true,            // <Boolean> - Apply slider's CSS rules for navigation
pagination: true,                       // <Boolean> - Show pagination. Can be selector to place navigation in specific parent element
applyPaginationStyles: true,            // <Boolean> - Apply slider's CSS rules for pagination
appendPaginationBulletNumbers: true,    // <Boolean> - Insert index of each slide in pagination bullets
delay: 7000,                            // <Number> - Time between slides change [ms]. This option adds speed to itself
speed: 1000,                            // <Number> - Animation speed [ms]
startFrom: 0,                           // <Number> - Initial slide number (0-based)
classes: {
    activeSlide: 'is-active',           // <String> - CSS class for active slide
    showingSlide: 'is-showing',         // <String> - CSS class for showing animation
    hidingSlide: 'is-hiding'            // <String> - CSS class for hiding animation
},
beforeNext: () => {},                   // <Function> - function called before Next slide
beforePrev: () => {},                   // <Function> - function called before Previous slide
afterNext: () => {},                    // <Function> - function called after Next slide
afterPrev: () => {},                    // <Function> - function called after Previous slide

Values

slider.activeIndex // Index of active item
slider.currentSlide // Active HTML element
slider.slides // Array of HTML slides

Custom animations

It's pretty straightforward how to create your own animations for PiSlider. Just use the code below, modify it and pass your animation name to the options. The only problem is, you have to create reversed animations as well. Here's a template (SCSS) for that:

.pi-slider.my_animation_name {
    .pi-slide {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        z-index: 0;
        animation-fill-mode: forwards;
        animation-iteration-count: 1;
        &.is-showing {
            animation-name: my_animation_name-showing;
            z-index: 2;
        }
        &.is-hiding {
            animation-name: my_animation_name-hiding;
            z-index: 1;
        }
        &.is-active {
            z-index: 3;
        }
    }
    // REVERSED
    &.animation-reversed {
        .pi-slide {
            &.is-showing {
                animation-name: my_animation_name-reversed;
                z-index: 2;
            }
            &.is-hiding {
                animation-name: my_animation_name-reversed;
                z-index: 1;
            }
        }
    }
}
@keyframes my_animation_name-showing {
    0% {}
    100% {}
}
@keyframes my_animation_name-hiding {
    0% {}
    100% {}
}
// REVERSED
@keyframes my_animation_name-showing-reversed {
    0% {}
    100% {}
}
@keyframes my_animation_name-hiding-reversed {
    0% {}
    100% {}
}

Just be sure to name everything correctly.

Little info

Hey, it's my first library after a few years of coding. Just saying.

License

MIT