dynamic content slider based on the Vue framework

Overview

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

Issues
Owner
Ultra Sites Medienagentur
Ultra Sites Medienagentur
Slider Component of Vue.js.

vue-easy-slider Keep slider simple! Demo demo Install npm i -S vue-easy-slider Usage Plugin install: import Vue from 'vue' import EasySlider from 'vue

Suhaha 325 Jul 21, 2021
animated slides in a fragmented look 🐞🌳✡️📐

vue-piece-slider (Demo) This library is a simplified Vue portal of an awesome Codrops Article by Luis Manuel (original source). In this version, just

Vincent Guo 93 Jul 16, 2021
dynamic content slider based on the Vue framework

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

Ultra Sites Medienagentur 3 Apr 28, 2017
Image slider which comes with 20 cool transitions

Documentation and demos Version 5 documentation Version 6 documentation Version 6 demos Overview This is an image slider developed with Vuejs 2 which

null 378 Jul 20, 2021
A Netflix like slider developed using Vuejs

vue-netflix-slider A Netflix like slider developed using Vuejs Demo http://vue-slider.surge.sh/ Todo Support RWD Infinity sliding Note Recommend to se

Jack Yeh 58 Jul 9, 2021
Vue的移动端Slider滑动组件。无依赖、功能单一,只有左右滑动功能。如果你需要的仅仅是一个banner,那你可能需要它!

vue-onlySlider-x 内含支持vue1和vue2版本的组件各一个 默认是vue2的组件,vue1的组件相关文件,都放在 vue1.x目录中 Vue的移动端Slider组件。无依赖、功能单一,只有左右滑动功能。如果你需要的仅仅是一个banner,那你可能需要它! DEMO 在移动端调试器或

ChongZi 34 Feb 7, 2021
Most modern mobile touch slider with hardware accelerated transitions

Get Started | Documentation | Demos Swiper Swiper - is the free and most modern mobile touch slider with hardware accelerated transitions and amazing

Vladimir Kharlampidi 28k Jul 25, 2021
🎠 A customizable accessible carousel slider optimized for Vue

Hooper Vue.js carousel component, optimized to work with Vue. Features Easily customizable through rich API and addons. Touch, Keyboard, Mouse Wheel,

Baianat 597 Jul 20, 2021
🚀 Easy to use, no need to set size, support rotation, photoswipe based vue swipe plugin

vue-pswipe a Vue plugin for PhotoSwipe without set image size online example install npm install vue-pswipe usage // main.js import Photoswipe from '

GuoQichen 81 Jul 20, 2021
🎠 A carousel component for Vue.js

vue-agile A carousel component for Vue.js inspired by Slick. Powerful, responsive, touch-friendly, with Nuxt.js SSR support, without a jQuery dependen

Łukasz Florczak 1.2k Jul 23, 2021
Vue Slider Component is based on lory

lory ☀ Touch enabled minimalistic slider for Vue, it is based on lory. Installation $ npm install vue-lory --save Examples <template> <lory :options

null 43 Jun 21, 2021
A responsive carousel(namely slider or swiper) component for Vue.js v2.x+.

vue-l-carousel A responsive carousel(namely slider or swiper) component for Vue.js v2.x+. Live demo Pull requests are welcome :) License LGPL-V3 Featu

Light Leung 56 Mar 2, 2021
🎠 ♻️ Everyday 30 million people experience. It's reliable, flexible and extendable carousel.

?? ♻️ Everyday 30 million people experience. It's reliable, flexible and extendable carousel.

NAVER 1.7k Jul 23, 2021
A slider and carousel as vue component on top of the Glide.js

Vue Glide Vue component on top of the Glide.js Documentation https://antonreshetov.github.io/vue-glide Install NPM Installing with npm is recommended

Anton Reshetov 242 Jul 16, 2021