Slippery has a few methods to connect to your project: CDN, npm or downloading latest release.
For using slippery with CDN you need to include CSS in your <head>
tag.
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/[email protected]/dist/css/slippery.min.css">
Also needed inclusion Javascript before closing <body>
tag.
<script src="//cdn.jsdelivr.net/npm/[email protected]/dist/js/slippery.min.js"></script>
Firstly install slippery package from npm.
npm i -D slippery
In your Javascript file import slippery.
import Slippery from 'slippery';
Then move slippery.min.js from directory /node_modules/slippery/dist/js/ in your project folder.
Include this one before closing <body>
tag
<script src="/path/to/dir/slippery.min.js"></script>
Import slippery.min.css in your Sass/SCSS file using @import
.
@import "/node_modules/slippery/dist/css/slippery.min.css"
If you're using another preprocessor, use equivalent of it.
Then just include slippery.min.css inside of <head>
tag.
<link rel="stylesheet" href="/path/to/dir/slippery.min.css">
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.
<link rel="stylesheet" href="/path/to/dir/slippery.min.css">
Also include slippery.min.js before closing tag.
<script src="/path/to/dir/slippery.min.js"></script>
<div class="slippery">
<div class="slippery__item">Slide 1</div>
<div class="slippery__item">Slide 2</div>
<div class="slippery__item">Slide 3</div>
</div>
After including slippery with one of methods and adding HTML markup.
Initialize slippery instance in your Javascript file or inside <script>
tag.
const slippery = new Slippery('.slippery');
After that slippery instance will be initialized with default 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 = new 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,
},
},
});