snap-slider

Lightweight, easily customizable slider

Usage no npm install needed!

<script type="module">
  import snapSlider from 'https://cdn.skypack.dev/snap-slider';
</script>

README

snap-slider

minified + gzip size

Lightweight, easily customizable slider.

Browser support

IE
IE
Edge
Edge
Firefox
Firefox
Chrome
Chrome
Safari
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.