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 ></Indicator>
    <Arrow.Prev ></Arrow.Prev>
    <Arrow.Next ></Arrow.Next>
  </Erizabesu>
);

Props