https://github.com/shredderming/erizabesu

Carousel component built with Preact
https://github.com/shredderming/erizabesu

carousel preact preact-components

Last synced: 11 days ago
JSON representation

Carousel component built with Preact

• Host: GitHub
• URL: https://github.com/shredderming/erizabesu
• Owner: ShredderMing
• Created: 2017-10-15T02:42:54.000Z (about 7 years ago)
• Default Branch: master
• Last Pushed: 2023-01-06T01:56:42.000Z (almost 2 years ago)
• Last Synced: 2024-10-29T11:12:11.194Z (2 months ago)
• Topics: carousel, preact, preact-components
• Language: JavaScript
• Homepage:
• Size: 585 KB
• Stars: 1
• Watchers: 1
• Forks: 1
• Open Issues: 34
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        


  





	Erizabesu(エリザベス)

	 



Carousel component built with Preact.


---

## Install

**npm**

```sh

npm install erizabesu

npm install erizabesu-indicators # optional

npm install erizabesu-arrows # optional

```

**yarn**

```sh

yarn add erizabesu

yarn add erizabesu-indicators # optional

yarn add erizabesu-arrows # optional

```

## Demos

- [**Simple Slider**](https://codepen.io/ShredderMing/pen/baRvKd)

## Usage

```js

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 = () => (

  

    

    

    

  

);

```

## 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                                   |