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

Simple product carousel with hot image replacement, Zoom and Swipe mode
https://github.com/probil/vue-product-carousel

carousel swipe vue

Last synced: 9 days ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/probil/vue-product-carousel
• Owner: probil
• License: mit
• Created: 2016-07-14T21:36:27.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2024-03-19T06:10:17.000Z (8 months ago)
• Last Synced: 2024-04-14T06:14:40.850Z (7 months ago)
• Topics: carousel, swipe, vue
• Language: Vue
• Homepage: https://vue-product-carousel.netlify.com/
• Size: 2.44 MB
• Stars: 38
• Watchers: 3
• Forks: 4
• Open Issues: 10
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Vue Product Carousel

[![Build Status](https://badgen.net/circleci/github/probil/vue-product-carousel/master)](https://circleci.com/gh/probil/vue-product-carousel/tree/master)

[![npm](https://img.shields.io/npm/v/vue-product-carousel.svg)](https://www.npmjs.com/package/vue-product-carousel)

[![Github file size](https://img.shields.io/github/size/probil/vue-product-carousel/dist/lib/VueProductCarousel.umd.min.js.svg)](https://raw.githubusercontent.com/probil/vue-product-carousel/master/dist/lib/VueProductCarousel.umd.min.js)

[![npm](https://img.shields.io/npm/dm/vue-product-carousel.svg)](https://www.npmjs.com/package/vue-product-carousel)

[![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://raw.githubusercontent.com/probil/vue-product-carousel/master/LICENSE)

[![Vue2](https://img.shields.io/badge/Vue-2.x-brightgreen.svg)](https://vuejs.org/)

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

## Usage

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

```bash

npm i --save vue-product-carousel

```

Then import it:

```js

import ProductCarousel from 'vue-product-carousel'

```

Use `ProductCarousel` component and pass your images as `images` prop:

```vue

  

    Sidebar content here

  

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/',

      ]

    }

  },

}

```

## 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](https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/babel-preset-app#polyfills) 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

``` bash

# 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](https://github.com/kalicki) for idea.

- [thebird](https://github.com/thebird/Swipe) for [Swipe](https://github.com/thebird/Swipe) lib