vue-colorful-slider

An easy-to-use and quite customizable slider for Vue.js Bright colors and unusual layout will make users of your application surprised

install

npm install vue-colorful-slider

Features

• Easy to use
• Light and dark themese
• 5 ways to navigate
  • Touchpad/wheel
  • Dots
  • Keyboard Arrows
  • Slider Arrows
  • Sidebar Captions
• Breathtaking slide change 3d animation
• Support for autoplay

Usage

<template>
  <div id="app">
    <ColorfulSlider :sidebar="true">
      <Slide>
        This is a first slide 
      </Slide>
      <Slide>
        Yea, there is a second slide
      </Slide>
    </ColorfulSlider>
  </div>
</template>

<script>
import {ColorfulSlider, Slide} from 'vue-colorful-slider'
export default {
  data() {
    return {
    }
  },
  name: 'App',
  components: {
    ColorfulSlider,
    Slide
  }
}
</script>

Props

• dots - activate/deactivate dots navigation (bool)

  default: true

• arrows - activate/deactivate arrows navigation (bool)

  default: false

• light - enabling a light theme (bool)

  default: true

• autoplay - enabling slider autoplay

  default: false

• autoplaySpeed - slide change interval, ms (Number)

  default: 3000

• sidebar - activate/deactivate captions navigation (bool)

  default: false

• captions - slide names for sidebar (Array)

You must pass as many captions as slides, otherwise the missing slides will be marked with an ordinal number in the sidebar.

...
data() {
    return {
      captions: [
        'Our team',
        'About',
        'Contact us',
        'Our patreon'
      ]
    }
  },
...

• wheelActive - activate/deactivate touchpad or wheel navigation (bool)

 default: true

See source code

Ask a question