https://github.com/katik/thumbnail-slider
thumbnail-slider is a simple slider for a list of images which can be used in photo albums likewise and has both row and column modes.
https://github.com/katik/thumbnail-slider
vue-slider
Last synced: 2 days ago
JSON representation
thumbnail-slider is a simple slider for a list of images which can be used in photo albums likewise and has both row and column modes.
- Host: GitHub
- URL: https://github.com/katik/thumbnail-slider
- Owner: katik
- Created: 2017-01-20T07:35:59.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2017-05-04T02:33:36.000Z (over 8 years ago)
- Last Synced: 2024-07-27T14:14:32.743Z (over 1 year ago)
- Topics: vue-slider
- Language: JavaScript
- Homepage: http://zhangyiji.com:3000/tn-slider
- Size: 189 KB
- Stars: 7
- Watchers: 4
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-vue-refactor - thumbnail-slider
README
# Overview
thumbnail-slider is a simple slider for a list of images which can be used in photo albums likewise.
# Install
```bash
$ npm install thumbnail-slider
```
## Import using module
Import components to your project:
```JavaScript
require('thumbnail-slider/dist/thumbnailSlider.css');
// in ES6 modules
import { TnSlider, TnItem } from 'thumbnail-slider';
// in CommonJS
const { TnSlider, TnItem } = require('thumbnail-slider');
// in Global variable
const { TnSlider, TnItem } = ThumbnailSlider;
```
And register components:
```javascript
Vue.component('tn-slider', TnSlider);
Vue.component('tn-item', TnItem);
```
## Import using script tag
``` HTML
```
```JavaScript
import { TnSlider, TnItem } from 'thumbnail-slider';
export default{
name:'app',
components: {
'tn-item': TnItem,
'tn-slider': TnSlider,
},
data() {
return{
index: 0,
slides: [
{ src: 'https://cdn.pixabay.com/photo/2016/11/07/05/13/map-1804891__480.jpg' },
{ src: 'https://cdn.pixabay.com/photo/2016/11/07/05/13/map-1804891__480.jpg' },
{ src: 'https://cdn.pixabay.com/photo/2016/11/07/05/13/map-1804891__480.jpg' },
]
}
},
methods:{
clickItem(i){
this.index = i;
},
}
};
```
# Usage
Work on a Vue instance:
```HTML
![]()
notes: blabla
```
```CSS
.customed-item {
}
.prev-icon {
}
.next-icon {
}
```
# Options
Here list Props and events on the component
| Option | Description |
| ----- | ----- |
| counts | Number(default: 1) slide items per view. |
| index | Number (default:0) - current slide item in middle |
| direction | String (default:'row') - the direction of slide, which can be 'row' or 'column' |
| animation | String (default:'ease') - now only 2 options: 'none' or 'ease' |
| animation-time | Number (default:'400') - time for animation |
| @on-item-click | function - trigged when slide item be clicked|
# Develop
```bash
$ npm run dev
$ npm run build
```
# Many thanks to
[transform.js](http://alloyteam.github.io/AlloyTouch/transformjs/)
# License
MIT