Vue Product Carousel Save

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

Project README

Vue Product Carousel

Build Status npm Github file size npm GitHub license Vue2

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


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:

  <ProductCarousel :images="images">
    Sidebar content here
export default {
  components: {
  data() {
    return {
      images: [


Library use few browser built-ins and doesn't include polyfills for them. This ensures you don't include unnecessary polyfills in your code, as it should be the responsibility of the consuming app to include them.

Vue CLI includes them in babel config by default but here is a list (in case you what to add them manually):

# for core-js@2
es6.symbol # optional

# for core-js@3
es.symbol  # optional

For direct usage in browser consider using


# 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


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.


Open Source Agenda is not affiliated with "Vue Product Carousel" Project. README Source: probil/vue-product-carousel
Open Issues
Last Commit
2 weeks ago

Open Source Agenda Badge

Open Source Agenda Rating