Skip to content
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.
JavaScript Vue
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.

Files

Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
demo
dist
src
.babelrc
.gitignore
README.md
package.json
webpack.config.js
webpack.demo.config.js

README.md

Overview

thumbnail-slider is a simple slider for a list of images which can be used in photo albums likewise.

Install

$ npm install thumbnail-slider

Import using module

Import components to your project:

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:

Vue.component('tn-slider', TnSlider);
Vue.component('tn-item', TnItem);

Import using script tag

<link rel="stylesheet" href="../node-modules/thumbnail-slider/dist/thumbnailSlider.css" charset="utf-8">
<script src="../node-modules/thumbnail-slider/dist/thumbnailSlider.min.js"></script>
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:

<tn-slider class='wrapper' :index='index' :count='6'>
      <p slot='tn-prev' class='prev-icon'>prev</p>
      <tn-item v-for='(slide,i) in slides' @on-item-click='clickItem(i)'>
          <div class='customed-item'>
            <img :src="slide.src">
              <p>notes: blabla</p>
          </div>
      </tn-item>
      <p slot='tn-next' class='next-icon'>next</p>
</tn-slider>
.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

$ npm run dev
$ npm run build

Many thanks to

transform.js

License

MIT

You can’t perform that action at this time.