carousel-component

A vuejs and reactjs carousel component.

install

npm i carousel-component

link css

<link rel="stylesheet" href="./node_modules/carousel-component/dist/carousel.min.css" />

vuejs component demo

npm i vue vue-class-component

import "carousel-component/dist/vue";

<carousel :data="data"
    timeout="500"
    interval="3000"
    count="5"
    width="200"
    height="150">
</carousel>

the online demo: https://plantain-00.github.io/carousel-component/demo/vue/index.html

the source code of the demo: https://github.com/plantain-00/carousel-component/tree/master/demo/vue

reactjs component demo

import { Carousel } from "carousel-component/dist/react";

<Carousel data={this.data}
    timeout={500}
    interval={3000}
    count={5}
    width={200}
    height={150}>
</Carousel>

the online demo: https://plantain-00.github.io/carousel-component/demo/react/index.html

the source code of the demo: https://github.com/plantain-00/carousel-component/tree/master/demo/react

properties and events of the component

carousel data structure

type CarouselData = {
    component: string | Function; // the item component, for vuejs, it is the component name, for reactjs, it is the class object
    data: any; // the data will be passed to the component as `data` props
};

features

• vuejs component
• reactjs component
• commonjs module
• custom component