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.

Notifications You must be signed in to change notification settings

katik/thumbnail-slider

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

12 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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

About

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.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published