diff --git a/docs/db.json b/docs/db.json index 3e98d01..446dfb4 100644 --- a/docs/db.json +++ b/docs/db.json @@ -1 +1 @@ -{"meta":{"version":1,"warehouse":"2.2.0"},"models":{"Asset":[{"_id":"themes/vue/source/css/benchmark.styl","path":"css/benchmark.styl","modified":1,"renderable":1},{"_id":"themes/vue/source/css/index.styl","path":"css/index.styl","modified":1,"renderable":1},{"_id":"themes/vue/source/css/page.styl","path":"css/page.styl","modified":1,"renderable":1},{"_id":"themes/vue/source/css/search.styl","path":"css/search.styl","modified":1,"renderable":1},{"_id":"themes/vue/source/images/check.png","path":"images/check.png","modified":1,"renderable":1},{"_id":"themes/vue/source/images/down.png","path":"images/down.png","modified":1,"renderable":1},{"_id":"themes/vue/source/images/feed.png","path":"images/feed.png","modified":1,"renderable":1},{"_id":"themes/vue/source/images/icons.png","path":"images/icons.png","modified":1,"renderable":1},{"_id":"themes/vue/source/images/jsfiddle.png","path":"images/jsfiddle.png","modified":1,"renderable":1},{"_id":"themes/vue/source/images/logo.png","path":"images/logo.png","modified":1,"renderable":1},{"_id":"themes/vue/source/images/menu.png","path":"images/menu.png","modified":1,"renderable":1},{"_id":"themes/vue/source/js/vue-carousel-3d.min.js","path":"js/vue-carousel-3d.min.js","modified":1,"renderable":1},{"_id":"themes/vue/source/images/search.png","path":"images/search.png","modified":1,"renderable":1},{"_id":"themes/vue/source/js/common.js","path":"js/common.js","modified":1,"renderable":1},{"_id":"themes/vue/source/js/smooth-scroll.min.js","path":"js/smooth-scroll.min.js","modified":1,"renderable":1},{"_id":"themes/vue/source/js/vue.min.js","path":"js/vue.min.js","modified":1,"renderable":1},{"_id":"themes/vue/source/js/vue.js","path":"js/vue.js","modified":1,"renderable":1}],"Cache":[{"_id":"source/api/index.md","hash":"afdcb97955a6540af6ec4dd8ecfa4e4a35cc9395","modified":1495217858000},{"_id":"themes/vue/_config.yml","hash":"a3ccfa1d45b97ca66a284996db45c45d5e3ab896","modified":1495217853000},{"_id":"source/_posts/home.md","hash":"11d75d268609cb3508816c56d2bb8faabe2cdb1d","modified":1495217860000},{"_id":"source/examples/index.md","hash":"ae9999298353ae854dc6f7a2a7a745e4051ac054","modified":1495217856000},{"_id":"themes/vue/layout/index.ejs","hash":"e675ad37160bfdae6681358238acdac99d11c4fa","modified":1495217851000},{"_id":"themes/vue/layout/layout.ejs","hash":"e4e8df5873751136bb5bb9f350823dfdb42b7d72","modified":1495217849000},{"_id":"source/guide/index.md","hash":"2aecd2e1d3f982e36d3ad642e43bf4469ea85ca4","modified":1495217854000},{"_id":"themes/vue/layout/page.ejs","hash":"78afc3a932c27ed7e70753644ccb3d5a12f81244","modified":1495217880000},{"_id":"themes/vue/layout/partials/sidebar.ejs","hash":"f4501f301d45233659a28533c7381443ad4f4071","modified":1495217844000},{"_id":"themes/vue/layout/partials/header.ejs","hash":"c8f773ef680e1ac2b429aae68740b9227ad38d9a","modified":1495217847000},{"_id":"themes/vue/layout/partials/main_menu.ejs","hash":"c6a8caea8d310d822d47c0dfaff157a9f1a4ef21","modified":1495217843000},{"_id":"themes/vue/source/css/_demo.styl","hash":"75e128f58b4a6ef5fe6a2ea3899d6831f8566390","modified":1495217885000},{"_id":"themes/vue/source/css/_common.styl","hash":"2b9642c799193ab08f7553328f94fc0971641c71","modified":1495217841000},{"_id":"themes/vue/source/css/_header.styl","hash":"c40e6e1254a46253925fe25fadb1a88d998be02d","modified":1495217836000},{"_id":"themes/vue/source/css/_migration.styl","hash":"5ea4f20818827c0d57a36a3006b736366c3b446f","modified":1495217832000},{"_id":"themes/vue/source/css/_settings.styl","hash":"e20cb6a3cf771e67ac9dad40e80e1ad5cd61fda4","modified":1495217830000},{"_id":"themes/vue/source/css/_sidebar.styl","hash":"cf214c13aa0d286de019ed16633a21a0ed5660df","modified":1495217828000},{"_id":"themes/vue/source/css/_syntax.styl","hash":"edb004001fe151bebfdf63bbc250ba75777b5468","modified":1495217834000},{"_id":"themes/vue/source/css/benchmark.styl","hash":"95d4607b2b59623a673e131e1a267d0311fe89e6","modified":1495217826000},{"_id":"themes/vue/source/css/index.styl","hash":"cd21b01bbcc809f8d8aa5fb52a8603224a9e20cc","modified":1495217824000},{"_id":"themes/vue/source/css/page.styl","hash":"bbee81e1b034dbac2c07426d67124a89583f24f3","modified":1495217839000},{"_id":"themes/vue/source/css/search.styl","hash":"5117f05598154cfc84da04ec1a257bd186653ba2","modified":1495217822000},{"_id":"themes/vue/source/images/check.png","hash":"682cf89e1802afb1dfddf07a6aed828a45b824af","modified":1495217820000},{"_id":"themes/vue/source/images/down.png","hash":"42505e12d686cf580f793bd9193acbac1e3e3a91","modified":1495217815000},{"_id":"themes/vue/source/images/feed.png","hash":"0a746dab71dca2025f63584dbd222dc5e0707ba8","modified":1495217813000},{"_id":"themes/vue/source/images/icons.png","hash":"91225ef7011e59dbe6b4b9f2666133fb5e1bc976","modified":1495217818000},{"_id":"themes/vue/source/images/jsfiddle.png","hash":"0646dceea2a62d3f5d2aabff4bdecffdf54cc8a7","modified":1495217898000},{"_id":"themes/vue/source/images/logo.png","hash":"fe9c837cc9858cb5fd19e20f848f0ccc997444bd","modified":1495217811000},{"_id":"themes/vue/source/images/menu.png","hash":"bdaa35eb1ed119caeb934e15a05b9f4a5396d957","modified":1495217893000},{"_id":"themes/vue/source/js/vue-carousel-3d.min.js","hash":"f39604e5d94c84edeffa8777f1f977a4cc0767ca","modified":1495224985000},{"_id":"themes/vue/source/images/search.png","hash":"12d664cc51b8d53c9214830bc9b92fb340526a7b","modified":1495217895000},{"_id":"themes/vue/source/js/common.js","hash":"3347325b64873ccfd871c06129b722af8b20173c","modified":1495217896000},{"_id":"themes/vue/source/js/smooth-scroll.min.js","hash":"86d3196a003a5cdc673a4c6ebb75db3ceee1a1a7","modified":1495217900000},{"_id":"themes/vue/source/js/vue.min.js","hash":"1e9ef27fa8e28cd9f5af14ba562a1cb983e49855","modified":1495217807000},{"_id":"themes/vue/source/js/vue.js","hash":"be10c44019f6577b8f80e233ddb31f1f6b367f65","modified":1495217905000},{"_id":"public/api/index.html","hash":"47395285d375678957d80aec14dc9a7a7c066959","modified":1495225013827},{"_id":"public/examples/index.html","hash":"faaf9765202d2d8063ed264048bbe7dd23aba97a","modified":1495225013827},{"_id":"public/guide/index.html","hash":"99e8778467948bb5f246070621184ed30028beec","modified":1495225013827},{"_id":"public/2017/05/19/home/index.html","hash":"67ef1cc3463e50a4c5854f6a0510d3068b13f63d","modified":1495225013828},{"_id":"public/archives/index.html","hash":"650033b99cadea6aeba751ea36117df92c9ad16c","modified":1495225013828},{"_id":"public/archives/2017/index.html","hash":"650033b99cadea6aeba751ea36117df92c9ad16c","modified":1495225013828},{"_id":"public/archives/2017/05/index.html","hash":"650033b99cadea6aeba751ea36117df92c9ad16c","modified":1495225013829},{"_id":"public/index.html","hash":"8287a865d1feeb9549b9af68e68d1e2ebed2e6fe","modified":1495225013829},{"_id":"public/images/check.png","hash":"682cf89e1802afb1dfddf07a6aed828a45b824af","modified":1495225013832},{"_id":"public/images/down.png","hash":"42505e12d686cf580f793bd9193acbac1e3e3a91","modified":1495225013833},{"_id":"public/images/feed.png","hash":"0a746dab71dca2025f63584dbd222dc5e0707ba8","modified":1495225013833},{"_id":"public/images/icons.png","hash":"91225ef7011e59dbe6b4b9f2666133fb5e1bc976","modified":1495225013833},{"_id":"public/images/jsfiddle.png","hash":"0646dceea2a62d3f5d2aabff4bdecffdf54cc8a7","modified":1495225013833},{"_id":"public/images/logo.png","hash":"fe9c837cc9858cb5fd19e20f848f0ccc997444bd","modified":1495225013833},{"_id":"public/images/menu.png","hash":"bdaa35eb1ed119caeb934e15a05b9f4a5396d957","modified":1495225013833},{"_id":"public/images/search.png","hash":"12d664cc51b8d53c9214830bc9b92fb340526a7b","modified":1495225013833},{"_id":"public/css/benchmark.css","hash":"3424ee8c27052da2ab9f544027f49e1550385e9d","modified":1495225014507},{"_id":"public/css/index.css","hash":"bcc463a7e2c62d0944625ce2e9e2801e7806e92b","modified":1495225014507},{"_id":"public/css/page.css","hash":"d57b5aea118eabc38369763217f089dea546c16c","modified":1495225014508},{"_id":"public/css/search.css","hash":"ac9a0e8c8da7919174caea15d9704c192ea3a2c4","modified":1495225014508},{"_id":"public/js/common.js","hash":"3347325b64873ccfd871c06129b722af8b20173c","modified":1495225014508},{"_id":"public/js/smooth-scroll.min.js","hash":"86d3196a003a5cdc673a4c6ebb75db3ceee1a1a7","modified":1495225014508},{"_id":"public/js/vue-carousel-3d.min.js","hash":"f39604e5d94c84edeffa8777f1f977a4cc0767ca","modified":1495225014508},{"_id":"public/js/vue.min.js","hash":"1e9ef27fa8e28cd9f5af14ba562a1cb983e49855","modified":1495225014508},{"_id":"public/js/vue.js","hash":"be10c44019f6577b8f80e233ddb31f1f6b367f65","modified":1495225014508}],"Category":[],"Data":[],"Page":[{"title":"API","_content":"\n## Global config\n\n### autoplay\n\nFlag to enable autoplay\n\n* **Type**: `Boolean`\n* **Default**: `false`\n\n### autoplayTimeout\n\nTime elapsed before advancing slide\n\n* **Type**: `Number`\n* **Default**: `2000`\n\n### autoplayHoverPause\n\nFlag to pause autoplay on hover\n\n* **Type**: `Boolean`\n* **Default**: `false`\n\n### controlsVisible\n\nShow controls (left/right arrow) \n\n* **Type**: `Boolean`\n* **Default**: `false`\n\n### perspective\n\nSlides perspective position\n\n* **Type**: `Number`\n* **Default**: `35`\n\n### display\n\nNumber of slides displayed on each page\n\n* **Type**: `Number`\n* **Default**: `5`\n\n### loop\n\nEnable carousel infinite loop\n\n* **Type**: `Boolean`\n* **Default**: `true`\n\n### animationSpeed\n\nAnimation between slides in milliseconds\n\n* **Type**: `Number`\n* **Default**: `500`\n\n### dir\n\nAnimation direction \n\n* **Type**: `String`\n* **Default**: `rtl`\n\n### width\n\nSlide width displayed in center of carousel\n\n* **Type**: `Number`\n* **Default**: `360`\n\n### height\n\nSlide height displayed in center of carousel\n\n* **Type**: `Number`\n* **Default**: `270`\n\n### border\n\nSlide border size in pixels\n\n* **Type**: `Number`\n* **Default**: `1`\n\n### space\n\nSpace between slides in pixels\n\n* **Type**: `Number`\n* **Default**: `auto`\n\n### startIndex\n\nStart slide index. First slide has 0 index\n\n* **Type**: `Number`\n* **Default**: `0`\n\n### clickable\n\nEnable navigation by clicking on slide\n\n* **Type**: `Boolean`\n* **Default**: `true`\n\n### minSwipeDistance\n\nMinimum distance in pixels to swipe before a slide advance is triggered\n\n* **Type**: `Number`\n* **Default**: `10`\n\n### inverseScaling\n\nSlide inverse scaling\n\n* **Type**: `Number`\n* **Default**: `300`\n\n### onLastSlide\n\nCallback triggered on last slide\n\n* **Type**: `Function`\n* **param**: `index`\n\n### onSlideChange\n\nCallback triggered on slide changed\n\n* **Type**: `Function`\n* **param**: `index`\n\n","source":"api/index.md","raw":"---\ntitle: API\n---\n\n## Global config\n\n### autoplay\n\nFlag to enable autoplay\n\n* **Type**: `Boolean`\n* **Default**: `false`\n\n### autoplayTimeout\n\nTime elapsed before advancing slide\n\n* **Type**: `Number`\n* **Default**: `2000`\n\n### autoplayHoverPause\n\nFlag to pause autoplay on hover\n\n* **Type**: `Boolean`\n* **Default**: `false`\n\n### controlsVisible\n\nShow controls (left/right arrow) \n\n* **Type**: `Boolean`\n* **Default**: `false`\n\n### perspective\n\nSlides perspective position\n\n* **Type**: `Number`\n* **Default**: `35`\n\n### display\n\nNumber of slides displayed on each page\n\n* **Type**: `Number`\n* **Default**: `5`\n\n### loop\n\nEnable carousel infinite loop\n\n* **Type**: `Boolean`\n* **Default**: `true`\n\n### animationSpeed\n\nAnimation between slides in milliseconds\n\n* **Type**: `Number`\n* **Default**: `500`\n\n### dir\n\nAnimation direction \n\n* **Type**: `String`\n* **Default**: `rtl`\n\n### width\n\nSlide width displayed in center of carousel\n\n* **Type**: `Number`\n* **Default**: `360`\n\n### height\n\nSlide height displayed in center of carousel\n\n* **Type**: `Number`\n* **Default**: `270`\n\n### border\n\nSlide border size in pixels\n\n* **Type**: `Number`\n* **Default**: `1`\n\n### space\n\nSpace between slides in pixels\n\n* **Type**: `Number`\n* **Default**: `auto`\n\n### startIndex\n\nStart slide index. First slide has 0 index\n\n* **Type**: `Number`\n* **Default**: `0`\n\n### clickable\n\nEnable navigation by clicking on slide\n\n* **Type**: `Boolean`\n* **Default**: `true`\n\n### minSwipeDistance\n\nMinimum distance in pixels to swipe before a slide advance is triggered\n\n* **Type**: `Number`\n* **Default**: `10`\n\n### inverseScaling\n\nSlide inverse scaling\n\n* **Type**: `Number`\n* **Default**: `300`\n\n### onLastSlide\n\nCallback triggered on last slide\n\n* **Type**: `Function`\n* **param**: `index`\n\n### onSlideChange\n\nCallback triggered on slide changed\n\n* **Type**: `Function`\n* **param**: `index`\n\n","date":"2017-05-19T18:17:38.000Z","updated":"2017-05-19T18:17:38.000Z","path":"api/index.html","comments":1,"layout":"page","_id":"cj2wad86400004ooee1pzhjuz","content":"

Global config

autoplay

Flag to enable autoplay

\n\n

autoplayTimeout

Time elapsed before advancing slide

\n\n

autoplayHoverPause

Flag to pause autoplay on hover

\n\n

controlsVisible

Show controls (left/right arrow)

\n\n

perspective

Slides perspective position

\n\n

display

Number of slides displayed on each page

\n\n

loop

Enable carousel infinite loop

\n\n

animationSpeed

Animation between slides in milliseconds

\n\n

dir

Animation direction

\n\n

width

Slide width displayed in center of carousel

\n\n

height

Slide height displayed in center of carousel

\n\n

border

Slide border size in pixels

\n\n

space

Space between slides in pixels

\n\n

startIndex

Start slide index. First slide has 0 index

\n\n

clickable

Enable navigation by clicking on slide

\n\n

minSwipeDistance

Minimum distance in pixels to swipe before a slide advance is triggered

\n\n

inverseScaling

Slide inverse scaling

\n\n

onLastSlide

Callback triggered on last slide

\n\n

onSlideChange

Callback triggered on slide changed

\n\n","site":{"data":{}},"excerpt":"","more":"

Global config

autoplay

Flag to enable autoplay

\n\n

autoplayTimeout

Time elapsed before advancing slide

\n\n

autoplayHoverPause

Flag to pause autoplay on hover

\n\n

controlsVisible

Show controls (left/right arrow)

\n\n

perspective

Slides perspective position

\n\n

display

Number of slides displayed on each page

\n\n

loop

Enable carousel infinite loop

\n\n

animationSpeed

Animation between slides in milliseconds

\n\n

dir

Animation direction

\n\n

width

Slide width displayed in center of carousel

\n\n

height

Slide height displayed in center of carousel

\n\n

border

Slide border size in pixels

\n\n

space

Space between slides in pixels

\n\n

startIndex

Start slide index. First slide has 0 index

\n\n

clickable

Enable navigation by clicking on slide

\n\n

minSwipeDistance

Minimum distance in pixels to swipe before a slide advance is triggered

\n\n

inverseScaling

Slide inverse scaling

\n\n

onLastSlide

Callback triggered on last slide

\n\n

onSlideChange

Callback triggered on slide changed

\n\n"},{"title":"Examples","_content":"\n## Simple\n\nWithout any options configured and seven slides added to 3D Carousel\n\n\n\n\n## Controls\n\nArrow controls visible, clicking on slide is disabled and seven slides with captions added to 3D Carousel\n\n\n\n\n## Autoplay\n\nAutoplay enabled, number of displayed configured and seven slides added to 3D Carousel\n\n\n\n\n## Sizes\n\nSlide width and height configured and five slides added to 3D Carousel \n\n\n\n\n## Perspective \n\nPerspective and space between slide configured. seven slides added to 3D Carousel, three of them are displayed. \n\n\n\n\n## Scaling\n\nInverse scaling and space between slide configured. five slides added to 3D Carousel\n\n\n\n\n## Flip Slider\n\nPerspective, space between slides and number of displayed configured. Seven slides added to 3D Carousel\n\n\n\n\n\n","source":"examples/index.md","raw":"---\ntitle: Examples\n---\n\n## Simple\n\nWithout any options configured and seven slides added to 3D Carousel\n\n\n\n\n## Controls\n\nArrow controls visible, clicking on slide is disabled and seven slides with captions added to 3D Carousel\n\n\n\n\n## Autoplay\n\nAutoplay enabled, number of displayed configured and seven slides added to 3D Carousel\n\n\n\n\n## Sizes\n\nSlide width and height configured and five slides added to 3D Carousel \n\n\n\n\n## Perspective \n\nPerspective and space between slide configured. seven slides added to 3D Carousel, three of them are displayed. \n\n\n\n\n## Scaling\n\nInverse scaling and space between slide configured. five slides added to 3D Carousel\n\n\n\n\n## Flip Slider\n\nPerspective, space between slides and number of displayed configured. Seven slides added to 3D Carousel\n\n\n\n\n\n","date":"2017-05-19T18:17:36.000Z","updated":"2017-05-19T18:17:36.000Z","path":"examples/index.html","comments":1,"layout":"page","_id":"cj2wad86v00024ooevnvoogn1","content":"

Simple

Without any options configured and seven slides added to 3D Carousel

\n\n\n\n

Controls

Arrow controls visible, clicking on slide is disabled and seven slides with captions added to 3D Carousel

\n\n\n\n

Autoplay

Autoplay enabled, number of displayed configured and seven slides added to 3D Carousel

\n\n\n\n

Sizes

Slide width and height configured and five slides added to 3D Carousel

\n\n\n\n

Perspective

Perspective and space between slide configured. seven slides added to 3D Carousel, three of them are displayed.

\n\n\n\n

Scaling

Inverse scaling and space between slide configured. five slides added to 3D Carousel

\n\n\n\n

Flip Slider

Perspective, space between slides and number of displayed configured. Seven slides added to 3D Carousel

\n\n\n\n\n","site":{"data":{}},"excerpt":"","more":"

Simple

Without any options configured and seven slides added to 3D Carousel

\n\n\n\n

Controls

Arrow controls visible, clicking on slide is disabled and seven slides with captions added to 3D Carousel

\n\n\n\n

Autoplay

Autoplay enabled, number of displayed configured and seven slides added to 3D Carousel

\n\n\n\n

Sizes

Slide width and height configured and five slides added to 3D Carousel

\n\n\n\n

Perspective

Perspective and space between slide configured. seven slides added to 3D Carousel, three of them are displayed.

\n\n\n\n

Scaling

Inverse scaling and space between slide configured. five slides added to 3D Carousel

\n\n\n\n

Flip Slider

Perspective, space between slides and number of displayed configured. Seven slides added to 3D Carousel

\n\n\n\n\n"},{"title":"Guide","_content":"\n## Installation\n\n``` bash\nnpm install -S vue-carousel-3d\n```\n\n## Usage (Global)\n\nYou may install Vue Carousel 3d globally:\n\n``` js\nimport Vue from 'vue';\nimport Carousel3d from 'carousel-3d';\n\nVue.use(Carousel3d);\n```\nThis will make **<carousel>** and **<slide>** available to all components within your Vue app.\n\n## Usage (Local)\n\nInclude the carousel 3d into your component using import:\n\n``` js\nimport { Carousel3d, Slide } from 'vue-carousel-3d';\n\nexport default {\n ...\n components: {\n Carousel3d,\n Slide\n }\n ...\n};\n```\n\n## HTML Structure\n\nOnce the **Carousel3d** and **Slide** components are installed globally or imported, they can be used in templates like below:\n\n``` html\n \n \n Slide 1 Content\n \n \n Slide 2 Content\n \n \n```\nKeep in mind that **index** property on slide component is required property and you will need to pass it for every slide starting from 0 \n\n## Development\n\nDev environment is created by [vue-play](https://github.com/vue-play/vue-play). Changes made to the component files will appear in real time in the sandbox.\n\nTo begin development, run:\n\n``` bash\nnpm install\nnpm run dev\n```\n\nnow open `http://localhost:5000` in your browser\n\nYou can modify and add scenarios in `play/index.js`\n\n## License\n\nThis project is licensed under the MIT License - see the [LICENSE.md](LICENSE.md) file for details.\n","source":"guide/index.md","raw":"---\ntitle: Guide\n---\n\n## Installation\n\n``` bash\nnpm install -S vue-carousel-3d\n```\n\n## Usage (Global)\n\nYou may install Vue Carousel 3d globally:\n\n``` js\nimport Vue from 'vue';\nimport Carousel3d from 'carousel-3d';\n\nVue.use(Carousel3d);\n```\nThis will make **<carousel>** and **<slide>** available to all components within your Vue app.\n\n## Usage (Local)\n\nInclude the carousel 3d into your component using import:\n\n``` js\nimport { Carousel3d, Slide } from 'vue-carousel-3d';\n\nexport default {\n ...\n components: {\n Carousel3d,\n Slide\n }\n ...\n};\n```\n\n## HTML Structure\n\nOnce the **Carousel3d** and **Slide** components are installed globally or imported, they can be used in templates like below:\n\n``` html\n \n \n Slide 1 Content\n \n \n Slide 2 Content\n \n \n```\nKeep in mind that **index** property on slide component is required property and you will need to pass it for every slide starting from 0 \n\n## Development\n\nDev environment is created by [vue-play](https://github.com/vue-play/vue-play). Changes made to the component files will appear in real time in the sandbox.\n\nTo begin development, run:\n\n``` bash\nnpm install\nnpm run dev\n```\n\nnow open `http://localhost:5000` in your browser\n\nYou can modify and add scenarios in `play/index.js`\n\n## License\n\nThis project is licensed under the MIT License - see the [LICENSE.md](LICENSE.md) file for details.\n","date":"2017-05-19T18:17:34.000Z","updated":"2017-05-19T18:17:34.000Z","path":"guide/index.html","comments":1,"layout":"page","_id":"cj2wad86y00034ooencootm65","content":"

Installation

1
npm install -S vue-carousel-3d
\n

Usage (Global)

You may install Vue Carousel 3d globally:

\n
1
2
3
4
import Vue from 'vue';
import Carousel3d from 'carousel-3d';
Vue.use(Carousel3d);
\n

This will make <carousel> and <slide> available to all components within your Vue app.

\n

Usage (Local)

Include the carousel 3d into your component using import:

\n
1
2
3
4
5
6
7
8
9
10
import { Carousel3d, Slide } from 'vue-carousel-3d';
export default {
  ...
  components: {
    Carousel3d,
    Slide
  }
  ...
};
\n

HTML Structure

Once the Carousel3d and Slide components are installed globally or imported, they can be used in templates like below:

\n
1
2
3
4
5
6
7
8
<carousel-3d>
  <slide :index=\"0\">
    Slide 1 Content
  </slide>
  <slide :index=\"1\">
    Slide 2 Content
  </slide>
</carousel-3d>
\n

Keep in mind that index property on slide component is required property and you will need to pass it for every slide starting from 0

\n

Development

Dev environment is created by vue-play. Changes made to the component files will appear in real time in the sandbox.

\n

To begin development, run:

\n
1
2
npm install
npm run dev
\n

now open http://localhost:5000 in your browser

\n

You can modify and add scenarios in play/index.js

\n

License

This project is licensed under the MIT License - see the LICENSE.md file for details.

\n","site":{"data":{}},"excerpt":"","more":"

Installation

1
npm install -S vue-carousel-3d
\n

Usage (Global)

You may install Vue Carousel 3d globally:

\n
1
2
3
4
import Vue from 'vue';
import Carousel3d from 'carousel-3d';
Vue.use(Carousel3d);
\n

This will make <carousel> and <slide> available to all components within your Vue app.

\n

Usage (Local)

Include the carousel 3d into your component using import:

\n
1
2
3
4
5
6
7
8
9
10
import { Carousel3d, Slide } from 'vue-carousel-3d';
export default {
  ...
  components: {
    Carousel3d,
    Slide
  }
  ...
};
\n

HTML Structure

Once the Carousel3d and Slide components are installed globally or imported, they can be used in templates like below:

\n
1
2
3
4
5
6
7
8
<carousel-3d>
  <slide :index=\"0\">
    Slide 1 Content
  </slide>
  <slide :index=\"1\">
    Slide 2 Content
  </slide>
</carousel-3d>
\n

Keep in mind that index property on slide component is required property and you will need to pass it for every slide starting from 0

\n

Development

Dev environment is created by vue-play. Changes made to the component files will appear in real time in the sandbox.

\n

To begin development, run:

\n
1
2
npm install
npm run dev
\n

now open http://localhost:5000 in your browser

\n

You can modify and add scenarios in play/index.js

\n

License

This project is licensed under the MIT License - see the LICENSE.md file for details.

\n"}],"Post":[{"title":"home","date":"2017-05-19T18:17:40.000Z","_content":"","source":"_posts/home.md","raw":"---\ntitle: home\ndate: \ntags:\n---\n","slug":"home","published":1,"updated":"2017-05-19T18:17:40.000Z","comments":1,"layout":"post","photos":[],"link":"","_id":"cj2wad86p00014ooe2ms6ukp9","content":"","site":{"data":{}},"excerpt":"","more":""}],"PostAsset":[],"PostCategory":[],"PostTag":[],"Tag":[]}} \ No newline at end of file +{"meta":{"version":1,"warehouse":"2.2.0"},"models":{"Asset":[{"_id":"themes/vue/source/css/benchmark.styl","path":"css/benchmark.styl","modified":1,"renderable":1},{"_id":"themes/vue/source/css/index.styl","path":"css/index.styl","modified":1,"renderable":1},{"_id":"themes/vue/source/css/page.styl","path":"css/page.styl","modified":1,"renderable":1},{"_id":"themes/vue/source/images/check.png","path":"images/check.png","modified":1,"renderable":1},{"_id":"themes/vue/source/css/search.styl","path":"css/search.styl","modified":1,"renderable":1},{"_id":"themes/vue/source/images/down.png","path":"images/down.png","modified":1,"renderable":1},{"_id":"themes/vue/source/images/icons.png","path":"images/icons.png","modified":1,"renderable":1},{"_id":"themes/vue/source/images/feed.png","path":"images/feed.png","modified":1,"renderable":1},{"_id":"themes/vue/source/images/jsfiddle.png","path":"images/jsfiddle.png","modified":1,"renderable":1},{"_id":"themes/vue/source/images/logo.png","path":"images/logo.png","modified":1,"renderable":1},{"_id":"themes/vue/source/images/menu.png","path":"images/menu.png","modified":1,"renderable":1},{"_id":"themes/vue/source/js/vue-carousel-3d.min.js","path":"js/vue-carousel-3d.min.js","modified":1,"renderable":1},{"_id":"themes/vue/source/images/search.png","path":"images/search.png","modified":1,"renderable":1},{"_id":"themes/vue/source/js/smooth-scroll.min.js","path":"js/smooth-scroll.min.js","modified":1,"renderable":1},{"_id":"themes/vue/source/js/common.js","path":"js/common.js","modified":1,"renderable":1},{"_id":"themes/vue/source/js/vue.min.js","path":"js/vue.min.js","modified":1,"renderable":1},{"_id":"themes/vue/source/js/vue.js","path":"js/vue.js","modified":1,"renderable":1}],"Cache":[{"_id":"themes/vue/_config.yml","hash":"a3ccfa1d45b97ca66a284996db45c45d5e3ab896","modified":1495217853000},{"_id":"source/_posts/home.md","hash":"11d75d268609cb3508816c56d2bb8faabe2cdb1d","modified":1495217860000},{"_id":"source/api/index.md","hash":"afdcb97955a6540af6ec4dd8ecfa4e4a35cc9395","modified":1495217858000},{"_id":"source/guide/index.md","hash":"2aecd2e1d3f982e36d3ad642e43bf4469ea85ca4","modified":1495217854000},{"_id":"source/examples/index.md","hash":"ae9999298353ae854dc6f7a2a7a745e4051ac054","modified":1495217856000},{"_id":"themes/vue/layout/index.ejs","hash":"e675ad37160bfdae6681358238acdac99d11c4fa","modified":1495217851000},{"_id":"themes/vue/layout/page.ejs","hash":"78afc3a932c27ed7e70753644ccb3d5a12f81244","modified":1495217880000},{"_id":"themes/vue/layout/layout.ejs","hash":"e4e8df5873751136bb5bb9f350823dfdb42b7d72","modified":1495217849000},{"_id":"themes/vue/layout/partials/header.ejs","hash":"c8f773ef680e1ac2b429aae68740b9227ad38d9a","modified":1495217847000},{"_id":"themes/vue/layout/partials/main_menu.ejs","hash":"c6a8caea8d310d822d47c0dfaff157a9f1a4ef21","modified":1495217843000},{"_id":"themes/vue/layout/partials/sidebar.ejs","hash":"f4501f301d45233659a28533c7381443ad4f4071","modified":1495217844000},{"_id":"themes/vue/source/css/_common.styl","hash":"2b9642c799193ab08f7553328f94fc0971641c71","modified":1495217841000},{"_id":"themes/vue/source/css/_demo.styl","hash":"75e128f58b4a6ef5fe6a2ea3899d6831f8566390","modified":1495217885000},{"_id":"themes/vue/source/css/_header.styl","hash":"c40e6e1254a46253925fe25fadb1a88d998be02d","modified":1495217836000},{"_id":"themes/vue/source/css/_settings.styl","hash":"e20cb6a3cf771e67ac9dad40e80e1ad5cd61fda4","modified":1495217830000},{"_id":"themes/vue/source/css/_migration.styl","hash":"5ea4f20818827c0d57a36a3006b736366c3b446f","modified":1495217832000},{"_id":"themes/vue/source/css/_sidebar.styl","hash":"cf214c13aa0d286de019ed16633a21a0ed5660df","modified":1495217828000},{"_id":"themes/vue/source/css/_syntax.styl","hash":"edb004001fe151bebfdf63bbc250ba75777b5468","modified":1495217834000},{"_id":"themes/vue/source/css/benchmark.styl","hash":"95d4607b2b59623a673e131e1a267d0311fe89e6","modified":1495217826000},{"_id":"themes/vue/source/css/index.styl","hash":"cd21b01bbcc809f8d8aa5fb52a8603224a9e20cc","modified":1495217824000},{"_id":"themes/vue/source/css/page.styl","hash":"bbee81e1b034dbac2c07426d67124a89583f24f3","modified":1495217839000},{"_id":"themes/vue/source/images/check.png","hash":"682cf89e1802afb1dfddf07a6aed828a45b824af","modified":1495217820000},{"_id":"themes/vue/source/css/search.styl","hash":"5117f05598154cfc84da04ec1a257bd186653ba2","modified":1495217822000},{"_id":"themes/vue/source/images/down.png","hash":"42505e12d686cf580f793bd9193acbac1e3e3a91","modified":1495217815000},{"_id":"themes/vue/source/images/icons.png","hash":"91225ef7011e59dbe6b4b9f2666133fb5e1bc976","modified":1495217818000},{"_id":"themes/vue/source/images/feed.png","hash":"0a746dab71dca2025f63584dbd222dc5e0707ba8","modified":1495217813000},{"_id":"themes/vue/source/images/jsfiddle.png","hash":"0646dceea2a62d3f5d2aabff4bdecffdf54cc8a7","modified":1495217898000},{"_id":"themes/vue/source/images/logo.png","hash":"fe9c837cc9858cb5fd19e20f848f0ccc997444bd","modified":1495217811000},{"_id":"themes/vue/source/images/menu.png","hash":"bdaa35eb1ed119caeb934e15a05b9f4a5396d957","modified":1495217893000},{"_id":"themes/vue/source/js/vue-carousel-3d.min.js","hash":"f39604e5d94c84edeffa8777f1f977a4cc0767ca","modified":1495225150000},{"_id":"themes/vue/source/images/search.png","hash":"12d664cc51b8d53c9214830bc9b92fb340526a7b","modified":1495217895000},{"_id":"themes/vue/source/js/smooth-scroll.min.js","hash":"86d3196a003a5cdc673a4c6ebb75db3ceee1a1a7","modified":1495217900000},{"_id":"themes/vue/source/js/common.js","hash":"3347325b64873ccfd871c06129b722af8b20173c","modified":1495217896000},{"_id":"themes/vue/source/js/vue.min.js","hash":"1e9ef27fa8e28cd9f5af14ba562a1cb983e49855","modified":1495217807000},{"_id":"themes/vue/source/js/vue.js","hash":"be10c44019f6577b8f80e233ddb31f1f6b367f65","modified":1495217905000},{"_id":"public/api/index.html","hash":"47395285d375678957d80aec14dc9a7a7c066959","modified":1495225159602},{"_id":"public/guide/index.html","hash":"99e8778467948bb5f246070621184ed30028beec","modified":1495225159602},{"_id":"public/examples/index.html","hash":"faaf9765202d2d8063ed264048bbe7dd23aba97a","modified":1495225159603},{"_id":"public/2017/05/19/home/index.html","hash":"67ef1cc3463e50a4c5854f6a0510d3068b13f63d","modified":1495225159604},{"_id":"public/archives/index.html","hash":"650033b99cadea6aeba751ea36117df92c9ad16c","modified":1495225159604},{"_id":"public/archives/2017/index.html","hash":"650033b99cadea6aeba751ea36117df92c9ad16c","modified":1495225159604},{"_id":"public/archives/2017/05/index.html","hash":"650033b99cadea6aeba751ea36117df92c9ad16c","modified":1495225159606},{"_id":"public/index.html","hash":"8287a865d1feeb9549b9af68e68d1e2ebed2e6fe","modified":1495225159606},{"_id":"public/images/check.png","hash":"682cf89e1802afb1dfddf07a6aed828a45b824af","modified":1495225159610},{"_id":"public/images/down.png","hash":"42505e12d686cf580f793bd9193acbac1e3e3a91","modified":1495225159610},{"_id":"public/images/icons.png","hash":"91225ef7011e59dbe6b4b9f2666133fb5e1bc976","modified":1495225159610},{"_id":"public/images/feed.png","hash":"0a746dab71dca2025f63584dbd222dc5e0707ba8","modified":1495225159610},{"_id":"public/images/jsfiddle.png","hash":"0646dceea2a62d3f5d2aabff4bdecffdf54cc8a7","modified":1495225159610},{"_id":"public/images/logo.png","hash":"fe9c837cc9858cb5fd19e20f848f0ccc997444bd","modified":1495225159610},{"_id":"public/images/menu.png","hash":"bdaa35eb1ed119caeb934e15a05b9f4a5396d957","modified":1495225159611},{"_id":"public/images/search.png","hash":"12d664cc51b8d53c9214830bc9b92fb340526a7b","modified":1495225159611},{"_id":"public/css/index.css","hash":"bcc463a7e2c62d0944625ce2e9e2801e7806e92b","modified":1495225160334},{"_id":"public/css/benchmark.css","hash":"3424ee8c27052da2ab9f544027f49e1550385e9d","modified":1495225160334},{"_id":"public/css/page.css","hash":"d57b5aea118eabc38369763217f089dea546c16c","modified":1495225160334},{"_id":"public/css/search.css","hash":"ac9a0e8c8da7919174caea15d9704c192ea3a2c4","modified":1495225160334},{"_id":"public/js/smooth-scroll.min.js","hash":"86d3196a003a5cdc673a4c6ebb75db3ceee1a1a7","modified":1495225160334},{"_id":"public/js/common.js","hash":"3347325b64873ccfd871c06129b722af8b20173c","modified":1495225160334},{"_id":"public/js/vue-carousel-3d.min.js","hash":"f39604e5d94c84edeffa8777f1f977a4cc0767ca","modified":1495225160334},{"_id":"public/js/vue.min.js","hash":"1e9ef27fa8e28cd9f5af14ba562a1cb983e49855","modified":1495225160334},{"_id":"public/js/vue.js","hash":"be10c44019f6577b8f80e233ddb31f1f6b367f65","modified":1495225160334}],"Category":[],"Data":[],"Page":[{"title":"API","_content":"\n## Global config\n\n### autoplay\n\nFlag to enable autoplay\n\n* **Type**: `Boolean`\n* **Default**: `false`\n\n### autoplayTimeout\n\nTime elapsed before advancing slide\n\n* **Type**: `Number`\n* **Default**: `2000`\n\n### autoplayHoverPause\n\nFlag to pause autoplay on hover\n\n* **Type**: `Boolean`\n* **Default**: `false`\n\n### controlsVisible\n\nShow controls (left/right arrow) \n\n* **Type**: `Boolean`\n* **Default**: `false`\n\n### perspective\n\nSlides perspective position\n\n* **Type**: `Number`\n* **Default**: `35`\n\n### display\n\nNumber of slides displayed on each page\n\n* **Type**: `Number`\n* **Default**: `5`\n\n### loop\n\nEnable carousel infinite loop\n\n* **Type**: `Boolean`\n* **Default**: `true`\n\n### animationSpeed\n\nAnimation between slides in milliseconds\n\n* **Type**: `Number`\n* **Default**: `500`\n\n### dir\n\nAnimation direction \n\n* **Type**: `String`\n* **Default**: `rtl`\n\n### width\n\nSlide width displayed in center of carousel\n\n* **Type**: `Number`\n* **Default**: `360`\n\n### height\n\nSlide height displayed in center of carousel\n\n* **Type**: `Number`\n* **Default**: `270`\n\n### border\n\nSlide border size in pixels\n\n* **Type**: `Number`\n* **Default**: `1`\n\n### space\n\nSpace between slides in pixels\n\n* **Type**: `Number`\n* **Default**: `auto`\n\n### startIndex\n\nStart slide index. First slide has 0 index\n\n* **Type**: `Number`\n* **Default**: `0`\n\n### clickable\n\nEnable navigation by clicking on slide\n\n* **Type**: `Boolean`\n* **Default**: `true`\n\n### minSwipeDistance\n\nMinimum distance in pixels to swipe before a slide advance is triggered\n\n* **Type**: `Number`\n* **Default**: `10`\n\n### inverseScaling\n\nSlide inverse scaling\n\n* **Type**: `Number`\n* **Default**: `300`\n\n### onLastSlide\n\nCallback triggered on last slide\n\n* **Type**: `Function`\n* **param**: `index`\n\n### onSlideChange\n\nCallback triggered on slide changed\n\n* **Type**: `Function`\n* **param**: `index`\n\n","source":"api/index.md","raw":"---\ntitle: API\n---\n\n## Global config\n\n### autoplay\n\nFlag to enable autoplay\n\n* **Type**: `Boolean`\n* **Default**: `false`\n\n### autoplayTimeout\n\nTime elapsed before advancing slide\n\n* **Type**: `Number`\n* **Default**: `2000`\n\n### autoplayHoverPause\n\nFlag to pause autoplay on hover\n\n* **Type**: `Boolean`\n* **Default**: `false`\n\n### controlsVisible\n\nShow controls (left/right arrow) \n\n* **Type**: `Boolean`\n* **Default**: `false`\n\n### perspective\n\nSlides perspective position\n\n* **Type**: `Number`\n* **Default**: `35`\n\n### display\n\nNumber of slides displayed on each page\n\n* **Type**: `Number`\n* **Default**: `5`\n\n### loop\n\nEnable carousel infinite loop\n\n* **Type**: `Boolean`\n* **Default**: `true`\n\n### animationSpeed\n\nAnimation between slides in milliseconds\n\n* **Type**: `Number`\n* **Default**: `500`\n\n### dir\n\nAnimation direction \n\n* **Type**: `String`\n* **Default**: `rtl`\n\n### width\n\nSlide width displayed in center of carousel\n\n* **Type**: `Number`\n* **Default**: `360`\n\n### height\n\nSlide height displayed in center of carousel\n\n* **Type**: `Number`\n* **Default**: `270`\n\n### border\n\nSlide border size in pixels\n\n* **Type**: `Number`\n* **Default**: `1`\n\n### space\n\nSpace between slides in pixels\n\n* **Type**: `Number`\n* **Default**: `auto`\n\n### startIndex\n\nStart slide index. First slide has 0 index\n\n* **Type**: `Number`\n* **Default**: `0`\n\n### clickable\n\nEnable navigation by clicking on slide\n\n* **Type**: `Boolean`\n* **Default**: `true`\n\n### minSwipeDistance\n\nMinimum distance in pixels to swipe before a slide advance is triggered\n\n* **Type**: `Number`\n* **Default**: `10`\n\n### inverseScaling\n\nSlide inverse scaling\n\n* **Type**: `Number`\n* **Default**: `300`\n\n### onLastSlide\n\nCallback triggered on last slide\n\n* **Type**: `Function`\n* **param**: `index`\n\n### onSlideChange\n\nCallback triggered on slide changed\n\n* **Type**: `Function`\n* **param**: `index`\n\n","date":"2017-05-19T18:17:38.000Z","updated":"2017-05-19T18:17:38.000Z","path":"api/index.html","comments":1,"layout":"page","_id":"cj2wagcor000081oek8ypupkf","content":"

Global config

autoplay

Flag to enable autoplay

\n\n

autoplayTimeout

Time elapsed before advancing slide

\n\n

autoplayHoverPause

Flag to pause autoplay on hover

\n\n

controlsVisible

Show controls (left/right arrow)

\n\n

perspective

Slides perspective position

\n\n

display

Number of slides displayed on each page

\n\n

loop

Enable carousel infinite loop

\n\n

animationSpeed

Animation between slides in milliseconds

\n\n

dir

Animation direction

\n\n

width

Slide width displayed in center of carousel

\n\n

height

Slide height displayed in center of carousel

\n\n

border

Slide border size in pixels

\n\n

space

Space between slides in pixels

\n\n

startIndex

Start slide index. First slide has 0 index

\n\n

clickable

Enable navigation by clicking on slide

\n\n

minSwipeDistance

Minimum distance in pixels to swipe before a slide advance is triggered

\n\n

inverseScaling

Slide inverse scaling

\n\n

onLastSlide

Callback triggered on last slide

\n\n

onSlideChange

Callback triggered on slide changed

\n\n","site":{"data":{}},"excerpt":"","more":"

Global config

autoplay

Flag to enable autoplay

\n\n

autoplayTimeout

Time elapsed before advancing slide

\n\n

autoplayHoverPause

Flag to pause autoplay on hover

\n\n

controlsVisible

Show controls (left/right arrow)

\n\n

perspective

Slides perspective position

\n\n

display

Number of slides displayed on each page

\n\n

loop

Enable carousel infinite loop

\n\n

animationSpeed

Animation between slides in milliseconds

\n\n

dir

Animation direction

\n\n

width

Slide width displayed in center of carousel

\n\n

height

Slide height displayed in center of carousel

\n\n

border

Slide border size in pixels

\n\n

space

Space between slides in pixels

\n\n

startIndex

Start slide index. First slide has 0 index

\n\n

clickable

Enable navigation by clicking on slide

\n\n

minSwipeDistance

Minimum distance in pixels to swipe before a slide advance is triggered

\n\n

inverseScaling

Slide inverse scaling

\n\n

onLastSlide

Callback triggered on last slide

\n\n

onSlideChange

Callback triggered on slide changed

\n\n"},{"title":"Guide","_content":"\n## Installation\n\n``` bash\nnpm install -S vue-carousel-3d\n```\n\n## Usage (Global)\n\nYou may install Vue Carousel 3d globally:\n\n``` js\nimport Vue from 'vue';\nimport Carousel3d from 'carousel-3d';\n\nVue.use(Carousel3d);\n```\nThis will make **<carousel>** and **<slide>** available to all components within your Vue app.\n\n## Usage (Local)\n\nInclude the carousel 3d into your component using import:\n\n``` js\nimport { Carousel3d, Slide } from 'vue-carousel-3d';\n\nexport default {\n ...\n components: {\n Carousel3d,\n Slide\n }\n ...\n};\n```\n\n## HTML Structure\n\nOnce the **Carousel3d** and **Slide** components are installed globally or imported, they can be used in templates like below:\n\n``` html\n \n \n Slide 1 Content\n \n \n Slide 2 Content\n \n \n```\nKeep in mind that **index** property on slide component is required property and you will need to pass it for every slide starting from 0 \n\n## Development\n\nDev environment is created by [vue-play](https://github.com/vue-play/vue-play). Changes made to the component files will appear in real time in the sandbox.\n\nTo begin development, run:\n\n``` bash\nnpm install\nnpm run dev\n```\n\nnow open `http://localhost:5000` in your browser\n\nYou can modify and add scenarios in `play/index.js`\n\n## License\n\nThis project is licensed under the MIT License - see the [LICENSE.md](LICENSE.md) file for details.\n","source":"guide/index.md","raw":"---\ntitle: Guide\n---\n\n## Installation\n\n``` bash\nnpm install -S vue-carousel-3d\n```\n\n## Usage (Global)\n\nYou may install Vue Carousel 3d globally:\n\n``` js\nimport Vue from 'vue';\nimport Carousel3d from 'carousel-3d';\n\nVue.use(Carousel3d);\n```\nThis will make **<carousel>** and **<slide>** available to all components within your Vue app.\n\n## Usage (Local)\n\nInclude the carousel 3d into your component using import:\n\n``` js\nimport { Carousel3d, Slide } from 'vue-carousel-3d';\n\nexport default {\n ...\n components: {\n Carousel3d,\n Slide\n }\n ...\n};\n```\n\n## HTML Structure\n\nOnce the **Carousel3d** and **Slide** components are installed globally or imported, they can be used in templates like below:\n\n``` html\n \n \n Slide 1 Content\n \n \n Slide 2 Content\n \n \n```\nKeep in mind that **index** property on slide component is required property and you will need to pass it for every slide starting from 0 \n\n## Development\n\nDev environment is created by [vue-play](https://github.com/vue-play/vue-play). Changes made to the component files will appear in real time in the sandbox.\n\nTo begin development, run:\n\n``` bash\nnpm install\nnpm run dev\n```\n\nnow open `http://localhost:5000` in your browser\n\nYou can modify and add scenarios in `play/index.js`\n\n## License\n\nThis project is licensed under the MIT License - see the [LICENSE.md](LICENSE.md) file for details.\n","date":"2017-05-19T18:17:34.000Z","updated":"2017-05-19T18:17:34.000Z","path":"guide/index.html","comments":1,"layout":"page","_id":"cj2wagcoz000281oenfsy47ao","content":"

Installation

1
npm install -S vue-carousel-3d
\n

Usage (Global)

You may install Vue Carousel 3d globally:

\n
1
2
3
4
import Vue from 'vue';
import Carousel3d from 'carousel-3d';
Vue.use(Carousel3d);
\n

This will make <carousel> and <slide> available to all components within your Vue app.

\n

Usage (Local)

Include the carousel 3d into your component using import:

\n
1
2
3
4
5
6
7
8
9
10
import { Carousel3d, Slide } from 'vue-carousel-3d';
export default {
  ...
  components: {
    Carousel3d,
    Slide
  }
  ...
};
\n

HTML Structure

Once the Carousel3d and Slide components are installed globally or imported, they can be used in templates like below:

\n
1
2
3
4
5
6
7
8
<carousel-3d>
  <slide :index=\"0\">
    Slide 1 Content
  </slide>
  <slide :index=\"1\">
    Slide 2 Content
  </slide>
</carousel-3d>
\n

Keep in mind that index property on slide component is required property and you will need to pass it for every slide starting from 0

\n

Development

Dev environment is created by vue-play. Changes made to the component files will appear in real time in the sandbox.

\n

To begin development, run:

\n
1
2
npm install
npm run dev
\n

now open http://localhost:5000 in your browser

\n

You can modify and add scenarios in play/index.js

\n

License

This project is licensed under the MIT License - see the LICENSE.md file for details.

\n","site":{"data":{}},"excerpt":"","more":"

Installation

1
npm install -S vue-carousel-3d
\n

Usage (Global)

You may install Vue Carousel 3d globally:

\n
1
2
3
4
import Vue from 'vue';
import Carousel3d from 'carousel-3d';
Vue.use(Carousel3d);
\n

This will make <carousel> and <slide> available to all components within your Vue app.

\n

Usage (Local)

Include the carousel 3d into your component using import:

\n
1
2
3
4
5
6
7
8
9
10
import { Carousel3d, Slide } from 'vue-carousel-3d';
export default {
  ...
  components: {
    Carousel3d,
    Slide
  }
  ...
};
\n

HTML Structure

Once the Carousel3d and Slide components are installed globally or imported, they can be used in templates like below:

\n
1
2
3
4
5
6
7
8
<carousel-3d>
  <slide :index=\"0\">
    Slide 1 Content
  </slide>
  <slide :index=\"1\">
    Slide 2 Content
  </slide>
</carousel-3d>
\n

Keep in mind that index property on slide component is required property and you will need to pass it for every slide starting from 0

\n

Development

Dev environment is created by vue-play. Changes made to the component files will appear in real time in the sandbox.

\n

To begin development, run:

\n
1
2
npm install
npm run dev
\n

now open http://localhost:5000 in your browser

\n

You can modify and add scenarios in play/index.js

\n

License

This project is licensed under the MIT License - see the LICENSE.md file for details.

\n"},{"title":"Examples","_content":"\n## Simple\n\nWithout any options configured and seven slides added to 3D Carousel\n\n\n\n\n## Controls\n\nArrow controls visible, clicking on slide is disabled and seven slides with captions added to 3D Carousel\n\n\n\n\n## Autoplay\n\nAutoplay enabled, number of displayed configured and seven slides added to 3D Carousel\n\n\n\n\n## Sizes\n\nSlide width and height configured and five slides added to 3D Carousel \n\n\n\n\n## Perspective \n\nPerspective and space between slide configured. seven slides added to 3D Carousel, three of them are displayed. \n\n\n\n\n## Scaling\n\nInverse scaling and space between slide configured. five slides added to 3D Carousel\n\n\n\n\n## Flip Slider\n\nPerspective, space between slides and number of displayed configured. Seven slides added to 3D Carousel\n\n\n\n\n\n","source":"examples/index.md","raw":"---\ntitle: Examples\n---\n\n## Simple\n\nWithout any options configured and seven slides added to 3D Carousel\n\n\n\n\n## Controls\n\nArrow controls visible, clicking on slide is disabled and seven slides with captions added to 3D Carousel\n\n\n\n\n## Autoplay\n\nAutoplay enabled, number of displayed configured and seven slides added to 3D Carousel\n\n\n\n\n## Sizes\n\nSlide width and height configured and five slides added to 3D Carousel \n\n\n\n\n## Perspective \n\nPerspective and space between slide configured. seven slides added to 3D Carousel, three of them are displayed. \n\n\n\n\n## Scaling\n\nInverse scaling and space between slide configured. five slides added to 3D Carousel\n\n\n\n\n## Flip Slider\n\nPerspective, space between slides and number of displayed configured. Seven slides added to 3D Carousel\n\n\n\n\n\n","date":"2017-05-19T18:17:36.000Z","updated":"2017-05-19T18:17:36.000Z","path":"examples/index.html","comments":1,"layout":"page","_id":"cj2wagcp3000381oe4tiro7qr","content":"

Simple

Without any options configured and seven slides added to 3D Carousel

\n\n\n\n

Controls

Arrow controls visible, clicking on slide is disabled and seven slides with captions added to 3D Carousel

\n\n\n\n

Autoplay

Autoplay enabled, number of displayed configured and seven slides added to 3D Carousel

\n\n\n\n

Sizes

Slide width and height configured and five slides added to 3D Carousel

\n\n\n\n

Perspective

Perspective and space between slide configured. seven slides added to 3D Carousel, three of them are displayed.

\n\n\n\n

Scaling

Inverse scaling and space between slide configured. five slides added to 3D Carousel

\n\n\n\n

Flip Slider

Perspective, space between slides and number of displayed configured. Seven slides added to 3D Carousel

\n\n\n\n\n","site":{"data":{}},"excerpt":"","more":"

Simple

Without any options configured and seven slides added to 3D Carousel

\n\n\n\n

Controls

Arrow controls visible, clicking on slide is disabled and seven slides with captions added to 3D Carousel

\n\n\n\n

Autoplay

Autoplay enabled, number of displayed configured and seven slides added to 3D Carousel

\n\n\n\n

Sizes

Slide width and height configured and five slides added to 3D Carousel

\n\n\n\n

Perspective

Perspective and space between slide configured. seven slides added to 3D Carousel, three of them are displayed.

\n\n\n\n

Scaling

Inverse scaling and space between slide configured. five slides added to 3D Carousel

\n\n\n\n

Flip Slider

Perspective, space between slides and number of displayed configured. Seven slides added to 3D Carousel

\n\n\n\n\n"}],"Post":[{"title":"home","date":"2017-05-19T18:17:40.000Z","_content":"","source":"_posts/home.md","raw":"---\ntitle: home\ndate: \ntags:\n---\n","slug":"home","published":1,"updated":"2017-05-19T18:17:40.000Z","comments":1,"layout":"post","photos":[],"link":"","_id":"cj2wagcou000181oeznd315xy","content":"","site":{"data":{}},"excerpt":"","more":""}],"PostAsset":[],"PostCategory":[],"PostTag":[],"Tag":[]}} \ No newline at end of file