A Vue2 Plugin For Images Shown In Gallery or Carousel

v-gallery is a Vue 2 plugin to display your photos in a gallery or carousel.

vue js slider carousel, vue carousel multiple items, vue carousel with thumbnails, vue carousel slider, vue carousel examples, vue image slider

Table of Contents

How to make use of it:

Install

npm i -S v-gallery

Include a plugin in your project entry main.js file.

import Vue from 'vue'
import vGallery from 'v-gallery'
Vue.use(vGallery)

Usage

<template>
  <!-- default gallery mode -->
  <v-gallery :images="list"  >
  </v-gallery>
</template>

<script>
export default {
  data(){
    return {
      list: [
        {title:'Image1',url:'http://xxx.com/1.jpg'},
        {title:'Image2',url:'http://xxx.com/2.jpg'},
        {...}
      ]
    }
  }
}
</script>

Options

name	type	description	required	default
type	String	display mode `gallery` `carousel`	false	gallery
images	Array	images source, data format like this `[ { title: 'img1', url:'http://image_url', thumbnail:'http://image_thumbnail' }, {...} ]`	true
control-pause	Boolean	the show pause button in gallery or carousel mode controls	false	false
control-title	Boolean	show image title in galley or carousel mode controls	false	true
dark	Boolean	gallery mode dark theme	false	false
caption	Boolean	gallery mode image show caption block	false	false