trendingtechnology/vue-product-carousel

Simple product carousel with hot image replacement, Zoom and Swipe mode

Vue Product Carousel

Simple product carousel with hot image replacement, Zoom and Swipe mode

Usage

To be able to use this component you should install it first

npm i --save vue-product-carousel

Then import it:

import ProductCarousel from 'vue-product-carousel'

Use ProductCarousel component and pass your images as images prop:

<template>
  <ProductCarousel :images="images">
    Sidebar content here
  </ProductCarousel>
</template>
<script>
export default {
  components: {
    ProductCarousel,
  },
  data() {
    images: [
      'http://lorempixel.com/1000/1000/business/1/',
      'http://lorempixel.com/1000/1000/business/2/',
      'http://lorempixel.com/1000/1000/business/3/',
    ]
  },
}
</script>

Scripts

# installs dependencies
npm install

# serves demo with hot reloading
npm run serve

# builds demo
npm run build:demo

# builds lib
npm run build:lib

# lints and fixes files
npm run lint

Params

Name	Type	Default	Required	Description
images	Array	[]	true	Array of image urls that will be used in slider
body-class-on-zoom	String	zoom	false	Class that will be added to the body while Zoom mode is active. Very useful to hide header/footer in Zoom mode.

Credits

• kalicki for idea.
• thebird for Swipe lib