ultrasites-vue-slider

This is a dynamic content slider based on the Vue framework. You can render any contents, like texts, images or other ones. The slider is developed as a Vue component.

Changelog

https://github.com/ultrasites/ultrasites-vue-content-slider/wiki/Changelog

Dependencies

Vue

Example

Live Example on: https://jsfiddle.net/1qc6o4gk/1/

Create a Vue object with your own settings.

new Vue({
             el: '#default-slider',
             data: {
                 settings:{
                     leftArrow: 'content for the left arrow',
                     rightArrow: 'content for the right arrow',
                     slides:[
                         {
                             slide:'some content'
                         },
                         {
                             slide:'some content'
                         },
                         {
                             slide:'some content'
                         },
                         {
                             slide:'some content'
                         }
                     ]
                 }
             }
         });

Paste this in your HTML-Code. The Slider has a settings directive.

<ultrasites-vue-content-slider :settings="settings"></ultrasites-vue-content-slider>

Parameters

showArrows:boolean

TRUE = show the arrows on left and right
FALSE = hide the arrows on left and right

showState:boolean

TRUE = show the states
FALSE = hide the states

leftArrow:string

Any content as left arrow.

rightArrow:string

Any content as right arrow.

timer:boolean

TRUE = the interval to switch the slides is active

duration:number

Waiting time on current slide, when the timer is active

speed:number

Animationspeed between two slides.

slides[]:array

Slides of content.

ToDo next Version to start

Contact

Ultra Sites Medienagentur
Pfingstanger 15
34434 Borgentreich GERMANY

http://www.ultra-sites.de