Slippery 1.2.1
A Pure Javascript slider.
Demo
Read full documentation
Getting started
Slippery has a few methods to connect to your project: CDN, npm or downloading latest release.
CDN
For using slippery with CDN you need to include CSS in your <head> tag.
Instead x.x.x in slippery@x.x.x put version from the top readme.
Also needed inclusion Javascript before closing <body> tag.
npm
Firstly install slippery package from npm.
npm i -D slippery
Include Javascript
If you're using Webpack
In your Javascript file import slippery.
;If you're not using Javascript bundler.
Then move slippery.min.js from directory /node_modules/slippery/dist/js/ in your project folder.
Include this one before closing <body> tag
Include CSS
If you're Sass/SCSS or another CSS preprocessor.
Import slippery.min.css in your Sass/SCSS file using @import.
If you're using another preprocessor, use equivalent of it.
If you're not using CSS preprocessor.
Then just include slippery.min.css inside of <head> tag.
Release
If you don't want to use CDN and you don't use npm, then you need to download latest release
from Releases.
After that unpack archive and move CSS/JS files from slippery-x.x.x/dist/ to where you want to.
Finally include slippery.min.css inside <head> tag.
Also include slippery.min.js before closing tag.
Using
HTML Markup
Slide 1 Slide 2 Slide 3After including slippery with one of methods and adding HTML markup.
Initialize slippery instance in your Javascript file or inside <script> tag.
Initialization
const slippery = '.slippery';After that slippery instance will be initialized with default settings.
Initialization with custom settings
If you want to pass your own settings into slippery, you also need to pass an object besides passing string with CSS selector.
const slippery = '.slippery' nav: true dots: true swipes: false margins: 15 adaptiveHeight: true items: 2 transition: type: 'ease-in-out' breakpoints: 420: swipes: true nav: false ;