probil/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() {
    return {
      images: [
        'http://lorempixel.com/1000/1000/business/1/',
        'http://lorempixel.com/1000/1000/business/2/',
        'http://lorempixel.com/1000/1000/business/3/',
      ]
    }
  },
}
</script>

Polyfills

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.object.assign
es6.symbol # optional

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

For direct usage in browser consider using https://polyfill.io/v3/

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

vue-product-carousel's Issues

Remove polyfills from the library

Currently library includes polyfill for built-ins like Promise, Symbol or Object.assign.

But according to the Vue CLI docs:

When using Vue CLI to build a library or Web Components, it is recommended to pass useBuiltIns: false to @vue/babel-preset-app to disable automatic polyfill injection. This ensures you don't include unnecessary polyfills in your code, as it should be the responsibility of the consuming app to include polyfills.

We can cut up to 50% of the library by removing those polyfills

TODO:

• PR #18
• Remove polyfills
• Describe needed polyfills in docs
• Release (v1.1.0)

Images aren't working on Netlify

Just to let you know, your cloudinary images on Netlify (demo) are not working at the moment. They all return 404.

Action Required: Fix Renovate Configuration

There is an error with this repository's Renovate configuration that needs to be fixed. As a precaution, Renovate will stop PRs until it is resolved.

Error type: undefined. Note: this is a nested preset so please contact the preset author if you are unable to fix it yourself.

Unexpected Token

I am receiving a compiling error with the carousel.vue file.
Here is my component:

<template>
  <carousel :images="media"></carousel>
</template>
<script>
export default {
    data: function () {
        return {
            test: true
        }
    },
    props: {
      media: {
          type: Array,
          required: true
      }
    },
    replace: true,
    computed: {},
    methods: {},
    components: {
      carousel: require('vue-product-carousel')
    }
}
</script>

Has anyone else had the same compiling message?

Browserify failed!: Unexpected token node_modules/vue-product-carousel/src/carousel.vue:1

^

Dependency Dashboard

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Edited/Blocked

These updates have been manually edited so Renovate will no longer make changes. To discard all commits and start over, click on a checkbox.

• chore(deps): update eslint to v9 (major) (eslint, eslint-plugin-vue)

Other Branches

These updates are pending. To force PRs open, click the checkbox below.

• chore(deps): update dependency skeleton to v2

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

• chore(deps): replace dependency babel-eslint with @babel/eslint-parser 7.11.0
• chore(deps): update dependency @vue/eslint-config-airbnb to v8
• chore(deps): update dependency vue to v3
• Click on this checkbox to rebase all open PRs at once

Ignored or Blocked

These are blocked by an existing closed PR and will not be recreated unless you click a checkbox below.

• chore(deps): update vue-cli monorepo to v5 (major) (@vue/cli-plugin-babel, @vue/cli-plugin-eslint, @vue/cli-service)

Detected dependencies

circleci

.circleci/config.yml

• browser-tools 1.4.8

npm

package.json

• @vue/cli-plugin-babel 4.5.19
• @vue/cli-plugin-eslint 4.5.19
• @vue/cli-service 4.5.19
• @vue/eslint-config-airbnb 5.3.0
• babel-eslint 10.1.0
• core-js 3.37.0
• eslint 7.32.0
• eslint-plugin-testcafe 0.2.1
• eslint-plugin-vue 7.20.0
• skeleton 2.0.4
• start-server-and-test 2.0.3
• testcafe 3.6.0
• vue 2.7.16
• vue-template-compiler 2.7.16
• vue ~2
• @achrinza/node-ipc 10.1.10

---

• Check this box to trigger a request for Renovate to run again on this repository

Not working no nuxt? only vue?

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

<script>
import ProductCarousel from 'vue-product-carousel'
export default {
  components: {
    ProductCarousel
  },
  data () {
    return {
      images: [
        'https://res.cloudinary.com/dxn1bjdta/image/upload/c_scale,w_3000,f_auto/v1606989818/vue-product-carousel/nike.jpg',
        'https://res.cloudinary.com/dxn1bjdta/image/upload/c_scale,w_3000,f_auto/v1606989818/vue-product-carousel/nike.jpg',
        'https://res.cloudinary.com/dxn1bjdta/image/upload/c_scale,w_3000,f_auto/v1606989818/vue-product-carousel/nike.jpg'
      ]
    }
  }
}
</script>

<style>

</style>

Hi guys. I'm using the latest version of nuxt. The carousel is not appearing.. I already tried adding the plugins in my nuxt.config.js.. What should I do ?