Touch-friendly Photo Slider/Gallery With Image Zoom – Product Carousel

Install & Download:

# NPM
$ npm install vue-product-carousel --save

Description:

The Product Carousel component enables you to create a responsive, mobile-friendly photo gallery & image carousel on the web app.

Features:

• Image zoom & pan functionality.
• Supports touch swipe events.
• Thumbnail preview.
• Hot image loading.

How to use it:

1. Install and import the ProductCarousel component.

import ProductCarousel from 'vue-product-carousel'

2. Use the ProductCarousel component in the template.

<template>
  <ProductCarousel :images="images">
    Sidebar content here
  </ProductCarousel>
</template>
<script>

3. Activate the carousel and replace the images with your owns.

export default {
  components: {
    ProductCarousel,
  },
  data() {
    images: [
      '1.jpg',
      '2.jpg',
      '3.jpg',
    ]
  },
}

Preview:

Changelog:

v1.2.1 (12/03/2020)

• upgrade caniuse DB to prevent overpolyfilling
• update deps to remove audit warnings