js-iz-slider
v1.0.15
Published
slider, which will compete your skills, while you trying to set this up
Downloads
8
Readme
jsIzSlider
Simple and lightweight pure js slider, the sponsor of your headache while installing and setting this up.
Installation
npm
npm install js-is-slider
cdn
<script src="https://unpkg.com/[email protected]/dist/izSlider.min.js"></script>
Usage
javascript
npm
import {IsSlider} from 'js-iz-slider'
const slider = new IsSlider('.easy-slider-container', {
slidesToScroll: 1,
slidesToShow: 3,
slidesGrow: true,
slideDuration: 200,
userSelect: false
})
cdn
const slider = new jsIsSlider.IsSlider('.easy-slider-container', {
slidesToScroll: 1,
slidesToShow: 3,
slidesGrow: true,
slideDuration: 200,
userSelect: false
})
html
<!-- Slider instance container -->
<div class="easy-slider-container">
<!-- Slides wrapper -->
<div>
<!-- Slides -->
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
</div>
Options
- slidesToScroll: number - amount of slides to scroll by single iteration
- slidesToShow: number - amount of slides to show on one page between iterations
- slidesGrow: boolean - is every slide takes as much width as it can
- slideDuration: number - time which slider takes to do single iteration (ms) (buggy)
- userSelect: boolean - is user can select slides content (buggy)
Soon features
- Buttons to scroll
- Pagination
- Vertical slider
- Mobile breakpoints
Default options
"slidesToScroll": 1, "slidesToShow": 3, "slidesGrow": true, "slideDuration": 200, "userSelect": false