https://github.com/piyushchauhan2011/vue-simple-slider
Vue slider component with touch and mouse support. Only JSX
https://github.com/piyushchauhan2011/vue-simple-slider
carousel component jsx slider vuejs vuejs2
Last synced: 3 months ago
JSON representation
Vue slider component with touch and mouse support. Only JSX
- Host: GitHub
- URL: https://github.com/piyushchauhan2011/vue-simple-slider
- Owner: piyushchauhan2011
- License: mit
- Archived: true
- Created: 2017-06-12T18:45:33.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2017-06-12T20:19:02.000Z (almost 8 years ago)
- Last Synced: 2025-02-28T09:33:24.731Z (3 months ago)
- Topics: carousel, component, jsx, slider, vuejs, vuejs2
- Language: JavaScript
- Homepage:
- Size: 27.3 KB
- Stars: 18
- Watchers: 4
- Forks: 4
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 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
```jsx
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 (
A
B
C
D
E
)
}
}
```
## Screenshot
## Build Setup
``` bash
# 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](https://github.com/vuejs/vue-cli/blob/master/docs/build.md).
## License
vue-simple-slider is open source and released under the [MIT License](LICENSE).
Copyright (c) 2017 [Piyush Chauhan](https://twitter.com/piyushpsycho).
> *PS: I would love to know if you're using vue-simple-slider. Tweet to me at [@piyushpsycho](https://twitter.com/piyushpsycho)*.
## Credits
Shamelessy copied from react community [React Simple Slider](https://github.com/Stanko/react-slider)