README
snap-slider
Lightweight, easily customizable slider.
Browser support
IE |
Edge |
Firefox |
Chrome |
Safari |
---|---|---|---|---|
None | 76+ | 68+ | 69+ | 11+ (partial*) |
Install
$ npm install snap-slider
Demo
https://ryanwalters.github.io/snap-slider/
Options
Options marked with an asterisk (*) are required
Option Name | Type | Default | Description |
---|---|---|---|
$slider * |
Element |
none | The element containing the slides. |
$buttonPrev |
Element |
<button> |
Custom previous button. |
$buttonNext |
Element |
<button> |
Custom next button. |
$track |
Element |
<div> |
Allows the use of a custom element to be used for the track that contains the slides. Useful, for example, for composing React components. |
scrollRatio |
number |
1 |
The percentage of the track that should be scrolled. Example: a value of 0.75 will scroll 75% of the width of the container. |
Usage
<button class="custom-previous-button">
<i class="material-icons">keyboard_arrow_left</i>
</button>
<div id="your-slider">
<img src="//placehold.it/300x300" alt="fancy image" />
<img src="//placehold.it/300x300" alt="fancy image" />
<img src="//placehold.it/300x300" alt="fancy image" />
<img src="//placehold.it/300x300" alt="fancy image" />
<img src="//placehold.it/300x300" alt="fancy image" />
</div>
<button class="custom-next-button">
<i class="material-icons">keyboard_arrow_right</i>
</button>
import { SnapSlider } from 'snap-slider';
import 'snap-slider/src/snap-slider.css';
const { $track } = new SnapSlider({
$slider: document.querySelector('#your-slider'),
$buttonPrev: document.querySelector('.custom-previous-button'), // Optional
$buttonNext: document.querySelector('.custom-next-button'), // Optional
scrollRatio: 0.5, // Optional
});
// $track is an HTMLElement, so you have access to all the standard JS methods and properties
// Examples:
// Append
$track.append(document.querySelector('.new-slide')); // Single slide
$track.append(...document.querySelectorAll('.more-slides')); // Multiple slides
// Prepend
$track.prepend(document.querySelector('.new-slide')); // Single slide
$track.prepend(...document.querySelectorAll('.more-slides')); // Multiple slides
The children of #your-slider
can be anything (e.g. div
, picture
, whatever), not only img
elements.
*Partial Safari support refers to the scrollBy method's ScrollToOptions parameter not being supported. This prevents the smooth scrolling behavior. The smoothscroll-polyfill can be used until Safari has proper support.