Simple, mobile-first, dependency-free image slider with CSS-only animations
To install using npm:
npm install pi-slider
Or just clone/download the repo and do what you want
Import these files via module bundler
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!
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
slider.activeIndex // Index of active item
slider.currentSlide // Active HTML element
slider.slides // Array of HTML slides
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.
Hey, it's my first library after a few years of coding. Just saying.
MIT