cute-clever-carousel

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