GitHub - terrylinooo/sliderm.js: A carousel & slider JavaScript library.
source link: https://github.com/terrylinooo/sliderm.js
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
Sliderm is a slider & carousel JavaScript library. The packed size of sliderm.js
is less than 19 KB, lightweight but feature-rich.
- Dependency-free.
- Code quality check passed and fully tested with 100% coverage rate.
- Flexible, easy to extend by writing your own extensions.
Documentaion
Features
- Design for mobile devices:
- Multiple breakpoints.
- Touch to swipe.
- Preview the edge of the previous and next slide items.
- Autoplay.
- Infinite loop.
- Slide grouping items or single one.
- and more... check out configuration options for more details.
Getting started
Install
npm install sliderm
Import
import Sliderm from 'sliderm';
import 'sliderm/src/assets/scss/index.scss';
Examples
The HTML makeup is required for intializing sliderm.
<div class="sliderm your-class-name">
<div class="sliderm__slider">
<div class="sliderm__slides">
<div class="sliderm__slide"><img src="./demo/1.jpg" /></div>
<div class="sliderm__slide"><img src="./demo/2.jpg" /></div>
<div class="sliderm__slide"><img src="./demo/3.jpg" /></div>
<div class="sliderm__slide"><img src="./demo/4.jpg" /></div>
<div class="sliderm__slide"><img src="./demo/5.jpg" /></div>
</div>
</div>
</div>
JavaScript
const sliderm = new Sliderm('.your-class-name', {
arrow: true,
pagination: true,
grouping: false,
loop: true,
preview: false,
columns: 4,
duration: 1000,
spacing: 10,
align: 'center',
});
sliderm.on('slide.start', () => {
console.log('Just starting to slide!');
});
sliderm.on('slide.end', () => {
console.log('The slider is stopped.');
});
The detailed demonstrations will be put on the official documentation website.
License
Author: Terry L. Sliderm's license in under MIT, you can do anything you want on using this JavaScript library.
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK