carousel-component

carousel-component

A vuejs and reactjs carousel component.

features

• vuejs component
• reactjs component
• custom component

install

npm i carousel-component

link css

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

vuejs component demo

npm i vue vue-class-component

import "carousel-component/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

reactjs component demo

import { Carousel } from "carousel-component/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

properties and events of the component

name	type	description
data	CarouselData[]	the data of the carousel
timeout	number	the animation time in milliseconds
interval	number	the movement time in milliseconds
count	number	the item count at most
width	number	width of an item
height	number	height of items

carousel data structure

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

change logs

// v2
import "carousel-component/vue";

// v1
import "carousel-component/dist/vue";