A Vue.js add-on to slide your text. demo
npm i -D vue-textra
Then inside your project, start using it:
import Vue from 'vue'
import App from './App.vue'
import Textra from 'vue-textra'
Vue.use(Textra);
new Vue({
el: '#app',
render: h => h(App)
})To use inside browser:
<script src='https://cdn.jsdelivr.net/npm/vue-textra@latest/dist/textra.min.js'></script>Then:
Vue.use(Textra);Inside any of your components:
<textra :data='words' :timer="4" filter="flash" />And in your instance data:
//...
data () {
return {
words: ["My text to show", "Great news here!", "Vue is great", "Sample Text"]
}
}
//...Another example :
<textra :data='words' :timer="3.1" :infinite='true' filter="left-right" />This one will loop around for ever.
Type : Array Description : Should be array of things you want to slide.
Type : Number
Description : Defines gap between each slide as second.
Default : 2
Type : String
Description : Defines type of filter you want to use when sliding.
Default : simple
Type : Boolean
Description : Defines whether your slider should keep looping or not.
Default : false
There are 9 types of filters available for now:
simplebottom-toptop-bottomright-leftleft-rightpressscaleflashflip