0.0.14 • Published 5 years ago

cute-clever-carousel v0.0.14

Weekly downloads
4
License
MIT
Repository
github
Last release
5 years ago

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

interfacereturn value
hasNextbooleanwhether it has the next item
hasPrevbooleanwhether it has the prev item
reset()voidinitialize grid
prev()voidslide to prev item if exists
next()voidslide to next item if exists
destroy()voidremove all event listeners

Development

$ npm run watch

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

Test

$ npm test
0.0.14

5 years ago

0.0.13

5 years ago

0.0.12

5 years ago

0.0.11

7 years ago

0.0.10

7 years ago

0.0.9

7 years ago

0.0.8

7 years ago

0.0.7

7 years ago

0.0.6

7 years ago

0.0.5

7 years ago

0.0.4

7 years ago

0.0.3

7 years ago

0.0.2

7 years ago

0.0.1

7 years ago