Demo
https://kai-ono.github.io/lazy-slider/dest/
Browser support
- IE10 or greater
- Chrome latest
- Safari latest
- Firefox latest
- Android4.4 or greater
- iOS7 or greater
Confirmed devices
| OS | Model | Default or Safari | Chrome |
|---|---|---|---|
| Android4.0.4 | GALAXY S Ⅱ LTE | OK | OK |
| Android4.1.2 | Xperia Z | OK | OK |
| Android4.4.2 | Xperia Z2 | OK | OK |
| Android5.0 | Galaxy S5 | OK | OK |
| Android6.0.1 | Galaxy S6 | OK | OK |
| Android8.0.0 | Xperia XZ | -- | OK |
| iOS5.1.1 | iPhone4S | OK | -- |
| iOS6.0 | iPhone5 | OK | -- |
| iOS7.0 | iPhone5 | OK | -- |
| iOS8.1.1 | iPhone4S | OK | -- |
Package Managers
npm install --save @kai-ono/lazy-slider
Usage
const slider = require('@kai-ono/lazy-slider');
new slider();DOM example
<link rel="stylesheet" type="text/css" href="css/lazy-slider.css"/>
<script type="text/javascript" src="js/lazy-slider.js"></script>
<div class="lazy-slider lazy-slider-style">
<ul>
<li><img src="1.jpg" /></li>
<li><img src="2.jpg" /></li>
<li><img src="3.jpg" /></li>
<li><img src="4.jpg" /></li>
<li><img src="5.jpg" /></li>
</ul>
</div>
<script type="text/javascript">
new LazySlider();
</script>Settings
| Option | Type | Default | Desctiption |
|---|---|---|---|
| class | string | 'lazy-loader' | |
| auto | boolean | true | |
| interval | integer | 3000 | |
| duration | integer | 0.5 | 500ms |
| showItem | integer | 1 | |
| slideNum | integer | showItem | |
| center | boolean | false | |
| loop | boolean | false | |
| btn | boolean | true | |
| prev | string | '' | '.prevBtn' |
| next | string | '' | '.nextBtn' |
| navi | boolean | true | |
| swipe | boolean | true |