{"meta":{"version":1,"warehouse":"2.2.0"},"models":{"Asset":[{"_id":"themes/vue/source/css/benchmark.styl","path":"css/benchmark.styl","modified":0,"renderable":1},{"_id":"themes/vue/source/css/page.styl","path":"css/page.styl","modified":0,"renderable":1},{"_id":"themes/vue/source/css/search.styl","path":"css/search.styl","modified":0,"renderable":1},{"_id":"themes/vue/source/css/index.styl","path":"css/index.styl","modified":0,"renderable":1},{"_id":"themes/vue/source/js/vue-carousel.min.js","path":"js/vue-carousel.min.js","modified":0,"renderable":1},{"_id":"themes/vue/source/js/smooth-scroll.min.js","path":"js/smooth-scroll.min.js","modified":0,"renderable":1},{"_id":"themes/vue/source/js/common.js","path":"js/common.js","modified":0,"renderable":1},{"_id":"themes/vue/source/images/actualize.png","path":"images/actualize.png","modified":0,"renderable":1},{"_id":"themes/vue/source/images/2mhost.png","path":"images/2mhost.png","modified":0,"renderable":1},{"_id":"themes/vue/source/images/chaitin.png","path":"images/chaitin.png","modified":0,"renderable":1},{"_id":"themes/vue/source/images/check.png","path":"images/check.png","modified":0,"renderable":1},{"_id":"themes/vue/source/images/feed.png","path":"images/feed.png","modified":0,"renderable":1},{"_id":"themes/vue/source/images/down.png","path":"images/down.png","modified":0,"renderable":1},{"_id":"themes/vue/source/images/icons.png","path":"images/icons.png","modified":0,"renderable":1},{"_id":"themes/vue/source/images/itunescn.png","path":"images/itunescn.png","modified":0,"renderable":1},{"_id":"themes/vue/source/images/htmlburger.png","path":"images/htmlburger.png","modified":0,"renderable":1},{"_id":"themes/vue/source/images/juejin.png","path":"images/juejin.png","modified":0,"renderable":1},{"_id":"themes/vue/source/images/logo.png","path":"images/logo.png","modified":0,"renderable":1},{"_id":"themes/vue/source/images/laravel.png","path":"images/laravel.png","modified":0,"renderable":1},{"_id":"themes/vue/source/images/jsfiddle.png","path":"images/jsfiddle.png","modified":0,"renderable":1},{"_id":"themes/vue/source/images/menu.png","path":"images/menu.png","modified":0,"renderable":1},{"_id":"themes/vue/source/images/patreon.png","path":"images/patreon.png","modified":0,"renderable":1},{"_id":"themes/vue/source/images/monterail.png","path":"images/monterail.png","modified":0,"renderable":1},{"_id":"themes/vue/source/images/paypal.png","path":"images/paypal.png","modified":0,"renderable":1},{"_id":"themes/vue/source/images/search.png","path":"images/search.png","modified":0,"renderable":1},{"_id":"themes/vue/source/images/someline.png","path":"images/someline.png","modified":0,"renderable":1},{"_id":"themes/vue/source/images/strikingly.png","path":"images/strikingly.png","modified":0,"renderable":1},{"_id":"themes/vue/source/images/transition.png","path":"images/transition.png","modified":0,"renderable":1},{"_id":"themes/vue/source/images/trisoft.png","path":"images/trisoft.png","modified":0,"renderable":1},{"_id":"themes/vue/source/images/tde.png","path":"images/tde.png","modified":0,"renderable":1},{"_id":"themes/vue/source/images/vuejobs.png","path":"images/vuejobs.png","modified":0,"renderable":1},{"_id":"themes/vue/source/js/vue.min.js","path":"js/vue.min.js","modified":0,"renderable":1},{"_id":"themes/vue/source/js/vue.js","path":"js/vue.js","modified":0,"renderable":1}],"Cache":[{"_id":"themes/vue/_config.yml","hash":"70a6221e466be0b2046696d63f21a1aaefa67692","modified":1537298297601},{"_id":"source/_posts/home.md","hash":"07edadc8485cb285e2696bd606cfef37b6e822d1","modified":1537298297598},{"_id":"source/api/index.md","hash":"40d1b7f47ec398e7e0dc8bcbeb395760246ae8d0","modified":1548014559085},{"_id":"source/examples/index.md","hash":"b619ed63c134a409be6cc1026b562fb6a306859a","modified":1537298297599},{"_id":"source/guide/index.md","hash":"97a976a93601b5f31ac53573a1ba4639f67cb451","modified":1537298297600},{"_id":"themes/vue/layout/index.ejs","hash":"f6899a2906aeb12f93da7fbb04b9aecf188c6744","modified":1537298297602},{"_id":"themes/vue/layout/layout.ejs","hash":"558ed1335c90b559c1f2ba6219ae8fcce1bae84d","modified":1537298297602},{"_id":"themes/vue/layout/page.ejs","hash":"8ccc26cf27c16e2c54bba0436a22c0d8299d574e","modified":1537298297603},{"_id":"themes/vue/layout/post.ejs","hash":"aa03915a3540de78cfe8fe1c8f9e897974bf35a0","modified":1537298297606},{"_id":"themes/vue/layout/partials/header.ejs","hash":"7e646d6d7074dcb2b277ea2d34ab2190b1f440f4","modified":1537298297604},{"_id":"themes/vue/layout/partials/main_menu.ejs","hash":"c6a8caea8d310d822d47c0dfaff157a9f1a4ef21","modified":1537298297604},{"_id":"themes/vue/layout/partials/sidebar.ejs","hash":"f4501f301d45233659a28533c7381443ad4f4071","modified":1537298297605},{"_id":"themes/vue/layout/partials/sponsors.ejs","hash":"8ce920fa38a01d79001da69697b0927e6c7f8018","modified":1537298297605},{"_id":"themes/vue/source/css/_common.styl","hash":"a0ff20d48bac7dca9a305d84aab10133b9915985","modified":1537298297606},{"_id":"themes/vue/source/css/_demo.styl","hash":"75e128f58b4a6ef5fe6a2ea3899d6831f8566390","modified":1537298297607},{"_id":"themes/vue/source/css/_header.styl","hash":"58deb9f0183b0470dbb68a147e1ef344fa8a682e","modified":1537298297608},{"_id":"themes/vue/source/css/_migration.styl","hash":"5ea4f20818827c0d57a36a3006b736366c3b446f","modified":1537298297608},{"_id":"themes/vue/source/css/_syntax.styl","hash":"983a213e780dbcdac966ace60194ee20343e74a0","modified":1537298297611},{"_id":"themes/vue/source/css/_settings.styl","hash":"c25843e8e63122df3f37f7583832ac577079d84b","modified":1537298297609},{"_id":"themes/vue/source/css/_sponsor.styl","hash":"6a4e1503b1e4f0e98e1e008ba846036fee3199aa","modified":1537298297610},{"_id":"themes/vue/source/css/_sidebar.styl","hash":"cf214c13aa0d286de019ed16633a21a0ed5660df","modified":1537298297610},{"_id":"themes/vue/source/css/benchmark.styl","hash":"95d4607b2b59623a673e131e1a267d0311fe89e6","modified":1537298297611},{"_id":"themes/vue/source/css/page.styl","hash":"34f22034ade34fe59cec9fe3554a5febac9b9894","modified":1537298297612},{"_id":"themes/vue/source/css/search.styl","hash":"5117f05598154cfc84da04ec1a257bd186653ba2","modified":1537298297613},{"_id":"themes/vue/source/css/index.styl","hash":"e16ed6d98d0d9a4cb73fb81d71a46f177a47c260","modified":1537298297612},{"_id":"themes/vue/source/js/vue-carousel.min.js","hash":"92f5040fb2617413bad78a4f0a384224d83151e9","modified":1547037270927},{"_id":"themes/vue/source/js/smooth-scroll.min.js","hash":"86d3196a003a5cdc673a4c6ebb75db3ceee1a1a7","modified":1537298297625},{"_id":"themes/vue/source/js/common.js","hash":"18f681ad46b4c68676af18dee60f96a3fdd9421c","modified":1537298297625},{"_id":"themes/vue/source/images/actualize.png","hash":"7b9c0fefb69cc4fad0520782f5445d495975bb57","modified":1537298297614},{"_id":"themes/vue/source/images/2mhost.png","hash":"a42a475ec7d2b36e82f420bd80a9957915dab2ce","modified":1537298297614},{"_id":"themes/vue/source/images/chaitin.png","hash":"0cca04b4c318b04be96ed066bc6ad3bb5f3788ec","modified":1537298297615},{"_id":"themes/vue/source/images/check.png","hash":"682cf89e1802afb1dfddf07a6aed828a45b824af","modified":1537298297615},{"_id":"themes/vue/source/images/feed.png","hash":"0a746dab71dca2025f63584dbd222dc5e0707ba8","modified":1537298297615},{"_id":"themes/vue/source/images/down.png","hash":"42505e12d686cf580f793bd9193acbac1e3e3a91","modified":1537298297615},{"_id":"themes/vue/source/images/icons.png","hash":"91225ef7011e59dbe6b4b9f2666133fb5e1bc976","modified":1537298297616},{"_id":"themes/vue/source/images/itunescn.png","hash":"75968c5e469bec3d061c9207ca872b2e57081015","modified":1537298297617},{"_id":"themes/vue/source/images/htmlburger.png","hash":"0005ef9559a88da3ff7b30b53e44acc5f1a14e46","modified":1537298297616},{"_id":"themes/vue/source/images/juejin.png","hash":"a346d9068f1e4f65262fdc885c5fb362ea3f36b8","modified":1537298297617},{"_id":"themes/vue/source/images/logo.png","hash":"79f7d5310f9ab78f52049fbb554303188cb36076","modified":1537298297619},{"_id":"themes/vue/source/images/laravel.png","hash":"d49fdacbae388601d2ff339b31aedd3c0dd3be3a","modified":1537298297618},{"_id":"themes/vue/source/images/jsfiddle.png","hash":"0646dceea2a62d3f5d2aabff4bdecffdf54cc8a7","modified":1537298297617},{"_id":"themes/vue/source/images/menu.png","hash":"bdaa35eb1ed119caeb934e15a05b9f4a5396d957","modified":1537298297619},{"_id":"themes/vue/source/images/patreon.png","hash":"c2455d5a6a59ff2b0ce5d698a74af7ed7226438c","modified":1537298297620},{"_id":"themes/vue/source/images/monterail.png","hash":"17b3a1f12f5c40b7b94ce320cc2ec9a4df9bca5e","modified":1537298297619},{"_id":"themes/vue/source/images/paypal.png","hash":"4db177273d209e621a99941d6457456a0950eb96","modified":1537298297620},{"_id":"themes/vue/source/images/search.png","hash":"12d664cc51b8d53c9214830bc9b92fb340526a7b","modified":1537298297621},{"_id":"themes/vue/source/images/someline.png","hash":"81ee000201cb80b19c7d79cc116c688c34163d36","modified":1537298297621},{"_id":"themes/vue/source/images/strikingly.png","hash":"d16ea35e0693928823b99efafc139f1ea1d6cb90","modified":1537298297622},{"_id":"themes/vue/source/images/transition.png","hash":"47b92628ea1263d651dab90093ff5682d2e54e68","modified":1537298297622},{"_id":"themes/vue/source/images/trisoft.png","hash":"c5689ce6833a3696406dc73bb50fa5b6b18b2dbe","modified":1537298297623},{"_id":"themes/vue/source/images/tde.png","hash":"ffa3a10004c2510cabd23ba99bdcb5012aab3835","modified":1537298297622},{"_id":"themes/vue/source/images/vuejobs.png","hash":"25aa2ef77fcb62051036171942f3575af2a12e9c","modified":1537298297624},{"_id":"themes/vue/source/js/vue.min.js","hash":"1e9ef27fa8e28cd9f5af14ba562a1cb983e49855","modified":1537298297630},{"_id":"themes/vue/source/js/vue.js","hash":"be10c44019f6577b8f80e233ddb31f1f6b367f65","modified":1537298297629},{"_id":"public/examples/index.html","hash":"d0b0b6a6b0b8cec4c6bf4508c4fd0b334065468e","modified":1543369831539},{"_id":"public/guide/index.html","hash":"b2f9f0e48db345e5925642a584b62ad7cbb0b973","modified":1543369831539},{"_id":"public/2016/12/29/home/index.html","hash":"9be9a4f07793ca34ad12a917e2f66aea86c9a906","modified":1548015721063},{"_id":"public/archives/index.html","hash":"889cbf3f7f6ce1b7f6f35c8ebc9a280b836deb9f","modified":1548015721063},{"_id":"public/archives/2016/index.html","hash":"889cbf3f7f6ce1b7f6f35c8ebc9a280b836deb9f","modified":1548015721064},{"_id":"public/archives/2016/12/index.html","hash":"889cbf3f7f6ce1b7f6f35c8ebc9a280b836deb9f","modified":1548015721064},{"_id":"public/index.html","hash":"aaad3c6c1ff8395ccabd12594b305a03020194cb","modified":1548015721053},{"_id":"public/api/index.html","hash":"98dde2a2896021646ee363cfb2135962460559eb","modified":1548015721059},{"_id":"public/images/actualize.png","hash":"7b9c0fefb69cc4fad0520782f5445d495975bb57","modified":1543369831547},{"_id":"public/images/2mhost.png","hash":"a42a475ec7d2b36e82f420bd80a9957915dab2ce","modified":1548015721067},{"_id":"public/images/chaitin.png","hash":"0cca04b4c318b04be96ed066bc6ad3bb5f3788ec","modified":1543369831547},{"_id":"public/images/check.png","hash":"682cf89e1802afb1dfddf07a6aed828a45b824af","modified":1543369831547},{"_id":"public/images/feed.png","hash":"0a746dab71dca2025f63584dbd222dc5e0707ba8","modified":1543369831547},{"_id":"public/images/down.png","hash":"42505e12d686cf580f793bd9193acbac1e3e3a91","modified":1543369831548},{"_id":"public/images/icons.png","hash":"91225ef7011e59dbe6b4b9f2666133fb5e1bc976","modified":1543369831548},{"_id":"public/images/itunescn.png","hash":"75968c5e469bec3d061c9207ca872b2e57081015","modified":1543369831548},{"_id":"public/images/htmlburger.png","hash":"0005ef9559a88da3ff7b30b53e44acc5f1a14e46","modified":1543369831548},{"_id":"public/images/juejin.png","hash":"a346d9068f1e4f65262fdc885c5fb362ea3f36b8","modified":1543369831548},{"_id":"public/images/logo.png","hash":"79f7d5310f9ab78f52049fbb554303188cb36076","modified":1543369831548},{"_id":"public/images/laravel.png","hash":"d49fdacbae388601d2ff339b31aedd3c0dd3be3a","modified":1543369831548},{"_id":"public/images/jsfiddle.png","hash":"0646dceea2a62d3f5d2aabff4bdecffdf54cc8a7","modified":1543369831548},{"_id":"public/images/menu.png","hash":"bdaa35eb1ed119caeb934e15a05b9f4a5396d957","modified":1543369831548},{"_id":"public/images/patreon.png","hash":"c2455d5a6a59ff2b0ce5d698a74af7ed7226438c","modified":1543369831548},{"_id":"public/images/monterail.png","hash":"17b3a1f12f5c40b7b94ce320cc2ec9a4df9bca5e","modified":1543369831548},{"_id":"public/images/paypal.png","hash":"4db177273d209e621a99941d6457456a0950eb96","modified":1543369831549},{"_id":"public/images/search.png","hash":"12d664cc51b8d53c9214830bc9b92fb340526a7b","modified":1543369831549},{"_id":"public/images/someline.png","hash":"81ee000201cb80b19c7d79cc116c688c34163d36","modified":1543369831549},{"_id":"public/images/strikingly.png","hash":"d16ea35e0693928823b99efafc139f1ea1d6cb90","modified":1543369831549},{"_id":"public/images/transition.png","hash":"47b92628ea1263d651dab90093ff5682d2e54e68","modified":1543369831549},{"_id":"public/images/trisoft.png","hash":"c5689ce6833a3696406dc73bb50fa5b6b18b2dbe","modified":1543369831549},{"_id":"public/images/tde.png","hash":"ffa3a10004c2510cabd23ba99bdcb5012aab3835","modified":1543369831549},{"_id":"public/images/vuejobs.png","hash":"25aa2ef77fcb62051036171942f3575af2a12e9c","modified":1543369831549},{"_id":"public/css/benchmark.css","hash":"3424ee8c27052da2ab9f544027f49e1550385e9d","modified":1543369831922},{"_id":"public/css/page.css","hash":"1b5eb04f2d67e8ac9aaa14849538c0cec2e248e6","modified":1543369831922},{"_id":"public/css/search.css","hash":"ac9a0e8c8da7919174caea15d9704c192ea3a2c4","modified":1543369831923},{"_id":"public/css/index.css","hash":"b3be18d6034ceaa73d409f7aaeecd18cccb7d3aa","modified":1543369831923},{"_id":"public/js/smooth-scroll.min.js","hash":"86d3196a003a5cdc673a4c6ebb75db3ceee1a1a7","modified":1543369831923},{"_id":"public/js/common.js","hash":"18f681ad46b4c68676af18dee60f96a3fdd9421c","modified":1543369831928},{"_id":"public/js/vue-carousel.min.js","hash":"b7527067600098d11ebdfdeef9c2c4bf2e7ae613","modified":1543369831946},{"_id":"public/js/vue.min.js","hash":"1e9ef27fa8e28cd9f5af14ba562a1cb983e49855","modified":1543369831950},{"_id":"public/js/vue.js","hash":"be10c44019f6577b8f80e233ddb31f1f6b367f65","modified":1543369831955}],"Category":[],"Data":[],"Page":[{"title":"API","_content":"\n## Global config\n\n### adjustableHeight\n\nAdjust the height of the carousel for the current slide.\n\n* **Type**: `Boolean`\n* **Default**: `false`\n\n### adjustableHeightEasing\n\nSlide transition easing for adjustableHeight.\n\n* **Type**: `String`\n\n### autoplay\n\nFlag to enable autoplay.\n\n* **Type**: `Boolean`\n* **Default**: `false`\n\n### autoplayDirection\n\nSets the autoplay direction for the carousel during autoplay.\n\n* **Type**: `String`\n* **Default**: `forward`\n\n### autoplayTimeout\n\nTime elapsed before advancing slide in autoplay.\n\n* **Type**: `Number`\n* **Default**: `2000`\n\n### autoplayHoverPause\n\nFlag to pause autoplay on hover.\n\n* **Type**: `Boolean`\n* **Default**: `true`\n\n### centerMode\n\nCenter images when the size is less than the container width\n\n* **Type**: `Boolean`\n* **Default**: `false`\n\n### easing\n\nTransition speed between slides. Any valid CSS transition easing is accepted.\n\n* **Type**: `String`\n* **Default**: `ease`\n\n### loop\n\nFlag to make the carousel loop (wrap) when it reaches either end.\n\n* **Type**: `Boolean`\n* **Default**: `false`\n\n### minSwipeDistance\n\nMinimum distance in pixels to swipe before a slide advance is triggered.\n\n* **Type**: `Number`\n* **Default**: `8`\n\n### mouseDrag\n\nFlag to toggle mouse dragging.\n\n* **Type**: `Boolean`\n* **Default** `true`\n\n### perPage\n\nMaximum number of slides displayed on each page.\n\n* **Type**: `Number`\n* **Default**: `2`\n\n### perPageCustom\n\nConfigure the number of visible slides for responsive breakpoints.\n\nThis will be an array of arrays. Each array is formatted as [x, y] where x is the browser width, and y is the number of slides displayed.\n\n* **Type**: `Array`\n* **Usage**:\n\n``` html\n<carousel :per-page-custom=\"[[768, 3], [1024, 4]]\">\n```\n\nA mobile-first strategy is used to determine the matching breakpoint. In the above example, the [perPage](/vue-carousel/api#perPage) variable has not been set, so the default of **2** is used. If the window size is greater than or equal to 768px, then 3 slides are shown. If the width is greater than or equal to 1024, then 4 slides are shown.\n\n### resistanceCoef\n\nResistance coefficient to dragging on the edge of the carousel. This dictates the effect of the pull as you move towards the boundaries.\n\n* **Type**: `Number`\n* **Default**: `20`\n\n### scrollPerPage\n\nScroll per page, not per item.\n\n* **Type**: `Boolean`\n* **Default**: `false`\n\n### size\n\nSize of each pagination dot. Pixel values are accepted.\n\n* **Type** `Number`\n* **Default**: `10`\n\n### spacePadding\n\nStage padding option adds left and right padding style (in pixels) onto VueCarousel-inner.\n\n* **Type**: `Number`\n* **Default**: `0`\n\n### spacePaddingMaxOffsetFactor\n\nSpecify by how much should the space padding value be multiplied of, to re-arange the final slide padding.\n\n* **Type** `Number`\n* **Default**: `0`\n\n### speed\n\nSlide transition speed. Number of milliseconds accepted.\n\n* **Type** `Number`\n* **Default**: `500`\n\n### value\n\nSupport for v-model functionality.\nSetting this value will change the current page to the number inputted (if between 0 and pageCount).\n\n* **Type** `Number`\n\n## Navigation\n\nConfigure the navigation component (next/prev buttons)\n\n### navigationEnabled\n\nFlag to render the navigation component (next/prev buttons).\n\n* **Type**: `Boolean`\n* **Default**: `false`\n\n### navigateTo\n\nAllow carousel parent to programatically navigate to a specific slide (zero based index). Recommend using parent data attribute pageNo and carousel pageChange event to keep pageNo in sync with carousel.currentPage to handle subsequent navigation.\n\n* **Type**: `Number`\n* **Default**: 0\n\n### navigationClickTargetSize\n\nAmount of padding to apply around the label in pixels.\n\n* **Type**: `Number`\n* **Default**: `8`\n\n### navigationNextLabel\n\nText content of the navigation next button.\n\n* **Type**: `String`\n* **Default**: `▶`\n\n### navigationPrevLabel\n\nText content of the navigation prev button.\n\n* **Type**: `String`\n* **Default**: `◀`\n\n### navigateTo\n\nAllow carousel parent to programatically navigate to a specific slide (zero based index). Recommend using parent data attribute pageNo and carousel pageChange event to keep pageNo in sync with carousel.currentPage to handle subsequent navigation. To disable the sliding animation the following syntax is to be followed-  :navigateTo=[index, false] where index is the slide number (starts from zero) you want to navigate to.\n* **Type**: `Number` | `Array`\n* **Default**: 0\n\n## Pagination\n\nConfigure the pagination component (clickable page dots)\n\n### paginationEnabled\n\nFlag to render pagination component.\n\n* **Type**: `Boolean`\n* **Default**: `true`\n\n### paginationActiveColor\n\nThe fill color of the active pagination dot. Any valid CSS color is accepted.\n\n* **Type**: `String`\n* **Default**: `#000000`\n\n### paginationColor\n\nThe fill color of pagination dots. Any valid CSS color is accepted.\n\n* **Type**: `String`\n* **Default**: `#efefef`\n\n### paginationPosition\n\nThe position of pagination dots. Possible values are `bottom`, `bottom-overlay`, `top` and `top-overlay`. The overlay values place the pagination component over the images.\n\n* **Type**: `String`\n* **Default**: `bottom`\n\n### paginationPadding\n\nThe padding inside each pagination dot. Pixel values are accepted.\n\n* **Type**: `Number`\n* **Default**: `10`\n\n### paginationSize\n\nThe size of each pagination dot. Pixel values are accepted.\n\n* **Type**: `Number`\n* **Default**: `10`\n\n### spacePadding\n\nStage padding option adds left and right padding style (in pixels) onto VueCarousel-inner.\n\n* **Type**: `Number`\n* **Default**: `0`\n\n## Custom Pagination & Navigation\n\nUse named slots to render pagination and navigation using components.\n\n``` html\n  <carousel>\n    <slide>\n      Slide 1 Content\n    </slide>\n    <slide>\n      Slide 2 Content\n    </slide>\n\n    <numbered-pagination slot=\"pagination\" />\n    <stylish-navigation slot=\"navigation\" />\n  </carousel>\n```\n\nYour components can access the `carousel` provider by adding the following to you component configuration:\n\n```\n  name: \"numbered-pagination\",\n  inject: [\"carousel\"]\n```\n\n## Events\n\nEvents emitted from components\n\n### page-change\n\n`page-change` event emits the value of the current page.\n\n* **Type**: `Number`\n* **Emitter**: `Carousel`\n\n### slide-click\n\n`slide-click` event throws the *dataset* object of the selected element.\n\n* **Type**: `Object`\n* **Emitter**: `Slide`\n\n### transition-start\n\n`transition-start` event is thrown when the transition starts.\n\n* **Type**: `none`\n* **Emitter**: `Carousel`\n\n### transition-end\n\n`transition-end` event is thrown when the transition end is reached.\n\n* **Type**: `none`\n* **Emitter**: `Carousel`\n\n> Lowercase versions of the above events are also emitted, namely—`pagechange`, `slideclick`, `transitionstart` and `transitionend`.\n","source":"api/index.md","raw":"---\ntitle: API\n---\n\n## Global config\n\n### adjustableHeight\n\nAdjust the height of the carousel for the current slide.\n\n* **Type**: `Boolean`\n* **Default**: `false`\n\n### adjustableHeightEasing\n\nSlide transition easing for adjustableHeight.\n\n* **Type**: `String`\n\n### autoplay\n\nFlag to enable autoplay.\n\n* **Type**: `Boolean`\n* **Default**: `false`\n\n### autoplayDirection\n\nSets the autoplay direction for the carousel during autoplay.\n\n* **Type**: `String`\n* **Default**: `forward`\n\n### autoplayTimeout\n\nTime elapsed before advancing slide in autoplay.\n\n* **Type**: `Number`\n* **Default**: `2000`\n\n### autoplayHoverPause\n\nFlag to pause autoplay on hover.\n\n* **Type**: `Boolean`\n* **Default**: `true`\n\n### centerMode\n\nCenter images when the size is less than the container width\n\n* **Type**: `Boolean`\n* **Default**: `false`\n\n### easing\n\nTransition speed between slides. Any valid CSS transition easing is accepted.\n\n* **Type**: `String`\n* **Default**: `ease`\n\n### loop\n\nFlag to make the carousel loop (wrap) when it reaches either end.\n\n* **Type**: `Boolean`\n* **Default**: `false`\n\n### minSwipeDistance\n\nMinimum distance in pixels to swipe before a slide advance is triggered.\n\n* **Type**: `Number`\n* **Default**: `8`\n\n### mouseDrag\n\nFlag to toggle mouse dragging.\n\n* **Type**: `Boolean`\n* **Default** `true`\n\n### perPage\n\nMaximum number of slides displayed on each page.\n\n* **Type**: `Number`\n* **Default**: `2`\n\n### perPageCustom\n\nConfigure the number of visible slides for responsive breakpoints.\n\nThis will be an array of arrays. Each array is formatted as [x, y] where x is the browser width, and y is the number of slides displayed.\n\n* **Type**: `Array`\n* **Usage**:\n\n``` html\n<carousel :per-page-custom=\"[[768, 3], [1024, 4]]\">\n```\n\nA mobile-first strategy is used to determine the matching breakpoint. In the above example, the [perPage](/vue-carousel/api#perPage) variable has not been set, so the default of **2** is used. If the window size is greater than or equal to 768px, then 3 slides are shown. If the width is greater than or equal to 1024, then 4 slides are shown.\n\n### resistanceCoef\n\nResistance coefficient to dragging on the edge of the carousel. This dictates the effect of the pull as you move towards the boundaries.\n\n* **Type**: `Number`\n* **Default**: `20`\n\n### scrollPerPage\n\nScroll per page, not per item.\n\n* **Type**: `Boolean`\n* **Default**: `false`\n\n### size\n\nSize of each pagination dot. Pixel values are accepted.\n\n* **Type** `Number`\n* **Default**: `10`\n\n### spacePadding\n\nStage padding option adds left and right padding style (in pixels) onto VueCarousel-inner.\n\n* **Type**: `Number`\n* **Default**: `0`\n\n### spacePaddingMaxOffsetFactor\n\nSpecify by how much should the space padding value be multiplied of, to re-arange the final slide padding.\n\n* **Type** `Number`\n* **Default**: `0`\n\n### speed\n\nSlide transition speed. Number of milliseconds accepted.\n\n* **Type** `Number`\n* **Default**: `500`\n\n### value\n\nSupport for v-model functionality.\nSetting this value will change the current page to the number inputted (if between 0 and pageCount).\n\n* **Type** `Number`\n\n## Navigation\n\nConfigure the navigation component (next/prev buttons)\n\n### navigationEnabled\n\nFlag to render the navigation component (next/prev buttons).\n\n* **Type**: `Boolean`\n* **Default**: `false`\n\n### navigateTo\n\nAllow carousel parent to programatically navigate to a specific slide (zero based index). Recommend using parent data attribute pageNo and carousel pageChange event to keep pageNo in sync with carousel.currentPage to handle subsequent navigation.\n\n* **Type**: `Number`\n* **Default**: 0\n\n### navigationClickTargetSize\n\nAmount of padding to apply around the label in pixels.\n\n* **Type**: `Number`\n* **Default**: `8`\n\n### navigationNextLabel\n\nText content of the navigation next button.\n\n* **Type**: `String`\n* **Default**: `▶`\n\n### navigationPrevLabel\n\nText content of the navigation prev button.\n\n* **Type**: `String`\n* **Default**: `◀`\n\n### navigateTo\n\nAllow carousel parent to programatically navigate to a specific slide (zero based index). Recommend using parent data attribute pageNo and carousel pageChange event to keep pageNo in sync with carousel.currentPage to handle subsequent navigation. To disable the sliding animation the following syntax is to be followed-  :navigateTo=[index, false] where index is the slide number (starts from zero) you want to navigate to.\n* **Type**: `Number` | `Array`\n* **Default**: 0\n\n## Pagination\n\nConfigure the pagination component (clickable page dots)\n\n### paginationEnabled\n\nFlag to render pagination component.\n\n* **Type**: `Boolean`\n* **Default**: `true`\n\n### paginationActiveColor\n\nThe fill color of the active pagination dot. Any valid CSS color is accepted.\n\n* **Type**: `String`\n* **Default**: `#000000`\n\n### paginationColor\n\nThe fill color of pagination dots. Any valid CSS color is accepted.\n\n* **Type**: `String`\n* **Default**: `#efefef`\n\n### paginationPosition\n\nThe position of pagination dots. Possible values are `bottom`, `bottom-overlay`, `top` and `top-overlay`. The overlay values place the pagination component over the images.\n\n* **Type**: `String`\n* **Default**: `bottom`\n\n### paginationPadding\n\nThe padding inside each pagination dot. Pixel values are accepted.\n\n* **Type**: `Number`\n* **Default**: `10`\n\n### paginationSize\n\nThe size of each pagination dot. Pixel values are accepted.\n\n* **Type**: `Number`\n* **Default**: `10`\n\n### spacePadding\n\nStage padding option adds left and right padding style (in pixels) onto VueCarousel-inner.\n\n* **Type**: `Number`\n* **Default**: `0`\n\n## Custom Pagination & Navigation\n\nUse named slots to render pagination and navigation using components.\n\n``` html\n  <carousel>\n    <slide>\n      Slide 1 Content\n    </slide>\n    <slide>\n      Slide 2 Content\n    </slide>\n\n    <numbered-pagination slot=\"pagination\" />\n    <stylish-navigation slot=\"navigation\" />\n  </carousel>\n```\n\nYour components can access the `carousel` provider by adding the following to you component configuration:\n\n```\n  name: \"numbered-pagination\",\n  inject: [\"carousel\"]\n```\n\n## Events\n\nEvents emitted from components\n\n### page-change\n\n`page-change` event emits the value of the current page.\n\n* **Type**: `Number`\n* **Emitter**: `Carousel`\n\n### slide-click\n\n`slide-click` event throws the *dataset* object of the selected element.\n\n* **Type**: `Object`\n* **Emitter**: `Slide`\n\n### transition-start\n\n`transition-start` event is thrown when the transition starts.\n\n* **Type**: `none`\n* **Emitter**: `Carousel`\n\n### transition-end\n\n`transition-end` event is thrown when the transition end is reached.\n\n* **Type**: `none`\n* **Emitter**: `Carousel`\n\n> Lowercase versions of the above events are also emitted, namely—`pagechange`, `slideclick`, `transitionstart` and `transitionend`.\n","date":"2019-01-20T20:02:39.085Z","updated":"2019-01-20T20:02:39.085Z","path":"api/index.html","_id":"cjp0ijrd20001clqg3adqst07","comments":1,"layout":"page","content":"<h2 id=\"Global-config\"><a href=\"#Global-config\" class=\"headerlink\" title=\"Global config\"></a>Global config</h2><h3 id=\"adjustableHeight\"><a href=\"#adjustableHeight\" class=\"headerlink\" title=\"adjustableHeight\"></a>adjustableHeight</h3><p>Adjust the height of the carousel for the current slide.</p>\n<ul>\n<li><strong>Type</strong>: <code>Boolean</code></li>\n<li><strong>Default</strong>: <code>false</code></li>\n</ul>\n<h3 id=\"adjustableHeightEasing\"><a href=\"#adjustableHeightEasing\" class=\"headerlink\" title=\"adjustableHeightEasing\"></a>adjustableHeightEasing</h3><p>Slide transition easing for adjustableHeight.</p>\n<ul>\n<li><strong>Type</strong>: <code>String</code></li>\n</ul>\n<h3 id=\"autoplay\"><a href=\"#autoplay\" class=\"headerlink\" title=\"autoplay\"></a>autoplay</h3><p>Flag to enable autoplay.</p>\n<ul>\n<li><strong>Type</strong>: <code>Boolean</code></li>\n<li><strong>Default</strong>: <code>false</code></li>\n</ul>\n<h3 id=\"autoplayDirection\"><a href=\"#autoplayDirection\" class=\"headerlink\" title=\"autoplayDirection\"></a>autoplayDirection</h3><p>Sets the autoplay direction for the carousel during autoplay.</p>\n<ul>\n<li><strong>Type</strong>: <code>String</code></li>\n<li><strong>Default</strong>: <code>forward</code></li>\n</ul>\n<h3 id=\"autoplayTimeout\"><a href=\"#autoplayTimeout\" class=\"headerlink\" title=\"autoplayTimeout\"></a>autoplayTimeout</h3><p>Time elapsed before advancing slide in autoplay.</p>\n<ul>\n<li><strong>Type</strong>: <code>Number</code></li>\n<li><strong>Default</strong>: <code>2000</code></li>\n</ul>\n<h3 id=\"autoplayHoverPause\"><a href=\"#autoplayHoverPause\" class=\"headerlink\" title=\"autoplayHoverPause\"></a>autoplayHoverPause</h3><p>Flag to pause autoplay on hover.</p>\n<ul>\n<li><strong>Type</strong>: <code>Boolean</code></li>\n<li><strong>Default</strong>: <code>true</code></li>\n</ul>\n<h3 id=\"centerMode\"><a href=\"#centerMode\" class=\"headerlink\" title=\"centerMode\"></a>centerMode</h3><p>Center images when the size is less than the container width</p>\n<ul>\n<li><strong>Type</strong>: <code>Boolean</code></li>\n<li><strong>Default</strong>: <code>false</code></li>\n</ul>\n<h3 id=\"easing\"><a href=\"#easing\" class=\"headerlink\" title=\"easing\"></a>easing</h3><p>Transition speed between slides. Any valid CSS transition easing is accepted.</p>\n<ul>\n<li><strong>Type</strong>: <code>String</code></li>\n<li><strong>Default</strong>: <code>ease</code></li>\n</ul>\n<h3 id=\"loop\"><a href=\"#loop\" class=\"headerlink\" title=\"loop\"></a>loop</h3><p>Flag to make the carousel loop (wrap) when it reaches either end.</p>\n<ul>\n<li><strong>Type</strong>: <code>Boolean</code></li>\n<li><strong>Default</strong>: <code>false</code></li>\n</ul>\n<h3 id=\"minSwipeDistance\"><a href=\"#minSwipeDistance\" class=\"headerlink\" title=\"minSwipeDistance\"></a>minSwipeDistance</h3><p>Minimum distance in pixels to swipe before a slide advance is triggered.</p>\n<ul>\n<li><strong>Type</strong>: <code>Number</code></li>\n<li><strong>Default</strong>: <code>8</code></li>\n</ul>\n<h3 id=\"mouseDrag\"><a href=\"#mouseDrag\" class=\"headerlink\" title=\"mouseDrag\"></a>mouseDrag</h3><p>Flag to toggle mouse dragging.</p>\n<ul>\n<li><strong>Type</strong>: <code>Boolean</code></li>\n<li><strong>Default</strong> <code>true</code></li>\n</ul>\n<h3 id=\"perPage\"><a href=\"#perPage\" class=\"headerlink\" title=\"perPage\"></a>perPage</h3><p>Maximum number of slides displayed on each page.</p>\n<ul>\n<li><strong>Type</strong>: <code>Number</code></li>\n<li><strong>Default</strong>: <code>2</code></li>\n</ul>\n<h3 id=\"perPageCustom\"><a href=\"#perPageCustom\" class=\"headerlink\" title=\"perPageCustom\"></a>perPageCustom</h3><p>Configure the number of visible slides for responsive breakpoints.</p>\n<p>This will be an array of arrays. Each array is formatted as [x, y] where x is the browser width, and y is the number of slides displayed.</p>\n<ul>\n<li><strong>Type</strong>: <code>Array</code></li>\n<li><strong>Usage</strong>:</li>\n</ul>\n<figure class=\"highlight html\"><table><tr><td class=\"gutter\"><pre><div class=\"line\">1</div></pre></td><td class=\"code\"><pre><div class=\"line\"><span class=\"tag\">&lt;<span class=\"name\">carousel</span> <span class=\"attr\">:per-page-custom</span>=<span class=\"string\">\"[[768, 3], [1024, 4]]\"</span>&gt;</span></div></pre></td></tr></table></figure>\n<p>A mobile-first strategy is used to determine the matching breakpoint. In the above example, the <a href=\"/vue-carousel/api#perPage\">perPage</a> variable has not been set, so the default of <strong>2</strong> is used. If the window size is greater than or equal to 768px, then 3 slides are shown. If the width is greater than or equal to 1024, then 4 slides are shown.</p>\n<h3 id=\"resistanceCoef\"><a href=\"#resistanceCoef\" class=\"headerlink\" title=\"resistanceCoef\"></a>resistanceCoef</h3><p>Resistance coefficient to dragging on the edge of the carousel. This dictates the effect of the pull as you move towards the boundaries.</p>\n<ul>\n<li><strong>Type</strong>: <code>Number</code></li>\n<li><strong>Default</strong>: <code>20</code></li>\n</ul>\n<h3 id=\"scrollPerPage\"><a href=\"#scrollPerPage\" class=\"headerlink\" title=\"scrollPerPage\"></a>scrollPerPage</h3><p>Scroll per page, not per item.</p>\n<ul>\n<li><strong>Type</strong>: <code>Boolean</code></li>\n<li><strong>Default</strong>: <code>false</code></li>\n</ul>\n<h3 id=\"size\"><a href=\"#size\" class=\"headerlink\" title=\"size\"></a>size</h3><p>Size of each pagination dot. Pixel values are accepted.</p>\n<ul>\n<li><strong>Type</strong> <code>Number</code></li>\n<li><strong>Default</strong>: <code>10</code></li>\n</ul>\n<h3 id=\"spacePadding\"><a href=\"#spacePadding\" class=\"headerlink\" title=\"spacePadding\"></a>spacePadding</h3><p>Stage padding option adds left and right padding style (in pixels) onto VueCarousel-inner.</p>\n<ul>\n<li><strong>Type</strong>: <code>Number</code></li>\n<li><strong>Default</strong>: <code>0</code></li>\n</ul>\n<h3 id=\"spacePaddingMaxOffsetFactor\"><a href=\"#spacePaddingMaxOffsetFactor\" class=\"headerlink\" title=\"spacePaddingMaxOffsetFactor\"></a>spacePaddingMaxOffsetFactor</h3><p>Specify by how much should the space padding value be multiplied of, to re-arange the final slide padding.</p>\n<ul>\n<li><strong>Type</strong> <code>Number</code></li>\n<li><strong>Default</strong>: <code>0</code></li>\n</ul>\n<h3 id=\"speed\"><a href=\"#speed\" class=\"headerlink\" title=\"speed\"></a>speed</h3><p>Slide transition speed. Number of milliseconds accepted.</p>\n<ul>\n<li><strong>Type</strong> <code>Number</code></li>\n<li><strong>Default</strong>: <code>500</code></li>\n</ul>\n<h3 id=\"value\"><a href=\"#value\" class=\"headerlink\" title=\"value\"></a>value</h3><p>Support for v-model functionality.<br>Setting this value will change the current page to the number inputted (if between 0 and pageCount).</p>\n<ul>\n<li><strong>Type</strong> <code>Number</code></li>\n</ul>\n<h2 id=\"Navigation\"><a href=\"#Navigation\" class=\"headerlink\" title=\"Navigation\"></a>Navigation</h2><p>Configure the navigation component (next/prev buttons)</p>\n<h3 id=\"navigationEnabled\"><a href=\"#navigationEnabled\" class=\"headerlink\" title=\"navigationEnabled\"></a>navigationEnabled</h3><p>Flag to render the navigation component (next/prev buttons).</p>\n<ul>\n<li><strong>Type</strong>: <code>Boolean</code></li>\n<li><strong>Default</strong>: <code>false</code></li>\n</ul>\n<h3 id=\"navigateTo\"><a href=\"#navigateTo\" class=\"headerlink\" title=\"navigateTo\"></a>navigateTo</h3><p>Allow carousel parent to programatically navigate to a specific slide (zero based index). Recommend using parent data attribute pageNo and carousel pageChange event to keep pageNo in sync with carousel.currentPage to handle subsequent navigation.</p>\n<ul>\n<li><strong>Type</strong>: <code>Number</code></li>\n<li><strong>Default</strong>: 0</li>\n</ul>\n<h3 id=\"navigationClickTargetSize\"><a href=\"#navigationClickTargetSize\" class=\"headerlink\" title=\"navigationClickTargetSize\"></a>navigationClickTargetSize</h3><p>Amount of padding to apply around the label in pixels.</p>\n<ul>\n<li><strong>Type</strong>: <code>Number</code></li>\n<li><strong>Default</strong>: <code>8</code></li>\n</ul>\n<h3 id=\"navigationNextLabel\"><a href=\"#navigationNextLabel\" class=\"headerlink\" title=\"navigationNextLabel\"></a>navigationNextLabel</h3><p>Text content of the navigation next button.</p>\n<ul>\n<li><strong>Type</strong>: <code>String</code></li>\n<li><strong>Default</strong>: <code>▶</code></li>\n</ul>\n<h3 id=\"navigationPrevLabel\"><a href=\"#navigationPrevLabel\" class=\"headerlink\" title=\"navigationPrevLabel\"></a>navigationPrevLabel</h3><p>Text content of the navigation prev button.</p>\n<ul>\n<li><strong>Type</strong>: <code>String</code></li>\n<li><strong>Default</strong>: <code>◀</code></li>\n</ul>\n<h3 id=\"navigateTo-1\"><a href=\"#navigateTo-1\" class=\"headerlink\" title=\"navigateTo\"></a>navigateTo</h3><p>Allow carousel parent to programatically navigate to a specific slide (zero based index). Recommend using parent data attribute pageNo and carousel pageChange event to keep pageNo in sync with carousel.currentPage to handle subsequent navigation. To disable the sliding animation the following syntax is to be followed-  :navigateTo=[index, false] where index is the slide number (starts from zero) you want to navigate to.</p>\n<ul>\n<li><strong>Type</strong>: <code>Number</code> | <code>Array</code></li>\n<li><strong>Default</strong>: 0</li>\n</ul>\n<h2 id=\"Pagination\"><a href=\"#Pagination\" class=\"headerlink\" title=\"Pagination\"></a>Pagination</h2><p>Configure the pagination component (clickable page dots)</p>\n<h3 id=\"paginationEnabled\"><a href=\"#paginationEnabled\" class=\"headerlink\" title=\"paginationEnabled\"></a>paginationEnabled</h3><p>Flag to render pagination component.</p>\n<ul>\n<li><strong>Type</strong>: <code>Boolean</code></li>\n<li><strong>Default</strong>: <code>true</code></li>\n</ul>\n<h3 id=\"paginationActiveColor\"><a href=\"#paginationActiveColor\" class=\"headerlink\" title=\"paginationActiveColor\"></a>paginationActiveColor</h3><p>The fill color of the active pagination dot. Any valid CSS color is accepted.</p>\n<ul>\n<li><strong>Type</strong>: <code>String</code></li>\n<li><strong>Default</strong>: <code>#000000</code></li>\n</ul>\n<h3 id=\"paginationColor\"><a href=\"#paginationColor\" class=\"headerlink\" title=\"paginationColor\"></a>paginationColor</h3><p>The fill color of pagination dots. Any valid CSS color is accepted.</p>\n<ul>\n<li><strong>Type</strong>: <code>String</code></li>\n<li><strong>Default</strong>: <code>#efefef</code></li>\n</ul>\n<h3 id=\"paginationPosition\"><a href=\"#paginationPosition\" class=\"headerlink\" title=\"paginationPosition\"></a>paginationPosition</h3><p>The position of pagination dots. Possible values are <code>bottom</code>, <code>bottom-overlay</code>, <code>top</code> and <code>top-overlay</code>. The overlay values place the pagination component over the images.</p>\n<ul>\n<li><strong>Type</strong>: <code>String</code></li>\n<li><strong>Default</strong>: <code>bottom</code></li>\n</ul>\n<h3 id=\"paginationPadding\"><a href=\"#paginationPadding\" class=\"headerlink\" title=\"paginationPadding\"></a>paginationPadding</h3><p>The padding inside each pagination dot. Pixel values are accepted.</p>\n<ul>\n<li><strong>Type</strong>: <code>Number</code></li>\n<li><strong>Default</strong>: <code>10</code></li>\n</ul>\n<h3 id=\"paginationSize\"><a href=\"#paginationSize\" class=\"headerlink\" title=\"paginationSize\"></a>paginationSize</h3><p>The size of each pagination dot. Pixel values are accepted.</p>\n<ul>\n<li><strong>Type</strong>: <code>Number</code></li>\n<li><strong>Default</strong>: <code>10</code></li>\n</ul>\n<h3 id=\"spacePadding-1\"><a href=\"#spacePadding-1\" class=\"headerlink\" title=\"spacePadding\"></a>spacePadding</h3><p>Stage padding option adds left and right padding style (in pixels) onto VueCarousel-inner.</p>\n<ul>\n<li><strong>Type</strong>: <code>Number</code></li>\n<li><strong>Default</strong>: <code>0</code></li>\n</ul>\n<h2 id=\"Custom-Pagination-amp-Navigation\"><a href=\"#Custom-Pagination-amp-Navigation\" class=\"headerlink\" title=\"Custom Pagination &amp; Navigation\"></a>Custom Pagination &amp; Navigation</h2><p>Use named slots to render pagination and navigation using components.</p>\n<figure class=\"highlight html\"><table><tr><td class=\"gutter\"><pre><div class=\"line\">1</div><div class=\"line\">2</div><div class=\"line\">3</div><div class=\"line\">4</div><div class=\"line\">5</div><div class=\"line\">6</div><div class=\"line\">7</div><div class=\"line\">8</div><div class=\"line\">9</div><div class=\"line\">10</div><div class=\"line\">11</div></pre></td><td class=\"code\"><pre><div class=\"line\"><span class=\"tag\">&lt;<span class=\"name\">carousel</span>&gt;</span></div><div class=\"line\">  <span class=\"tag\">&lt;<span class=\"name\">slide</span>&gt;</span></div><div class=\"line\">    Slide 1 Content</div><div class=\"line\">  <span class=\"tag\">&lt;/<span class=\"name\">slide</span>&gt;</span></div><div class=\"line\">  <span class=\"tag\">&lt;<span class=\"name\">slide</span>&gt;</span></div><div class=\"line\">    Slide 2 Content</div><div class=\"line\">  <span class=\"tag\">&lt;/<span class=\"name\">slide</span>&gt;</span></div><div class=\"line\"></div><div class=\"line\">  <span class=\"tag\">&lt;<span class=\"name\">numbered-pagination</span> <span class=\"attr\">slot</span>=<span class=\"string\">\"pagination\"</span> /&gt;</span></div><div class=\"line\">  <span class=\"tag\">&lt;<span class=\"name\">stylish-navigation</span> <span class=\"attr\">slot</span>=<span class=\"string\">\"navigation\"</span> /&gt;</span></div><div class=\"line\"><span class=\"tag\">&lt;/<span class=\"name\">carousel</span>&gt;</span></div></pre></td></tr></table></figure>\n<p>Your components can access the <code>carousel</code> provider by adding the following to you component configuration:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"gutter\"><pre><div class=\"line\">1</div><div class=\"line\">2</div></pre></td><td class=\"code\"><pre><div class=\"line\">name: &quot;numbered-pagination&quot;,</div><div class=\"line\">inject: [&quot;carousel&quot;]</div></pre></td></tr></table></figure>\n<h2 id=\"Events\"><a href=\"#Events\" class=\"headerlink\" title=\"Events\"></a>Events</h2><p>Events emitted from components</p>\n<h3 id=\"page-change\"><a href=\"#page-change\" class=\"headerlink\" title=\"page-change\"></a>page-change</h3><p><code>page-change</code> event emits the value of the current page.</p>\n<ul>\n<li><strong>Type</strong>: <code>Number</code></li>\n<li><strong>Emitter</strong>: <code>Carousel</code></li>\n</ul>\n<h3 id=\"slide-click\"><a href=\"#slide-click\" class=\"headerlink\" title=\"slide-click\"></a>slide-click</h3><p><code>slide-click</code> event throws the <em>dataset</em> object of the selected element.</p>\n<ul>\n<li><strong>Type</strong>: <code>Object</code></li>\n<li><strong>Emitter</strong>: <code>Slide</code></li>\n</ul>\n<h3 id=\"transition-start\"><a href=\"#transition-start\" class=\"headerlink\" title=\"transition-start\"></a>transition-start</h3><p><code>transition-start</code> event is thrown when the transition starts.</p>\n<ul>\n<li><strong>Type</strong>: <code>none</code></li>\n<li><strong>Emitter</strong>: <code>Carousel</code></li>\n</ul>\n<h3 id=\"transition-end\"><a href=\"#transition-end\" class=\"headerlink\" title=\"transition-end\"></a>transition-end</h3><p><code>transition-end</code> event is thrown when the transition end is reached.</p>\n<ul>\n<li><strong>Type</strong>: <code>none</code></li>\n<li><strong>Emitter</strong>: <code>Carousel</code></li>\n</ul>\n<blockquote>\n<p>Lowercase versions of the above events are also emitted, namely—<code>pagechange</code>, <code>slideclick</code>, <code>transitionstart</code> and <code>transitionend</code>.</p>\n</blockquote>\n","excerpt":"","more":"<h2 id=\"Global-config\"><a href=\"#Global-config\" class=\"headerlink\" title=\"Global config\"></a>Global config</h2><h3 id=\"adjustableHeight\"><a href=\"#adjustableHeight\" class=\"headerlink\" title=\"adjustableHeight\"></a>adjustableHeight</h3><p>Adjust the height of the carousel for the current slide.</p>\n<ul>\n<li><strong>Type</strong>: <code>Boolean</code></li>\n<li><strong>Default</strong>: <code>false</code></li>\n</ul>\n<h3 id=\"adjustableHeightEasing\"><a href=\"#adjustableHeightEasing\" class=\"headerlink\" title=\"adjustableHeightEasing\"></a>adjustableHeightEasing</h3><p>Slide transition easing for adjustableHeight.</p>\n<ul>\n<li><strong>Type</strong>: <code>String</code></li>\n</ul>\n<h3 id=\"autoplay\"><a href=\"#autoplay\" class=\"headerlink\" title=\"autoplay\"></a>autoplay</h3><p>Flag to enable autoplay.</p>\n<ul>\n<li><strong>Type</strong>: <code>Boolean</code></li>\n<li><strong>Default</strong>: <code>false</code></li>\n</ul>\n<h3 id=\"autoplayDirection\"><a href=\"#autoplayDirection\" class=\"headerlink\" title=\"autoplayDirection\"></a>autoplayDirection</h3><p>Sets the autoplay direction for the carousel during autoplay.</p>\n<ul>\n<li><strong>Type</strong>: <code>String</code></li>\n<li><strong>Default</strong>: <code>forward</code></li>\n</ul>\n<h3 id=\"autoplayTimeout\"><a href=\"#autoplayTimeout\" class=\"headerlink\" title=\"autoplayTimeout\"></a>autoplayTimeout</h3><p>Time elapsed before advancing slide in autoplay.</p>\n<ul>\n<li><strong>Type</strong>: <code>Number</code></li>\n<li><strong>Default</strong>: <code>2000</code></li>\n</ul>\n<h3 id=\"autoplayHoverPause\"><a href=\"#autoplayHoverPause\" class=\"headerlink\" title=\"autoplayHoverPause\"></a>autoplayHoverPause</h3><p>Flag to pause autoplay on hover.</p>\n<ul>\n<li><strong>Type</strong>: <code>Boolean</code></li>\n<li><strong>Default</strong>: <code>true</code></li>\n</ul>\n<h3 id=\"centerMode\"><a href=\"#centerMode\" class=\"headerlink\" title=\"centerMode\"></a>centerMode</h3><p>Center images when the size is less than the container width</p>\n<ul>\n<li><strong>Type</strong>: <code>Boolean</code></li>\n<li><strong>Default</strong>: <code>false</code></li>\n</ul>\n<h3 id=\"easing\"><a href=\"#easing\" class=\"headerlink\" title=\"easing\"></a>easing</h3><p>Transition speed between slides. Any valid CSS transition easing is accepted.</p>\n<ul>\n<li><strong>Type</strong>: <code>String</code></li>\n<li><strong>Default</strong>: <code>ease</code></li>\n</ul>\n<h3 id=\"loop\"><a href=\"#loop\" class=\"headerlink\" title=\"loop\"></a>loop</h3><p>Flag to make the carousel loop (wrap) when it reaches either end.</p>\n<ul>\n<li><strong>Type</strong>: <code>Boolean</code></li>\n<li><strong>Default</strong>: <code>false</code></li>\n</ul>\n<h3 id=\"minSwipeDistance\"><a href=\"#minSwipeDistance\" class=\"headerlink\" title=\"minSwipeDistance\"></a>minSwipeDistance</h3><p>Minimum distance in pixels to swipe before a slide advance is triggered.</p>\n<ul>\n<li><strong>Type</strong>: <code>Number</code></li>\n<li><strong>Default</strong>: <code>8</code></li>\n</ul>\n<h3 id=\"mouseDrag\"><a href=\"#mouseDrag\" class=\"headerlink\" title=\"mouseDrag\"></a>mouseDrag</h3><p>Flag to toggle mouse dragging.</p>\n<ul>\n<li><strong>Type</strong>: <code>Boolean</code></li>\n<li><strong>Default</strong> <code>true</code></li>\n</ul>\n<h3 id=\"perPage\"><a href=\"#perPage\" class=\"headerlink\" title=\"perPage\"></a>perPage</h3><p>Maximum number of slides displayed on each page.</p>\n<ul>\n<li><strong>Type</strong>: <code>Number</code></li>\n<li><strong>Default</strong>: <code>2</code></li>\n</ul>\n<h3 id=\"perPageCustom\"><a href=\"#perPageCustom\" class=\"headerlink\" title=\"perPageCustom\"></a>perPageCustom</h3><p>Configure the number of visible slides for responsive breakpoints.</p>\n<p>This will be an array of arrays. Each array is formatted as [x, y] where x is the browser width, and y is the number of slides displayed.</p>\n<ul>\n<li><strong>Type</strong>: <code>Array</code></li>\n<li><strong>Usage</strong>:</li>\n</ul>\n<figure class=\"highlight html\"><table><tr><td class=\"gutter\"><pre><div class=\"line\">1</div></pre></td><td class=\"code\"><pre><div class=\"line\"><span class=\"tag\">&lt;<span class=\"name\">carousel</span> <span class=\"attr\">:per-page-custom</span>=<span class=\"string\">\"[[768, 3], [1024, 4]]\"</span>&gt;</span></div></pre></td></tr></table></figure>\n<p>A mobile-first strategy is used to determine the matching breakpoint. In the above example, the <a href=\"/vue-carousel/api#perPage\">perPage</a> variable has not been set, so the default of <strong>2</strong> is used. If the window size is greater than or equal to 768px, then 3 slides are shown. If the width is greater than or equal to 1024, then 4 slides are shown.</p>\n<h3 id=\"resistanceCoef\"><a href=\"#resistanceCoef\" class=\"headerlink\" title=\"resistanceCoef\"></a>resistanceCoef</h3><p>Resistance coefficient to dragging on the edge of the carousel. This dictates the effect of the pull as you move towards the boundaries.</p>\n<ul>\n<li><strong>Type</strong>: <code>Number</code></li>\n<li><strong>Default</strong>: <code>20</code></li>\n</ul>\n<h3 id=\"scrollPerPage\"><a href=\"#scrollPerPage\" class=\"headerlink\" title=\"scrollPerPage\"></a>scrollPerPage</h3><p>Scroll per page, not per item.</p>\n<ul>\n<li><strong>Type</strong>: <code>Boolean</code></li>\n<li><strong>Default</strong>: <code>false</code></li>\n</ul>\n<h3 id=\"size\"><a href=\"#size\" class=\"headerlink\" title=\"size\"></a>size</h3><p>Size of each pagination dot. Pixel values are accepted.</p>\n<ul>\n<li><strong>Type</strong> <code>Number</code></li>\n<li><strong>Default</strong>: <code>10</code></li>\n</ul>\n<h3 id=\"spacePadding\"><a href=\"#spacePadding\" class=\"headerlink\" title=\"spacePadding\"></a>spacePadding</h3><p>Stage padding option adds left and right padding style (in pixels) onto VueCarousel-inner.</p>\n<ul>\n<li><strong>Type</strong>: <code>Number</code></li>\n<li><strong>Default</strong>: <code>0</code></li>\n</ul>\n<h3 id=\"spacePaddingMaxOffsetFactor\"><a href=\"#spacePaddingMaxOffsetFactor\" class=\"headerlink\" title=\"spacePaddingMaxOffsetFactor\"></a>spacePaddingMaxOffsetFactor</h3><p>Specify by how much should the space padding value be multiplied of, to re-arange the final slide padding.</p>\n<ul>\n<li><strong>Type</strong> <code>Number</code></li>\n<li><strong>Default</strong>: <code>0</code></li>\n</ul>\n<h3 id=\"speed\"><a href=\"#speed\" class=\"headerlink\" title=\"speed\"></a>speed</h3><p>Slide transition speed. Number of milliseconds accepted.</p>\n<ul>\n<li><strong>Type</strong> <code>Number</code></li>\n<li><strong>Default</strong>: <code>500</code></li>\n</ul>\n<h3 id=\"value\"><a href=\"#value\" class=\"headerlink\" title=\"value\"></a>value</h3><p>Support for v-model functionality.<br>Setting this value will change the current page to the number inputted (if between 0 and pageCount).</p>\n<ul>\n<li><strong>Type</strong> <code>Number</code></li>\n</ul>\n<h2 id=\"Navigation\"><a href=\"#Navigation\" class=\"headerlink\" title=\"Navigation\"></a>Navigation</h2><p>Configure the navigation component (next/prev buttons)</p>\n<h3 id=\"navigationEnabled\"><a href=\"#navigationEnabled\" class=\"headerlink\" title=\"navigationEnabled\"></a>navigationEnabled</h3><p>Flag to render the navigation component (next/prev buttons).</p>\n<ul>\n<li><strong>Type</strong>: <code>Boolean</code></li>\n<li><strong>Default</strong>: <code>false</code></li>\n</ul>\n<h3 id=\"navigateTo\"><a href=\"#navigateTo\" class=\"headerlink\" title=\"navigateTo\"></a>navigateTo</h3><p>Allow carousel parent to programatically navigate to a specific slide (zero based index). Recommend using parent data attribute pageNo and carousel pageChange event to keep pageNo in sync with carousel.currentPage to handle subsequent navigation.</p>\n<ul>\n<li><strong>Type</strong>: <code>Number</code></li>\n<li><strong>Default</strong>: 0</li>\n</ul>\n<h3 id=\"navigationClickTargetSize\"><a href=\"#navigationClickTargetSize\" class=\"headerlink\" title=\"navigationClickTargetSize\"></a>navigationClickTargetSize</h3><p>Amount of padding to apply around the label in pixels.</p>\n<ul>\n<li><strong>Type</strong>: <code>Number</code></li>\n<li><strong>Default</strong>: <code>8</code></li>\n</ul>\n<h3 id=\"navigationNextLabel\"><a href=\"#navigationNextLabel\" class=\"headerlink\" title=\"navigationNextLabel\"></a>navigationNextLabel</h3><p>Text content of the navigation next button.</p>\n<ul>\n<li><strong>Type</strong>: <code>String</code></li>\n<li><strong>Default</strong>: <code>▶</code></li>\n</ul>\n<h3 id=\"navigationPrevLabel\"><a href=\"#navigationPrevLabel\" class=\"headerlink\" title=\"navigationPrevLabel\"></a>navigationPrevLabel</h3><p>Text content of the navigation prev button.</p>\n<ul>\n<li><strong>Type</strong>: <code>String</code></li>\n<li><strong>Default</strong>: <code>◀</code></li>\n</ul>\n<h3 id=\"navigateTo-1\"><a href=\"#navigateTo-1\" class=\"headerlink\" title=\"navigateTo\"></a>navigateTo</h3><p>Allow carousel parent to programatically navigate to a specific slide (zero based index). Recommend using parent data attribute pageNo and carousel pageChange event to keep pageNo in sync with carousel.currentPage to handle subsequent navigation. To disable the sliding animation the following syntax is to be followed-  :navigateTo=[index, false] where index is the slide number (starts from zero) you want to navigate to.</p>\n<ul>\n<li><strong>Type</strong>: <code>Number</code> | <code>Array</code></li>\n<li><strong>Default</strong>: 0</li>\n</ul>\n<h2 id=\"Pagination\"><a href=\"#Pagination\" class=\"headerlink\" title=\"Pagination\"></a>Pagination</h2><p>Configure the pagination component (clickable page dots)</p>\n<h3 id=\"paginationEnabled\"><a href=\"#paginationEnabled\" class=\"headerlink\" title=\"paginationEnabled\"></a>paginationEnabled</h3><p>Flag to render pagination component.</p>\n<ul>\n<li><strong>Type</strong>: <code>Boolean</code></li>\n<li><strong>Default</strong>: <code>true</code></li>\n</ul>\n<h3 id=\"paginationActiveColor\"><a href=\"#paginationActiveColor\" class=\"headerlink\" title=\"paginationActiveColor\"></a>paginationActiveColor</h3><p>The fill color of the active pagination dot. Any valid CSS color is accepted.</p>\n<ul>\n<li><strong>Type</strong>: <code>String</code></li>\n<li><strong>Default</strong>: <code>#000000</code></li>\n</ul>\n<h3 id=\"paginationColor\"><a href=\"#paginationColor\" class=\"headerlink\" title=\"paginationColor\"></a>paginationColor</h3><p>The fill color of pagination dots. Any valid CSS color is accepted.</p>\n<ul>\n<li><strong>Type</strong>: <code>String</code></li>\n<li><strong>Default</strong>: <code>#efefef</code></li>\n</ul>\n<h3 id=\"paginationPosition\"><a href=\"#paginationPosition\" class=\"headerlink\" title=\"paginationPosition\"></a>paginationPosition</h3><p>The position of pagination dots. Possible values are <code>bottom</code>, <code>bottom-overlay</code>, <code>top</code> and <code>top-overlay</code>. The overlay values place the pagination component over the images.</p>\n<ul>\n<li><strong>Type</strong>: <code>String</code></li>\n<li><strong>Default</strong>: <code>bottom</code></li>\n</ul>\n<h3 id=\"paginationPadding\"><a href=\"#paginationPadding\" class=\"headerlink\" title=\"paginationPadding\"></a>paginationPadding</h3><p>The padding inside each pagination dot. Pixel values are accepted.</p>\n<ul>\n<li><strong>Type</strong>: <code>Number</code></li>\n<li><strong>Default</strong>: <code>10</code></li>\n</ul>\n<h3 id=\"paginationSize\"><a href=\"#paginationSize\" class=\"headerlink\" title=\"paginationSize\"></a>paginationSize</h3><p>The size of each pagination dot. Pixel values are accepted.</p>\n<ul>\n<li><strong>Type</strong>: <code>Number</code></li>\n<li><strong>Default</strong>: <code>10</code></li>\n</ul>\n<h3 id=\"spacePadding-1\"><a href=\"#spacePadding-1\" class=\"headerlink\" title=\"spacePadding\"></a>spacePadding</h3><p>Stage padding option adds left and right padding style (in pixels) onto VueCarousel-inner.</p>\n<ul>\n<li><strong>Type</strong>: <code>Number</code></li>\n<li><strong>Default</strong>: <code>0</code></li>\n</ul>\n<h2 id=\"Custom-Pagination-amp-Navigation\"><a href=\"#Custom-Pagination-amp-Navigation\" class=\"headerlink\" title=\"Custom Pagination &amp; Navigation\"></a>Custom Pagination &amp; Navigation</h2><p>Use named slots to render pagination and navigation using components.</p>\n<figure class=\"highlight html\"><table><tr><td class=\"gutter\"><pre><div class=\"line\">1</div><div class=\"line\">2</div><div class=\"line\">3</div><div class=\"line\">4</div><div class=\"line\">5</div><div class=\"line\">6</div><div class=\"line\">7</div><div class=\"line\">8</div><div class=\"line\">9</div><div class=\"line\">10</div><div class=\"line\">11</div></pre></td><td class=\"code\"><pre><div class=\"line\"><span class=\"tag\">&lt;<span class=\"name\">carousel</span>&gt;</span></div><div class=\"line\">  <span class=\"tag\">&lt;<span class=\"name\">slide</span>&gt;</span></div><div class=\"line\">    Slide 1 Content</div><div class=\"line\">  <span class=\"tag\">&lt;/<span class=\"name\">slide</span>&gt;</span></div><div class=\"line\">  <span class=\"tag\">&lt;<span class=\"name\">slide</span>&gt;</span></div><div class=\"line\">    Slide 2 Content</div><div class=\"line\">  <span class=\"tag\">&lt;/<span class=\"name\">slide</span>&gt;</span></div><div class=\"line\"></div><div class=\"line\">  <span class=\"tag\">&lt;<span class=\"name\">numbered-pagination</span> <span class=\"attr\">slot</span>=<span class=\"string\">\"pagination\"</span> /&gt;</span></div><div class=\"line\">  <span class=\"tag\">&lt;<span class=\"name\">stylish-navigation</span> <span class=\"attr\">slot</span>=<span class=\"string\">\"navigation\"</span> /&gt;</span></div><div class=\"line\"><span class=\"tag\">&lt;/<span class=\"name\">carousel</span>&gt;</span></div></pre></td></tr></table></figure>\n<p>Your components can access the <code>carousel</code> provider by adding the following to you component configuration:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"gutter\"><pre><div class=\"line\">1</div><div class=\"line\">2</div></pre></td><td class=\"code\"><pre><div class=\"line\">name: &quot;numbered-pagination&quot;,</div><div class=\"line\">inject: [&quot;carousel&quot;]</div></pre></td></tr></table></figure>\n<h2 id=\"Events\"><a href=\"#Events\" class=\"headerlink\" title=\"Events\"></a>Events</h2><p>Events emitted from components</p>\n<h3 id=\"page-change\"><a href=\"#page-change\" class=\"headerlink\" title=\"page-change\"></a>page-change</h3><p><code>page-change</code> event emits the value of the current page.</p>\n<ul>\n<li><strong>Type</strong>: <code>Number</code></li>\n<li><strong>Emitter</strong>: <code>Carousel</code></li>\n</ul>\n<h3 id=\"slide-click\"><a href=\"#slide-click\" class=\"headerlink\" title=\"slide-click\"></a>slide-click</h3><p><code>slide-click</code> event throws the <em>dataset</em> object of the selected element.</p>\n<ul>\n<li><strong>Type</strong>: <code>Object</code></li>\n<li><strong>Emitter</strong>: <code>Slide</code></li>\n</ul>\n<h3 id=\"transition-start\"><a href=\"#transition-start\" class=\"headerlink\" title=\"transition-start\"></a>transition-start</h3><p><code>transition-start</code> event is thrown when the transition starts.</p>\n<ul>\n<li><strong>Type</strong>: <code>none</code></li>\n<li><strong>Emitter</strong>: <code>Carousel</code></li>\n</ul>\n<h3 id=\"transition-end\"><a href=\"#transition-end\" class=\"headerlink\" title=\"transition-end\"></a>transition-end</h3><p><code>transition-end</code> event is thrown when the transition end is reached.</p>\n<ul>\n<li><strong>Type</strong>: <code>none</code></li>\n<li><strong>Emitter</strong>: <code>Carousel</code></li>\n</ul>\n<blockquote>\n<p>Lowercase versions of the above events are also emitted, namely—<code>pagechange</code>, <code>slideclick</code>, <code>transitionstart</code> and <code>transitionend</code>.</p>\n</blockquote>\n"},{"title":"Examples","_content":"\n## Basic\n\nNo options configured, 10 slides added to the carousel.\n\n<script async src=\"//jsfiddle.net/toddlawton/2bxwyg8g/embed/result,js/\"></script>\n\n## Responsive\n\nConfigured breakpoints: 2 slides on mobile (<= 480px), 3 slides on tablet (<= 768).\n**Note: in a JSFiddle iframe, the breakpoint is determined by the iframe's width.**\n\n<script async src=\"//jsfiddle.net/quinnssense/bojn4dz4/embed/js,result/\"></script>\n\n## Scroll per page\n\nInstead of scrolling on a per item basis, the carousel will scroll the configured [perPage](/vue-carousel/api#perPage) with each movement.\n\n<script async src=\"//jsfiddle.net/toddlawton/6ckc1pqv/embed/result,js/\"></script>\n\n## Scroll per page (custom)\n\nInstead of scrolling on a per item basis, the carousel will scroll the configured by [perPageCustom](/vue-carousel/api#perPageCustom) with each movement.\n\n<script async src=\"//jsfiddle.net/quinnssense/gjr7wbph/1/embed/\"></script></script>\n\n## Autoplay\n\nThe carousel will auto-advance slides unless the carousel is hovered upon.\n\n<script async src=\"//jsfiddle.net/toddlawton/n1argwgg/embed/result,js/\"></script>\n\n## Autoplay infinite loop\n\nThe carousel will auto-play and loop when reaching the end.\n\n<script async src=\"//jsfiddle.net/kpkrmx2k/3/embed/result,js/\"></script>\n\n## Navigation\n\nButtons added to advance the carousel in either direction.\n\n<script async src=\"//jsfiddle.net/toddlawton/46wegz8a/embed/result,js/\"></script>\n\n## Customized\n\nCustomized pagination dot colors and sizes. Customized speed and easing.\n\n<script async src=\"//jsfiddle.net/toddlawton/ycp9bwhp/embed/result,js/\"></script>\n\n<style type=\"text/css\">iframe { max-height: 230px; }</style>\n","source":"examples/index.md","raw":"---\ntitle: Examples\n---\n\n## Basic\n\nNo options configured, 10 slides added to the carousel.\n\n<script async src=\"//jsfiddle.net/toddlawton/2bxwyg8g/embed/result,js/\"></script>\n\n## Responsive\n\nConfigured breakpoints: 2 slides on mobile (<= 480px), 3 slides on tablet (<= 768).\n**Note: in a JSFiddle iframe, the breakpoint is determined by the iframe's width.**\n\n<script async src=\"//jsfiddle.net/quinnssense/bojn4dz4/embed/js,result/\"></script>\n\n## Scroll per page\n\nInstead of scrolling on a per item basis, the carousel will scroll the configured [perPage](/vue-carousel/api#perPage) with each movement.\n\n<script async src=\"//jsfiddle.net/toddlawton/6ckc1pqv/embed/result,js/\"></script>\n\n## Scroll per page (custom)\n\nInstead of scrolling on a per item basis, the carousel will scroll the configured by [perPageCustom](/vue-carousel/api#perPageCustom) with each movement.\n\n<script async src=\"//jsfiddle.net/quinnssense/gjr7wbph/1/embed/\"></script></script>\n\n## Autoplay\n\nThe carousel will auto-advance slides unless the carousel is hovered upon.\n\n<script async src=\"//jsfiddle.net/toddlawton/n1argwgg/embed/result,js/\"></script>\n\n## Autoplay infinite loop\n\nThe carousel will auto-play and loop when reaching the end.\n\n<script async src=\"//jsfiddle.net/kpkrmx2k/3/embed/result,js/\"></script>\n\n## Navigation\n\nButtons added to advance the carousel in either direction.\n\n<script async src=\"//jsfiddle.net/toddlawton/46wegz8a/embed/result,js/\"></script>\n\n## Customized\n\nCustomized pagination dot colors and sizes. Customized speed and easing.\n\n<script async src=\"//jsfiddle.net/toddlawton/ycp9bwhp/embed/result,js/\"></script>\n\n<style type=\"text/css\">iframe { max-height: 230px; }</style>\n","date":"2018-09-18T19:18:20.029Z","updated":"2018-09-18T19:18:17.599Z","path":"examples/index.html","comments":1,"layout":"page","_id":"cjp0ijrd40002clqgw4a5u9c9","content":"<h2 id=\"Basic\"><a href=\"#Basic\" class=\"headerlink\" title=\"Basic\"></a>Basic</h2><p>No options configured, 10 slides added to the carousel.</p>\n<script async src=\"//jsfiddle.net/toddlawton/2bxwyg8g/embed/result,js/\"></script>\n\n<h2 id=\"Responsive\"><a href=\"#Responsive\" class=\"headerlink\" title=\"Responsive\"></a>Responsive</h2><p>Configured breakpoints: 2 slides on mobile (&lt;= 480px), 3 slides on tablet (&lt;= 768).<br><strong>Note: in a JSFiddle iframe, the breakpoint is determined by the iframe’s width.</strong></p>\n<script async src=\"//jsfiddle.net/quinnssense/bojn4dz4/embed/js,result/\"></script>\n\n<h2 id=\"Scroll-per-page\"><a href=\"#Scroll-per-page\" class=\"headerlink\" title=\"Scroll per page\"></a>Scroll per page</h2><p>Instead of scrolling on a per item basis, the carousel will scroll the configured <a href=\"/vue-carousel/api#perPage\">perPage</a> with each movement.</p>\n<script async src=\"//jsfiddle.net/toddlawton/6ckc1pqv/embed/result,js/\"></script>\n\n<h2 id=\"Scroll-per-page-custom\"><a href=\"#Scroll-per-page-custom\" class=\"headerlink\" title=\"Scroll per page (custom)\"></a>Scroll per page (custom)</h2><p>Instead of scrolling on a per item basis, the carousel will scroll the configured by <a href=\"/vue-carousel/api#perPageCustom\">perPageCustom</a> with each movement.</p>\n<script async src=\"//jsfiddle.net/quinnssense/gjr7wbph/1/embed/\"></script>\n\n<h2 id=\"Autoplay\"><a href=\"#Autoplay\" class=\"headerlink\" title=\"Autoplay\"></a>Autoplay</h2><p>The carousel will auto-advance slides unless the carousel is hovered upon.</p>\n<script async src=\"//jsfiddle.net/toddlawton/n1argwgg/embed/result,js/\"></script>\n\n<h2 id=\"Autoplay-infinite-loop\"><a href=\"#Autoplay-infinite-loop\" class=\"headerlink\" title=\"Autoplay infinite loop\"></a>Autoplay infinite loop</h2><p>The carousel will auto-play and loop when reaching the end.</p>\n<script async src=\"//jsfiddle.net/kpkrmx2k/3/embed/result,js/\"></script>\n\n<h2 id=\"Navigation\"><a href=\"#Navigation\" class=\"headerlink\" title=\"Navigation\"></a>Navigation</h2><p>Buttons added to advance the carousel in either direction.</p>\n<script async src=\"//jsfiddle.net/toddlawton/46wegz8a/embed/result,js/\"></script>\n\n<h2 id=\"Customized\"><a href=\"#Customized\" class=\"headerlink\" title=\"Customized\"></a>Customized</h2><p>Customized pagination dot colors and sizes. Customized speed and easing.</p>\n<script async src=\"//jsfiddle.net/toddlawton/ycp9bwhp/embed/result,js/\"></script>\n\n<style type=\"text/css\">iframe { max-height: 230px; }</style>\n","site":{"data":{}},"excerpt":"","more":"<h2 id=\"Basic\"><a href=\"#Basic\" class=\"headerlink\" title=\"Basic\"></a>Basic</h2><p>No options configured, 10 slides added to the carousel.</p>\n<script async src=\"//jsfiddle.net/toddlawton/2bxwyg8g/embed/result,js/\"></script>\n\n<h2 id=\"Responsive\"><a href=\"#Responsive\" class=\"headerlink\" title=\"Responsive\"></a>Responsive</h2><p>Configured breakpoints: 2 slides on mobile (&lt;= 480px), 3 slides on tablet (&lt;= 768).<br><strong>Note: in a JSFiddle iframe, the breakpoint is determined by the iframe’s width.</strong></p>\n<script async src=\"//jsfiddle.net/quinnssense/bojn4dz4/embed/js,result/\"></script>\n\n<h2 id=\"Scroll-per-page\"><a href=\"#Scroll-per-page\" class=\"headerlink\" title=\"Scroll per page\"></a>Scroll per page</h2><p>Instead of scrolling on a per item basis, the carousel will scroll the configured <a href=\"/vue-carousel/api#perPage\">perPage</a> with each movement.</p>\n<script async src=\"//jsfiddle.net/toddlawton/6ckc1pqv/embed/result,js/\"></script>\n\n<h2 id=\"Scroll-per-page-custom\"><a href=\"#Scroll-per-page-custom\" class=\"headerlink\" title=\"Scroll per page (custom)\"></a>Scroll per page (custom)</h2><p>Instead of scrolling on a per item basis, the carousel will scroll the configured by <a href=\"/vue-carousel/api#perPageCustom\">perPageCustom</a> with each movement.</p>\n<script async src=\"//jsfiddle.net/quinnssense/gjr7wbph/1/embed/\"></script>\n\n<h2 id=\"Autoplay\"><a href=\"#Autoplay\" class=\"headerlink\" title=\"Autoplay\"></a>Autoplay</h2><p>The carousel will auto-advance slides unless the carousel is hovered upon.</p>\n<script async src=\"//jsfiddle.net/toddlawton/n1argwgg/embed/result,js/\"></script>\n\n<h2 id=\"Autoplay-infinite-loop\"><a href=\"#Autoplay-infinite-loop\" class=\"headerlink\" title=\"Autoplay infinite loop\"></a>Autoplay infinite loop</h2><p>The carousel will auto-play and loop when reaching the end.</p>\n<script async src=\"//jsfiddle.net/kpkrmx2k/3/embed/result,js/\"></script>\n\n<h2 id=\"Navigation\"><a href=\"#Navigation\" class=\"headerlink\" title=\"Navigation\"></a>Navigation</h2><p>Buttons added to advance the carousel in either direction.</p>\n<script async src=\"//jsfiddle.net/toddlawton/46wegz8a/embed/result,js/\"></script>\n\n<h2 id=\"Customized\"><a href=\"#Customized\" class=\"headerlink\" title=\"Customized\"></a>Customized</h2><p>Customized pagination dot colors and sizes. Customized speed and easing.</p>\n<script async src=\"//jsfiddle.net/toddlawton/ycp9bwhp/embed/result,js/\"></script>\n\n<style type=\"text/css\">iframe { max-height: 230px; }</style>\n"},{"title":"Guide","_content":"\n## Installation\n\n``` bash\nnpm install -S vue-carousel\n```\n\n## Usage (Global)\n\nYou may install Vue Carousel globally:\n\n``` js\nimport Vue from 'vue';\nimport VueCarousel from 'vue-carousel';\n\nVue.use(VueCarousel);\n```\nThis will make **&lt;carousel&gt;** and **&lt;slide&gt;** available to all components within your Vue app.\n\n## Usage (Local)\n\nInclude the carousel directly into your component using import:\n\n``` js\nimport { Carousel, Slide } from 'vue-carousel';\n\nexport default {\n  ...\n  components: {\n    Carousel,\n    Slide\n  }\n  ...\n};\n```\n\n## HTML Structure\n\nOnce the **Carousel** and **Slide** components are installed globally or imported, they can be used in templates in the following manner:\n\n``` html\n  <carousel>\n    <slide>\n      Slide 1 Content\n    </slide>\n    <slide>\n      Slide 2 Content\n    </slide>\n  </carousel>\n```","source":"guide/index.md","raw":"---\ntitle: Guide\n---\n\n## Installation\n\n``` bash\nnpm install -S vue-carousel\n```\n\n## Usage (Global)\n\nYou may install Vue Carousel globally:\n\n``` js\nimport Vue from 'vue';\nimport VueCarousel from 'vue-carousel';\n\nVue.use(VueCarousel);\n```\nThis will make **&lt;carousel&gt;** and **&lt;slide&gt;** available to all components within your Vue app.\n\n## Usage (Local)\n\nInclude the carousel directly into your component using import:\n\n``` js\nimport { Carousel, Slide } from 'vue-carousel';\n\nexport default {\n  ...\n  components: {\n    Carousel,\n    Slide\n  }\n  ...\n};\n```\n\n## HTML Structure\n\nOnce the **Carousel** and **Slide** components are installed globally or imported, they can be used in templates in the following manner:\n\n``` html\n  <carousel>\n    <slide>\n      Slide 1 Content\n    </slide>\n    <slide>\n      Slide 2 Content\n    </slide>\n  </carousel>\n```","date":"2018-09-18T19:18:20.073Z","updated":"2018-09-18T19:18:17.600Z","path":"guide/index.html","comments":1,"layout":"page","_id":"cjp0ijrd60003clqgz5udo17n","content":"<h2 id=\"Installation\"><a href=\"#Installation\" class=\"headerlink\" title=\"Installation\"></a>Installation</h2><figure class=\"highlight bash\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br></pre></td><td class=\"code\"><pre><span class=\"line\">npm install -S vue-carousel</span><br></pre></td></tr></table></figure>\n<h2 id=\"Usage-Global\"><a href=\"#Usage-Global\" class=\"headerlink\" title=\"Usage (Global)\"></a>Usage (Global)</h2><p>You may install Vue Carousel globally:</p>\n<figure class=\"highlight js\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"keyword\">import</span> Vue <span class=\"keyword\">from</span> <span class=\"string\">'vue'</span>;</span><br><span class=\"line\"><span class=\"keyword\">import</span> VueCarousel <span class=\"keyword\">from</span> <span class=\"string\">'vue-carousel'</span>;</span><br><span class=\"line\"></span><br><span class=\"line\">Vue.use(VueCarousel);</span><br></pre></td></tr></table></figure>\n<p>This will make <strong>&lt;carousel&gt;</strong> and <strong>&lt;slide&gt;</strong> available to all components within your Vue app.</p>\n<h2 id=\"Usage-Local\"><a href=\"#Usage-Local\" class=\"headerlink\" title=\"Usage (Local)\"></a>Usage (Local)</h2><p>Include the carousel directly into your component using import:</p>\n<figure class=\"highlight js\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><span class=\"line\">7</span><br><span class=\"line\">8</span><br><span class=\"line\">9</span><br><span class=\"line\">10</span><br></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"keyword\">import</span> &#123; Carousel, Slide &#125; <span class=\"keyword\">from</span> <span class=\"string\">'vue-carousel'</span>;</span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"keyword\">export</span> <span class=\"keyword\">default</span> &#123;</span><br><span class=\"line\">  ...</span><br><span class=\"line\">  components: &#123;</span><br><span class=\"line\">    Carousel,</span><br><span class=\"line\">    Slide</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">  ...</span><br><span class=\"line\">&#125;;</span><br></pre></td></tr></table></figure>\n<h2 id=\"HTML-Structure\"><a href=\"#HTML-Structure\" class=\"headerlink\" title=\"HTML Structure\"></a>HTML Structure</h2><p>Once the <strong>Carousel</strong> and <strong>Slide</strong> components are installed globally or imported, they can be used in templates in the following manner:</p>\n<figure class=\"highlight html\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><span class=\"line\">7</span><br><span class=\"line\">8</span><br></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"tag\">&lt;<span class=\"name\">carousel</span>&gt;</span></span><br><span class=\"line\">  <span class=\"tag\">&lt;<span class=\"name\">slide</span>&gt;</span></span><br><span class=\"line\">    Slide 1 Content</span><br><span class=\"line\">  <span class=\"tag\">&lt;/<span class=\"name\">slide</span>&gt;</span></span><br><span class=\"line\">  <span class=\"tag\">&lt;<span class=\"name\">slide</span>&gt;</span></span><br><span class=\"line\">    Slide 2 Content</span><br><span class=\"line\">  <span class=\"tag\">&lt;/<span class=\"name\">slide</span>&gt;</span></span><br><span class=\"line\"><span class=\"tag\">&lt;/<span class=\"name\">carousel</span>&gt;</span></span><br></pre></td></tr></table></figure>","site":{"data":{}},"excerpt":"","more":"<h2 id=\"Installation\"><a href=\"#Installation\" class=\"headerlink\" title=\"Installation\"></a>Installation</h2><figure class=\"highlight bash\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br></pre></td><td class=\"code\"><pre><span class=\"line\">npm install -S vue-carousel</span><br></pre></td></tr></table></figure>\n<h2 id=\"Usage-Global\"><a href=\"#Usage-Global\" class=\"headerlink\" title=\"Usage (Global)\"></a>Usage (Global)</h2><p>You may install Vue Carousel globally:</p>\n<figure class=\"highlight js\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"keyword\">import</span> Vue <span class=\"keyword\">from</span> <span class=\"string\">'vue'</span>;</span><br><span class=\"line\"><span class=\"keyword\">import</span> VueCarousel <span class=\"keyword\">from</span> <span class=\"string\">'vue-carousel'</span>;</span><br><span class=\"line\"></span><br><span class=\"line\">Vue.use(VueCarousel);</span><br></pre></td></tr></table></figure>\n<p>This will make <strong>&lt;carousel&gt;</strong> and <strong>&lt;slide&gt;</strong> available to all components within your Vue app.</p>\n<h2 id=\"Usage-Local\"><a href=\"#Usage-Local\" class=\"headerlink\" title=\"Usage (Local)\"></a>Usage (Local)</h2><p>Include the carousel directly into your component using import:</p>\n<figure class=\"highlight js\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><span class=\"line\">7</span><br><span class=\"line\">8</span><br><span class=\"line\">9</span><br><span class=\"line\">10</span><br></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"keyword\">import</span> &#123; Carousel, Slide &#125; <span class=\"keyword\">from</span> <span class=\"string\">'vue-carousel'</span>;</span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"keyword\">export</span> <span class=\"keyword\">default</span> &#123;</span><br><span class=\"line\">  ...</span><br><span class=\"line\">  components: &#123;</span><br><span class=\"line\">    Carousel,</span><br><span class=\"line\">    Slide</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">  ...</span><br><span class=\"line\">&#125;;</span><br></pre></td></tr></table></figure>\n<h2 id=\"HTML-Structure\"><a href=\"#HTML-Structure\" class=\"headerlink\" title=\"HTML Structure\"></a>HTML Structure</h2><p>Once the <strong>Carousel</strong> and <strong>Slide</strong> components are installed globally or imported, they can be used in templates in the following manner:</p>\n<figure class=\"highlight html\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><span class=\"line\">7</span><br><span class=\"line\">8</span><br></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"tag\">&lt;<span class=\"name\">carousel</span>&gt;</span></span><br><span class=\"line\">  <span class=\"tag\">&lt;<span class=\"name\">slide</span>&gt;</span></span><br><span class=\"line\">    Slide 1 Content</span><br><span class=\"line\">  <span class=\"tag\">&lt;/<span class=\"name\">slide</span>&gt;</span></span><br><span class=\"line\">  <span class=\"tag\">&lt;<span class=\"name\">slide</span>&gt;</span></span><br><span class=\"line\">    Slide 2 Content</span><br><span class=\"line\">  <span class=\"tag\">&lt;/<span class=\"name\">slide</span>&gt;</span></span><br><span class=\"line\"><span class=\"tag\">&lt;/<span class=\"name\">carousel</span>&gt;</span></span><br></pre></td></tr></table></figure>"}],"Post":[{"title":"home","date":"2016-12-29T20:37:46.000Z","_content":"","source":"_posts/home.md","raw":"---\ntitle: home\ndate: 2016-12-29 15:37:46\ntags:\n---\n","slug":"home","published":1,"updated":"2018-09-18T19:18:17.598Z","comments":1,"layout":"post","photos":[],"link":"","_id":"cjp0ijrcx0000clqgd3lpeuyt","content":"","site":{"data":{}},"excerpt":"","more":""}],"PostAsset":[],"PostCategory":[],"PostTag":[],"Tag":[]}}