biigpongsatorn / vue-infinite-slide-bar Goto Github PK

View Code? Open in Web Editor NEW

241.0 6.0 24.0 2.73 MB

∞ Infinite slide bar component (no dependency and light weight 1.48 KB)

Home Page: https://biigpongsatorn.github.io/#/vue-infinite-slide-bar

License: MIT License

JavaScript 34.92% Vue 61.05% HTML 4.02%

vue infinite infinity slider bar component vue-infinite-slide slide auto autoscrolling

vue-infinite-slide-bar's Introduction

⛔️ DEPRECATED This repo has not been maintained

∞ Vue Infinite Slide Bar

🎚 Infinite slide bar component (no dependencies and light weight 1.48 KB)

👀 Document & Demo Page

LIVE DEMO

💻 Install

npm install --save vue-infinite-slide-bar

yarn add vue-infinite-slide-bar

🕹 Usage

import Vue from 'vue'
import InfiniteSlideBar from 'vue-infinite-slide-bar'

Vue.component('InfiniteSlideBar', InfiniteSlideBar)

import InfiniteSlideBar from 'vue-infinite-slide-bar'

export default {
  components: {
    InfiniteSlideBar
  }
}

🔎 Example

<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>

⚙️ 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

🤝 Contributing

Fork this repository.
Create new branch with feature name.
Run npm install and npm run dev.
Create your feature.
Commit and set commit message with feature name.
Push your code to your fork repository.
Create pull request. 🙂

⭐️ Support

If you like this project, You can support me with starring ⭐ this repository.

📄 License

MIT

Developed with ❤️ and ☕️

vue-infinite-slide-bar's People

Contributors

Stargazers

Watchers

vue-infinite-slide-bar's Issues

Implicity 'any' type

I'm creating an application with typescript and I get the following error:

Could not find a declaration file for module 'vue-infinite-slide-bar'. 'c:/.../construction/node_modules/vue-infinite-slide-bar/lib/vue-infinite-slide-bar.min.js' implicitly has an 'any' type.
Try npm i --save-dev @types/vue-infinite-slide-bar if it exists or add a new declaration (.d.ts) file containing declare module 'vue-infinite-slide-bar';

However, the command 'npm i --save-dev @types/vue-infinite-slide-bar' finds nothing.

direction column

滚动的文字过长和修改滚动的文字

三个问题：
1、如果滚动的文字过长，比展示的容器要长，那么文字会被截断
2、更换滚动的文字后，只更换一个span标签的内容，另一个重复的span标签内容没有更换
3、只能通过v-if去销毁再创建这个组件来更新滚动的文字，该组件没有提供props或者method来刷新组件。

建议给类vifnslb-container 添加css样式 display: inline-flex;和white-space: nowrap; 使得过长的文字能够展开，且根据滚动的文字的长度来实时调节动画的duration，来保持一致的动画速度。

html global with CDN

Hey,
Is there a way to using it as CDN as global script tag.
Something like this:

<html>
<head>
  ...
</head>
<body>
  <div id="app">
    <flash-message></flash-message>
  </div>

  <script src="path/to/vue.js"></script>
  <script src="path/to/vue-flash-message.js"></script>
  <script>
    new Vue({
      el: '#app'
    })
  </script>
</body>
</html>

Thank you

How to pause animation on hover

Hi,

I tried using this plugin with the pause on hover option as described in the documentation.

<infinite-slide-bar :barStyle="{padding: '40px 0' }" duration="24s" :paused="isPaused">
...
</infinite-slide-bar>

As it seems it is not working out of the box. is there something missing?

It's exactly what I'm looking for.

Thanks