August 16, 2022

A Vue2 Plugin For Images Shown In Gallery or Carousel | v-gallery

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

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

nametypedescriptionrequireddefault
typeString

display mode

  • gallery
  • carousel
falsegallery
imagesArray

images source, data format like this

[
  {
    title: 'img1',
    url:'http://image_url',
    thumbnail:'http://image_thumbnail'
  },
  {...}
]
true 
control-pauseBooleanthe show pause button in gallery or carousel mode controlsfalsefalse
control-titleBooleanshow image title in galley or carousel mode controlsfalsetrue
darkBooleangallery mode dark themefalsefalse
captionBooleangallery mode image show caption blockfalsefalse

image gallery and carousel component, v-gallery Plugin/Github


See Demo And Download

Official Website(TerryZ): Click Here

This superior jQuery/javascript plugin is developed by TerryZ. For extra advanced usage, please go to the official website.

Share

You may also like...

Leave a Reply

Your email address will not be published.