nico-swiper
v1.1.2
Published
A swiper for web mobile
Downloads
7
Readme
NSwiper
NSwiper is a swiper plugin for mobile web (only for mobile)
Features
- Small
- Simple
- No other dependencies
Installation
$ npm install --save nico-swiper
Getting started
<div id="swiper1" class="nswiper-wrapper">
<div class="nswiper-container">
<div class="nswiper-slide">
<div class="slide">
<img src="https://wpimg.wallstcn.com/2ab21ec8-7882-4db5-b764-c6735ddc1dd1.png" alt="slide">
</div>
</div>
<div class="nswiper-slide">
<div class="slide">
<img src="https://wpimg.wallstcn.com/d1f71496-5391-412d-8386-5fcbaba276f6.jpg" alt="slide">
</div>
</div>
<div class="nswiper-slide">
<div class="slide">
<img src="https://wpimg.wallstcn.com/6342464e-71c1-497e-bebc-202910aa992c.jpg" alt="slide">
</div>
</div>
<div class="nswiper-slide">
<div class="slide">
<img src="https://wpimg.wallstcn.com/5af3a726-4d23-4cde-8364-4f1809b61f89.jpg" alt="slide">
</div>
</div>
</div>
</div>
import NSwiper from 'nico-swiper'
// or <script src="NSwiper.min.js"></script>
const swiper = new NSwiper('#swiper', {
gutter: 0, // slide gap
slideWidth: 0, // custom slide width, if not set will be parent width
defaultIndex: 0, // initial slide to show
defaultOffset: 0, // initial offset
containerClass: '.nswiper-container', // custom container class
slideClass: '.nswiper-slide', // custom container slide class
duration: 300, // slide transition duration
autoplay: 0 // must be a number, if set will swipe slide auto
onSlideChange: function(index) {} // slide changed callback, index is the current slide index
})
// next slide
swiper.goNext()
// prev slide
swiper.goPrev()
// destroy
swiper.destroy()
FAQ
how to add indicators ?
good question, we can use onSlideChange callback implement our custom indicators
custom prev next ?
use instance method goNext and goPrev, like swiper.goNext()
pc support
maybe
examples ?
check it on http://chef-salad.com/nico-swiper/
and pictures used in demo from a singer called 9m88