vue-carousel
Version:
A flexible, responsive, touch-friendly carousel for Vue.js
1 lines • 57.7 kB
JSON
{"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/actualize.png","path":"images/actualize.png","modified":1,"renderable":1},{"_id":"themes/vue/source/images/2mhost.png","path":"images/2mhost.png","modified":1,"renderable":1},{"_id":"themes/vue/source/images/chaitin.png","path":"images/chaitin.png","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/itunescn.png","path":"images/itunescn.png","modified":1,"renderable":1},{"_id":"themes/vue/source/images/htmlburger.png","path":"images/htmlburger.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/juejin.png","path":"images/juejin.png","modified":1,"renderable":1},{"_id":"themes/vue/source/images/menu.png","path":"images/menu.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/laravel.png","path":"images/laravel.png","modified":1,"renderable":1},{"_id":"themes/vue/source/images/patreon.png","path":"images/patreon.png","modified":1,"renderable":1},{"_id":"themes/vue/source/images/search.png","path":"images/search.png","modified":1,"renderable":1},{"_id":"themes/vue/source/images/paypal.png","path":"images/paypal.png","modified":1,"renderable":1},{"_id":"themes/vue/source/images/monterail.png","path":"images/monterail.png","modified":1,"renderable":1},{"_id":"themes/vue/source/images/tde.png","path":"images/tde.png","modified":1,"renderable":1},{"_id":"themes/vue/source/images/someline.png","path":"images/someline.png","modified":1,"renderable":1},{"_id":"themes/vue/source/images/strikingly.png","path":"images/strikingly.png","modified":1,"renderable":1},{"_id":"themes/vue/source/images/transition.png","path":"images/transition.png","modified":1,"renderable":1},{"_id":"themes/vue/source/js/common.js","path":"js/common.js","modified":1,"renderable":1},{"_id":"themes/vue/source/images/trisoft.png","path":"images/trisoft.png","modified":1,"renderable":1},{"_id":"themes/vue/source/images/vuejobs.png","path":"images/vuejobs.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/vue-carousel.min.js","path":"js/vue-carousel.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":"themes/vue/_config.yml","hash":"70a6221e466be0b2046696d63f21a1aaefa67692","modified":1523815933887},{"_id":"source/api/index.md","hash":"78bdc7ae19a3b954fdeaa186b54d8d9f8f4945ce","modified":1523815933885},{"_id":"source/_posts/home.md","hash":"07edadc8485cb285e2696bd606cfef37b6e822d1","modified":1523815933885},{"_id":"source/examples/index.md","hash":"b619ed63c134a409be6cc1026b562fb6a306859a","modified":1523815933886},{"_id":"themes/vue/layout/layout.ejs","hash":"558ed1335c90b559c1f2ba6219ae8fcce1bae84d","modified":1523815933888},{"_id":"source/guide/index.md","hash":"97a976a93601b5f31ac53573a1ba4639f67cb451","modified":1523815933887},{"_id":"themes/vue/layout/page.ejs","hash":"8ccc26cf27c16e2c54bba0436a22c0d8299d574e","modified":1523815933888},{"_id":"themes/vue/layout/index.ejs","hash":"f6899a2906aeb12f93da7fbb04b9aecf188c6744","modified":1523815933887},{"_id":"themes/vue/layout/post.ejs","hash":"aa03915a3540de78cfe8fe1c8f9e897974bf35a0","modified":1523815933889},{"_id":"themes/vue/layout/partials/header.ejs","hash":"7e646d6d7074dcb2b277ea2d34ab2190b1f440f4","modified":1523815933888},{"_id":"themes/vue/layout/partials/sidebar.ejs","hash":"f4501f301d45233659a28533c7381443ad4f4071","modified":1523815933889},{"_id":"themes/vue/layout/partials/main_menu.ejs","hash":"c6a8caea8d310d822d47c0dfaff157a9f1a4ef21","modified":1523815933889},{"_id":"themes/vue/layout/partials/sponsors.ejs","hash":"8ce920fa38a01d79001da69697b0927e6c7f8018","modified":1523815933889},{"_id":"themes/vue/source/css/_migration.styl","hash":"5ea4f20818827c0d57a36a3006b736366c3b446f","modified":1523815933891},{"_id":"themes/vue/source/css/_header.styl","hash":"58deb9f0183b0470dbb68a147e1ef344fa8a682e","modified":1523815933891},{"_id":"themes/vue/source/css/_demo.styl","hash":"75e128f58b4a6ef5fe6a2ea3899d6831f8566390","modified":1523815933891},{"_id":"themes/vue/source/css/_common.styl","hash":"a0ff20d48bac7dca9a305d84aab10133b9915985","modified":1523815933890},{"_id":"themes/vue/source/css/_settings.styl","hash":"c25843e8e63122df3f37f7583832ac577079d84b","modified":1523815933891},{"_id":"themes/vue/source/css/_sidebar.styl","hash":"cf214c13aa0d286de019ed16633a21a0ed5660df","modified":1523815933892},{"_id":"themes/vue/source/css/_sponsor.styl","hash":"6a4e1503b1e4f0e98e1e008ba846036fee3199aa","modified":1523815933892},{"_id":"themes/vue/source/css/benchmark.styl","hash":"95d4607b2b59623a673e131e1a267d0311fe89e6","modified":1523815933892},{"_id":"themes/vue/source/css/_syntax.styl","hash":"983a213e780dbcdac966ace60194ee20343e74a0","modified":1527560649609},{"_id":"themes/vue/source/css/index.styl","hash":"e16ed6d98d0d9a4cb73fb81d71a46f177a47c260","modified":1523815933892},{"_id":"themes/vue/source/css/page.styl","hash":"34f22034ade34fe59cec9fe3554a5febac9b9894","modified":1523815933892},{"_id":"themes/vue/source/css/search.styl","hash":"5117f05598154cfc84da04ec1a257bd186653ba2","modified":1523815933893},{"_id":"themes/vue/source/images/actualize.png","hash":"7b9c0fefb69cc4fad0520782f5445d495975bb57","modified":1523815933894},{"_id":"themes/vue/source/images/2mhost.png","hash":"a42a475ec7d2b36e82f420bd80a9957915dab2ce","modified":1523815933894},{"_id":"themes/vue/source/images/chaitin.png","hash":"0cca04b4c318b04be96ed066bc6ad3bb5f3788ec","modified":1523815933895},{"_id":"themes/vue/source/images/check.png","hash":"682cf89e1802afb1dfddf07a6aed828a45b824af","modified":1523815933895},{"_id":"themes/vue/source/images/down.png","hash":"42505e12d686cf580f793bd9193acbac1e3e3a91","modified":1523815933895},{"_id":"themes/vue/source/images/feed.png","hash":"0a746dab71dca2025f63584dbd222dc5e0707ba8","modified":1523815933896},{"_id":"themes/vue/source/images/itunescn.png","hash":"75968c5e469bec3d061c9207ca872b2e57081015","modified":1523815933897},{"_id":"themes/vue/source/images/htmlburger.png","hash":"0005ef9559a88da3ff7b30b53e44acc5f1a14e46","modified":1523815933897},{"_id":"themes/vue/source/images/icons.png","hash":"91225ef7011e59dbe6b4b9f2666133fb5e1bc976","modified":1523815933897},{"_id":"themes/vue/source/images/jsfiddle.png","hash":"0646dceea2a62d3f5d2aabff4bdecffdf54cc8a7","modified":1523815933898},{"_id":"themes/vue/source/images/juejin.png","hash":"a346d9068f1e4f65262fdc885c5fb362ea3f36b8","modified":1523815933898},{"_id":"themes/vue/source/images/menu.png","hash":"bdaa35eb1ed119caeb934e15a05b9f4a5396d957","modified":1523815933899},{"_id":"themes/vue/source/images/logo.png","hash":"79f7d5310f9ab78f52049fbb554303188cb36076","modified":1523815933899},{"_id":"themes/vue/source/images/laravel.png","hash":"d49fdacbae388601d2ff339b31aedd3c0dd3be3a","modified":1523815933899},{"_id":"themes/vue/source/images/patreon.png","hash":"c2455d5a6a59ff2b0ce5d698a74af7ed7226438c","modified":1523815933900},{"_id":"themes/vue/source/images/search.png","hash":"12d664cc51b8d53c9214830bc9b92fb340526a7b","modified":1523815933901},{"_id":"themes/vue/source/images/paypal.png","hash":"4db177273d209e621a99941d6457456a0950eb96","modified":1523815933901},{"_id":"themes/vue/source/images/monterail.png","hash":"17b3a1f12f5c40b7b94ce320cc2ec9a4df9bca5e","modified":1523815933900},{"_id":"themes/vue/source/images/tde.png","hash":"ffa3a10004c2510cabd23ba99bdcb5012aab3835","modified":1523815933902},{"_id":"themes/vue/source/images/someline.png","hash":"81ee000201cb80b19c7d79cc116c688c34163d36","modified":1523815933901},{"_id":"themes/vue/source/images/strikingly.png","hash":"d16ea35e0693928823b99efafc139f1ea1d6cb90","modified":1523815933902},{"_id":"themes/vue/source/images/transition.png","hash":"47b92628ea1263d651dab90093ff5682d2e54e68","modified":1523815933902},{"_id":"themes/vue/source/js/common.js","hash":"18f681ad46b4c68676af18dee60f96a3fdd9421c","modified":1523815933904},{"_id":"themes/vue/source/images/trisoft.png","hash":"c5689ce6833a3696406dc73bb50fa5b6b18b2dbe","modified":1523815933903},{"_id":"themes/vue/source/images/vuejobs.png","hash":"25aa2ef77fcb62051036171942f3575af2a12e9c","modified":1523815933903},{"_id":"themes/vue/source/js/smooth-scroll.min.js","hash":"86d3196a003a5cdc673a4c6ebb75db3ceee1a1a7","modified":1523815933904},{"_id":"themes/vue/source/js/vue-carousel.min.js","hash":"87c444035d46a97ba292c568b1257f61b0bce8ea","modified":1527562333134},{"_id":"themes/vue/source/js/vue.min.js","hash":"1e9ef27fa8e28cd9f5af14ba562a1cb983e49855","modified":1523815933913},{"_id":"themes/vue/source/js/vue.js","hash":"be10c44019f6577b8f80e233ddb31f1f6b367f65","modified":1523815933909},{"_id":"public/api/index.html","hash":"eda67ad0d99e8de5b9cda1e5307e01dca57c222f","modified":1527562363646},{"_id":"public/examples/index.html","hash":"d0b0b6a6b0b8cec4c6bf4508c4fd0b334065468e","modified":1527562363646},{"_id":"public/guide/index.html","hash":"b2f9f0e48db345e5925642a584b62ad7cbb0b973","modified":1527562363647},{"_id":"public/2016/12/29/home/index.html","hash":"9be9a4f07793ca34ad12a917e2f66aea86c9a906","modified":1527562363648},{"_id":"public/archives/index.html","hash":"5dc808d32177ea5394368512229348f53d97e039","modified":1527562363648},{"_id":"public/archives/2016/index.html","hash":"5dc808d32177ea5394368512229348f53d97e039","modified":1527562363648},{"_id":"public/archives/2016/12/index.html","hash":"5dc808d32177ea5394368512229348f53d97e039","modified":1527562363648},{"_id":"public/index.html","hash":"c613f73c20ad95724430392f5b55f9f4c1cee829","modified":1527562363648},{"_id":"public/images/actualize.png","hash":"7b9c0fefb69cc4fad0520782f5445d495975bb57","modified":1527562363654},{"_id":"public/images/2mhost.png","hash":"a42a475ec7d2b36e82f420bd80a9957915dab2ce","modified":1527562363654},{"_id":"public/images/chaitin.png","hash":"0cca04b4c318b04be96ed066bc6ad3bb5f3788ec","modified":1527562363654},{"_id":"public/images/check.png","hash":"682cf89e1802afb1dfddf07a6aed828a45b824af","modified":1527562363655},{"_id":"public/images/down.png","hash":"42505e12d686cf580f793bd9193acbac1e3e3a91","modified":1527562363655},{"_id":"public/images/feed.png","hash":"0a746dab71dca2025f63584dbd222dc5e0707ba8","modified":1527562363655},{"_id":"public/images/itunescn.png","hash":"75968c5e469bec3d061c9207ca872b2e57081015","modified":1527562363655},{"_id":"public/images/htmlburger.png","hash":"0005ef9559a88da3ff7b30b53e44acc5f1a14e46","modified":1527562363655},{"_id":"public/images/icons.png","hash":"91225ef7011e59dbe6b4b9f2666133fb5e1bc976","modified":1527562363655},{"_id":"public/images/jsfiddle.png","hash":"0646dceea2a62d3f5d2aabff4bdecffdf54cc8a7","modified":1527562363655},{"_id":"public/images/juejin.png","hash":"a346d9068f1e4f65262fdc885c5fb362ea3f36b8","modified":1527562363655},{"_id":"public/images/menu.png","hash":"bdaa35eb1ed119caeb934e15a05b9f4a5396d957","modified":1527562363655},{"_id":"public/images/logo.png","hash":"79f7d5310f9ab78f52049fbb554303188cb36076","modified":1527562363655},{"_id":"public/images/laravel.png","hash":"d49fdacbae388601d2ff339b31aedd3c0dd3be3a","modified":1527562363656},{"_id":"public/images/patreon.png","hash":"c2455d5a6a59ff2b0ce5d698a74af7ed7226438c","modified":1527562363656},{"_id":"public/images/search.png","hash":"12d664cc51b8d53c9214830bc9b92fb340526a7b","modified":1527562363656},{"_id":"public/images/paypal.png","hash":"4db177273d209e621a99941d6457456a0950eb96","modified":1527562363656},{"_id":"public/images/monterail.png","hash":"17b3a1f12f5c40b7b94ce320cc2ec9a4df9bca5e","modified":1527562363656},{"_id":"public/images/tde.png","hash":"ffa3a10004c2510cabd23ba99bdcb5012aab3835","modified":1527562363657},{"_id":"public/images/someline.png","hash":"81ee000201cb80b19c7d79cc116c688c34163d36","modified":1527562363657},{"_id":"public/images/strikingly.png","hash":"d16ea35e0693928823b99efafc139f1ea1d6cb90","modified":1527562363657},{"_id":"public/images/transition.png","hash":"47b92628ea1263d651dab90093ff5682d2e54e68","modified":1527562363657},{"_id":"public/images/trisoft.png","hash":"c5689ce6833a3696406dc73bb50fa5b6b18b2dbe","modified":1527562363657},{"_id":"public/images/vuejobs.png","hash":"25aa2ef77fcb62051036171942f3575af2a12e9c","modified":1527562363657},{"_id":"public/css/benchmark.css","hash":"3424ee8c27052da2ab9f544027f49e1550385e9d","modified":1527562364047},{"_id":"public/css/index.css","hash":"b3be18d6034ceaa73d409f7aaeecd18cccb7d3aa","modified":1527562364047},{"_id":"public/css/page.css","hash":"1b5eb04f2d67e8ac9aaa14849538c0cec2e248e6","modified":1527562364047},{"_id":"public/css/search.css","hash":"ac9a0e8c8da7919174caea15d9704c192ea3a2c4","modified":1527562364047},{"_id":"public/js/smooth-scroll.min.js","hash":"86d3196a003a5cdc673a4c6ebb75db3ceee1a1a7","modified":1527562364047},{"_id":"public/js/common.js","hash":"18f681ad46b4c68676af18dee60f96a3fdd9421c","modified":1527562364051},{"_id":"public/js/vue-carousel.min.js","hash":"87c444035d46a97ba292c568b1257f61b0bce8ea","modified":1527562364056},{"_id":"public/js/vue.min.js","hash":"1e9ef27fa8e28cd9f5af14ba562a1cb983e49855","modified":1527562364065},{"_id":"public/js/vue.js","hash":"be10c44019f6577b8f80e233ddb31f1f6b367f65","modified":1527562364070}],"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**: `true`\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### 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 around and return to the first page when it reaches the 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### 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 :perPageCustom=\"[[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### 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## Navigation\n\nConfigure the navigation component (next/prev buttons)\n\n### navigationClickTargetSize\n\nAmount of padding to apply around the label in pixels\n\n* **Type**: `Number`\n* **Default**: `8`\n\n### navigationEnabled\n\n* **Type**: `Boolean`\n* **Default**: `false`\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.\n\n* **Type**: `Number`\n* **Default**: 0\n\n## Pagination\n\nConfigure the pagination component (clickable page dots)\n\n### paginationEnabled\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### 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","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**: `true`\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### 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 around and return to the first page when it reaches the 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### 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 :perPageCustom=\"[[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### 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## Navigation\n\nConfigure the navigation component (next/prev buttons)\n\n### navigationClickTargetSize\n\nAmount of padding to apply around the label in pixels\n\n* **Type**: `Number`\n* **Default**: `8`\n\n### navigationEnabled\n\n* **Type**: `Boolean`\n* **Default**: `false`\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.\n\n* **Type**: `Number`\n* **Default**: 0\n\n## Pagination\n\nConfigure the pagination component (clickable page dots)\n\n### paginationEnabled\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### 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","date":"2018-04-15T18:12:14.369Z","updated":"2018-04-15T18:12:13.885Z","path":"api/index.html","comments":1,"layout":"page","_id":"cjhr36uxp0000pmsq8yczu90a","content":"<h2 id=\"Global-config\"><a href=\"#Global-config\" class=\"headerlink\" title=\"Global config\"></a>Global config</h2><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=\"autoplayTimeout\"><a href=\"#autoplayTimeout\" class=\"headerlink\" title=\"autoplayTimeout\"></a>autoplayTimeout</h3><p>Time elapsed before advancing slide</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=\"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=\"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-1\"><a href=\"#loop-1\" class=\"headerlink\" title=\"loop\"></a>loop</h3><p>Flag to make the carousel loop around and return to the first page when it reaches the 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=\"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><span class=\"line\">1</span><br></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"tag\"><<span class=\"name\">carousel</span> <span class=\"attr\">:perPageCustom</span>=<span class=\"string\">\"[[768, 3], [1024, 4]]\"</span>></span></span><br></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=\"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<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=\"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=\"navigationEnabled\"><a href=\"#navigationEnabled\" class=\"headerlink\" title=\"navigationEnabled\"></a>navigationEnabled</h3><ul>\n<li><strong>Type</strong>: <code>Boolean</code></li>\n<li><strong>Default</strong>: <code>false</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\"><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<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><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=\"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\"><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","site":{"data":{}},"excerpt":"","more":"<h2 id=\"Global-config\"><a href=\"#Global-config\" class=\"headerlink\" title=\"Global config\"></a>Global config</h2><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=\"autoplayTimeout\"><a href=\"#autoplayTimeout\" class=\"headerlink\" title=\"autoplayTimeout\"></a>autoplayTimeout</h3><p>Time elapsed before advancing slide</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=\"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=\"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-1\"><a href=\"#loop-1\" class=\"headerlink\" title=\"loop\"></a>loop</h3><p>Flag to make the carousel loop around and return to the first page when it reaches the 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=\"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><span class=\"line\">1</span><br></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"tag\"><<span class=\"name\">carousel</span> <span class=\"attr\">:perPageCustom</span>=<span class=\"string\">\"[[768, 3], [1024, 4]]\"</span>></span></span><br></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=\"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<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=\"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=\"navigationEnabled\"><a href=\"#navigationEnabled\" class=\"headerlink\" title=\"navigationEnabled\"></a>navigationEnabled</h3><ul>\n<li><strong>Type</strong>: <code>Boolean</code></li>\n<li><strong>Default</strong>: <code>false</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\"><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<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><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=\"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\"><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"},{"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-04-15T18:12:14.380Z","updated":"2018-04-15T18:12:13.886Z","path":"examples/index.html","comments":1,"layout":"page","_id":"cjhr36uxx0002pmsqu44kg4ba","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 (<= 480px), 3 slides on tablet (<= 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 (<= 480px), 3 slides on tablet (<= 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 **<carousel>** and **<slide>** 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 **<carousel>** and **<slide>** 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-04-15T18:12:14.393Z","updated":"2018-04-15T18:12:13.887Z","path":"guide/index.html","comments":1,"layout":"page","_id":"cjhr36uy00003pmsqbg9y43cx","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 <s