Vue Simple Slider

vue-simple-slider

Vue slider component with touch and mouse support.

Modern browsers and IE10+ (IE9 should work, but as flex is not supported you'll need to change CSS).

Features

Lightweight, no dependencies
Navigation, pager and arrows
Swipe and Mouse support, with velocity detection
Works only with JSX syntax currently

Usage

import 'node_modules/vue-simple-slider/dist/Slider.css'
import Slider from 'vue-simple-slider'

const style = {
  height: '250px',
  display: 'flex',
  justifyContent: 'center',
  alignItems: 'center',
  color: '#fafafa'
}

export default {
  components: {
    Slider
  },
  render(h) {
    return (
      <Slider>
        <div style={{ background: '#21BB9A', ...style }}>
          <h1>A</h1>
        </div>
        <div style={{ background: '#329ADD', ...style }}>
          <h1>B</h1>
        </div>
        <div style={{ background: '#9A5CB9', ...style }}>
          <h1>C</h1>
        </div>
        <div style={{ background: '#E64C3C', ...style }}>
          <h1>D</h1>
        </div>
        <div style={{ background: '#2D3F52', ...style }}>
          <h1>E</h1>
        </div>
      </Slider>
    )
  }
}

Screenshot

Build Setup

# install dependencies
npm i -g vue-cli
npm install

# serve with hot reload at localhost:4000
npm run dev

# build for production with minification
npm run build

For detailed explanation on how things work, consult the docs for vue-build.