3.4.1 • Published 6 years ago
carousel-react-component v3.4.1
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
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
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";