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