carousel-component

A vuejs and reactjs carousel component.

features

• vuejs component
• reactjs component
• custom component

link css

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

vuejs component

npm i carousel-vue-component

import "carousel-vue-component";

or

<script src="./node_modules/vue/dist/vue.min.js"></script>
<script src="./node_modules/vue-class-component/dist/vue-class-component.min.js"></script>
<script src="./node_modules/carousel-vue-component/dist/carousel-vue-component.min.js"></script>

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

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

reactjs component

npm i carousel-react-component

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

or

<script src="./node_modules/react/umd/react.production.min.js"></script>
<script src="./node_modules/react-dom/umd/react-dom.production.min.js"></script>
<script src="./node_modules/carousel-react-component/dist/carousel-react-component.min.js"></script>

<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/packages/react/demo

properties and events of the component

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
npm i carousel-component

# v3
npm i carousel-vue-component
npm i carousel-react-component

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

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

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

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

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

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