项目作者: probil

项目描述 :
Simple product carousel with hot image replacement, Zoom and Swipe mode
高级语言: Vue
项目地址: git://github.com/probil/vue-product-carousel.git
创建时间: 2016-07-14T21:36:27Z
项目社区:https://github.com/probil/vue-product-carousel

开源协议:MIT License

下载


Vue Product Carousel

Build Status
npm
Github file size
npm
GitHub license
Vue2

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

Usage

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

  1. npm i --save vue-product-carousel

Then import it:

  1. import ProductCarousel from 'vue-product-carousel'

Use ProductCarousel component and pass your images as images prop:

  1. <template>
  2. <ProductCarousel :images="images">
  3. Sidebar content here
  4. </ProductCarousel>
  5. </template>
  6. <script>
  7. export default {
  8. components: {
  9. ProductCarousel,
  10. },
  11. data() {
  12. return {
  13. images: [
  14. 'http://lorempixel.com/1000/1000/business/1/',
  15. 'http://lorempixel.com/1000/1000/business/2/',
  16. 'http://lorempixel.com/1000/1000/business/3/',
  17. ]
  18. }
  19. },
  20. }
  21. </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):

  1. # for core-js@2
  2. es6.object.assign
  3. es6.symbol # optional
  4. # for core-js@3
  5. es.object.assign
  6. es.symbol # optional

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

Scripts

  1. # installs dependencies
  2. npm install
  3. # serves demo with hot reloading
  4. npm run serve
  5. # builds demo
  6. npm run build:demo
  7. # builds lib
  8. npm run build:lib
  9. # lints and fixes files
  10. 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