erizabesu's Introduction

Erizabesu(エリザベス)

Carousel component built with Preact.

Install

npm

npm install erizabesu
npm install erizabesu-indicators # optional
npm install erizabesu-arrows # optional

yarn

yarn add erizabesu
yarn add erizabesu-indicators # optional
yarn add erizabesu-arrows # optional

Demos

Simple Slider

Usage

import { h } from 'preact';
import Erizabesu from 'erizabesu';
import { Simple as Indicator } from 'erizabesu-indicators';
import { Simple as Arrow } from 'erizabesu-arrows';

const data = [
  {
    img: 'https://res.cloudinary.com/demo/image/upload/w_600,h_300/sample.jpg',
    href: 'http://gintama.wikia.com/wiki/Elizabeth',
    target: '_blank',
  },
  {
    img: 'https://res.cloudinary.com/demo/image/upload/w_600,h_300/dog.jpg',
    href: 'http://gintama.wikia.com/wiki/Elizabeth',
    target: '_blank',
  },
  {
    img: 'https://res.cloudinary.com/demo/image/upload/w_600,h_300/group.jpg',
    href: 'http://gintama.wikia.com/wiki/Elizabeth',
    target: '_blank',
  },
  {
    img: 'https://res.cloudinary.com/demo/image/upload/w_600,h_300/bike.jpg',
    href: 'http://gintama.wikia.com/wiki/Elizabeth',
    target: '_blank',
  },
  {
    img: 'https://res.cloudinary.com/demo/image/upload/w_600,h_300/woman.jpg',
    href: 'http://gintama.wikia.com/wiki/Elizabeth',
    target: '_blank',
  },
];

const SimpleSlider = () => (
  <Erizabesu data={data} style={{ width: '600px', height: '300px' }}>
    <Indicator />
    <Arrow.Prev />
    <Arrow.Next />
  </Erizabesu>
);

Props

Props	Type	Default Value	Description
`autoplay`	`bool`	`true`
`autoplaySpeed`	`int`	`3000`	Delay between each auto scroll (in milliseconds)
`allowMouseSwipe`	`bool`	`true`
`data`	`array`	`null`	[{img:'url',href:'url',target:'_blank'},{},{},...]
`infinite`	`bool`	`true`	swipe infinitely

Recommend Projects