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.

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

Development

$ npm run watch

$ cd sample
$ sudo npm run start
$ open http://localhost

Test

$ npm test