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

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',
    ]
  },
}

Download Details:

Author: probil

Live Demo: https://vue-product-carousel.netlify.com/

Download Link: https://github.com/probil/vue-product-carousel/archive/master.zip

Official Website: https://github.com/probil/vue-product-carousel

Last Update: September 4, 2019

Install:

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

You Might Be Interested In:

Add Comment