vue3-infinite-slide-bar
Version:
Infinite slide bar component.
55 lines (38 loc) • 1.42 kB
Markdown
# vue3-infinite-slide-bar
Inspire by [vue-infinite-slide-bar](https://github.com/biigpongsatorn/vue-infinite-slide-bar)
<img src="https://raw.githubusercontent.com/takeokunn/vue3-infinite-slide-bar/master/ex.gif"/>
## Install
```shell
$ npm install vue3-infinite-slide-bar
```
or
```shell
$ yarn add vue3-infinite-slide-bar
```
## Usage
```html
<template>
<infinite-slide-bar :barStyle="{ background: '#42b883', padding: '5px 0' }">
<span style="color: #fff;">Helo World, I love Vue Infinite Slide Bar</span>
</infinite-slide-bar>
</template>
<script>
import { defineComponent } from 'vue';
import InfiniteSlideBar from 'vue3-infinite-slide-bar;
export default defineComponent({
components: {
'infinite-slide-bar': InfiniteSlideBar
}
})
</script>
```
## ️ Props
| Props | Type | Default | Description |
| ----------- |:--------------| ---------|--------------|
| barStyle | Object | - | Customize style of slide bar |
| duration | String | 12s | Speed of animation |
| direction | String | normal | Direction of animation (`normal`, `reverse`) |
| delay | String | 0s | Delay time before animation start |
| paused | Boolean |false |Specifies whether the animation is paused or running|
## LICENSE
[MIT](https://github.com/takeokunn/vue3-infinite-slide-bar/blob/master/LICENSE)