0.0.14 • Published 5 years ago
cute-clever-carousel v0.0.14
cute-clever-carousel
This library doesn't have much function as yet. Rather than a carousel, it is a scroll box with a grid.
Sample
https://noradium.github.io/cute-clever-carousel/sample/dist
Usage
Install
$ npm install --save cute-clever-carousel
HTML Markup
<div class="carousel">
<div class="ccc-frame">
<div class="ccc-items">
<img src="https://placehold.jp/150x200.png?text=1" alt="">
<img src="https://placehold.jp/150x200.png?text=2" alt="">
<!-- ... -->
</div>
</div>
</div>
Required styles
.ccc-frame {
overflow: hidden;
}
.ccc-items {
position: relative;
white-space: nowrap;
}
.ccc-items > * {
display: inline-block;
}
js
import Carousel from 'cute-clever-carousel';
new Carousel(document.getElementsByClassName('carousel')[0], {/* options */});
Options
see src/Options.ts
APIs
interface | return value | |
---|---|---|
hasNext | boolean | whether it has the next item |
hasPrev | boolean | whether it has the prev item |
reset() | void | initialize grid |
prev() | void | slide to prev item if exists |
next() | void | slide to next item if exists |
destroy() | void | remove all event listeners |
Development
$ npm run watch
$ cd sample
$ sudo npm run start
$ open http://localhost
Test
$ npm test