diff --git a/dist/vue-carousel.min.js b/dist/vue-carousel.min.js index 44e275fa3..2b1d7e44e 100644 --- a/dist/vue-carousel.min.js +++ b/dist/vue-carousel.min.js @@ -3,4 +3,4 @@ * (c) 2017 todd.beauchamp@ssense.com * https://github.com/ssense/vue-carousel#readme */ -!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.VueCarousel=t():e.VueCarousel=t()}(this,function(){return function(e){function t(a){if(n[a])return n[a].exports;var i=n[a]={exports:{},id:a,loaded:!1};return e[a].call(i.exports,i,i.exports,t),i.loaded=!0,i.exports}var n={};return t.m=e,t.c=n,t.p="",t(0)}([function(e,t,n){"use strict";function a(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(t,"__esModule",{value:!0}),t.Slide=t.Carousel=void 0;var i=n(1),r=a(i),o=n(21),s=a(o),u=function(e){e.component("carousel",r.default),e.component("slide",s.default)};t.default={install:u},t.Carousel=r.default,t.Slide=s.default},function(e,t,n){n(2);var a=n(7)(n(8),n(26),null,null);e.exports=a.exports},function(e,t,n){var a=n(3);"string"==typeof a&&(a=[[e.id,a,""]]),a.locals&&(e.exports=a.locals);n(5)("482b1162",a,!0)},function(e,t,n){t=e.exports=n(4)(),t.push([e.id,".VueCarousel{position:relative}.VueCarousel-wrapper{width:100%;position:relative;overflow:hidden}.VueCarousel-inner{display:flex;flex-direction:row;backface-visibility:hidden}",""])},function(e,t){e.exports=function(){var e=[];return e.toString=function(){for(var e=[],t=0;tn.parts.length&&(a.parts.length=n.parts.length)}else{for(var r=[],i=0;it[0]?-1:1}),a=n.filter(function(e){return t>=e[0]}),i=a[0]&&a[0][1];return i||this.perPage},canAdvanceForward:function(){return this.currentPage0},currentPerPage:function(){return!this.perPageCustom||this.$isServer?this.perPage:this.breakpointSlidesPerPage},currentOffset:function(){var e=this.currentPage,t=this.slideWidth,n=this.dragOffset,a=this.scrollPerPage?e*t*this.currentPerPage:e*t;return(a+n)*-1},isHidden:function(){return this.carouselWidth<=0},pageCount:function(){var e=this.slideCount,t=this.currentPerPage;if(this.scrollPerPage){var n=Math.ceil(e/t);return n<1?1:n}return e-(this.currentPerPage-1)},slideWidth:function(){var e=this.carouselWidth,t=this.currentPerPage;return e/t},transitionStyle:function(){return this.speed/1e3+"s "+this.easing+" transform"}},methods:{advancePage:function(e){e&&"backward"===e&&this.canAdvanceBackward?this.goToPage(this.currentPage-1):(!e||e&&"backward"!==e)&&this.canAdvanceForward&&this.goToPage(this.currentPage+1)},attachMutationObserver:function(){var e=this,t=window.MutationObserver||window.WebKitMutationObserver||window.MozMutationObserver;if(t){var n={attributes:!0,data:!0};this.mutationObserver=new t(function(){e.$nextTick(function(){e.computeCarouselWidth()})}),this.$parent.$el&&this.mutationObserver.observe(this.$parent.$el,n)}},detachMutationObserver:function(){this.mutationObserver&&this.mutationObserver.disconnect()},getBrowserWidth:function(){return this.browserWidth=window.innerWidth,this.browserWidth},getCarouselWidth:function(){return this.carouselWidth=this.$el&&this.$el.clientWidth||0,this.carouselWidth},getSlideCount:function(){this.slideCount=this.$slots&&this.$slots.default&&this.$slots.default.length||0},goToPage:function(e){e>=0&&e<=this.pageCount&&(this.currentPage=e)},handleMousedown:function(e){e.touches||e.preventDefault(),this.mousedown=!0,this.dragStartX="ontouchstart"in window?e.touches[0].clientX:e.clientX},handleMouseup:function(){this.mousedown=!1,this.dragOffset=0},handleMousemove:function(e){if(this.mousedown){var t="ontouchstart"in window?e.touches[0].clientX:e.clientX,n=this.dragStartX-t;this.dragOffset=n,this.dragOffset>this.minSwipeDistance?(this.handleMouseup(),this.advancePage()):this.dragOffset<-this.minSwipeDistance&&(this.handleMouseup(),this.advancePage("backward"))}},computeCarouselWidth:function(){this.getSlideCount(),this.getBrowserWidth(),this.getCarouselWidth(),this.setCurrentPageInBounds()},setCurrentPageInBounds:function(){if(!this.canAdvanceForward){var e=this.pageCount-1;this.currentPage=e>=0?e:0}}},mounted:function(){this.$isServer||(window.addEventListener("resize",(0,s.default)(this.computeCarouselWidth,16)),"ontouchstart"in window?(this.$el.addEventListener("touchstart",this.handleMousedown),this.$el.addEventListener("touchend",this.handleMouseup),this.$el.addEventListener("touchmove",this.handleMousemove)):(this.$el.addEventListener("mousedown",this.handleMousedown),this.$el.addEventListener("mouseup",this.handleMouseup),this.$el.addEventListener("mousemove",this.handleMousemove))),this.attachMutationObserver(),this.computeCarouselWidth()},destroyed:function(){this.$isServer||(this.detachMutationObserver(),window.removeEventListener("resize",this.getBrowserWidth),"ontouchstart"in window?this.$el.removeEventListener("touchmove",this.handleMousemove):this.$el.removeEventListener("mousemove",this.handleMousemove))}}},function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var n={props:{autoplay:{type:Boolean,default:!1},autoplayTimeout:{type:Number,default:2e3},autoplayHoverPause:{type:Boolean,default:!1}},data:function(){return{autoplayInterval:null}},destroyed:function(){this.$isServer||(this.$el.removeEventListener("mouseenter",this.pauseAutoplay),this.$el.removeEventListener("mouseleave",this.startAutoplay))},methods:{pauseAutoplay:function(){this.autoplayInterval&&(this.autoplayInterval=clearInterval(this.autoplayInterval))},startAutoplay:function(){this.autoplay&&(this.autoplayInterval=setInterval(this.advancePage,this.autoplayTimeout))}},mounted:function(){!this.$isServer&&this.autoplayHoverPause&&(this.$el.addEventListener("mouseenter",this.pauseAutoplay),this.$el.addEventListener("mouseleave",this.startAutoplay)),this.startAutoplay()}};t.default=n},function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var n=function(e,t,n){var a=void 0;return function(){var i=void 0,r=function(){a=null,n||e.apply(i)},o=n&&!a;clearTimeout(a),a=setTimeout(r,t),o&&e.apply(i)}};t.default=n},function(e,t,n){n(12);var a=n(7)(n(14),n(15),"data-v-7fed18e9",null);e.exports=a.exports},function(e,t,n){var a=n(13);"string"==typeof a&&(a=[[e.id,a,""]]),a.locals&&(e.exports=a.locals);n(5)("4e7e1c3a",a,!0)},function(e,t,n){t=e.exports=n(4)(),t.push([e.id,".VueCarousel-navigation-button[data-v-7fed18e9]{position:absolute;top:50%;box-sizing:border-box;color:#000;text-decoration:none}.VueCarousel-navigation-next[data-v-7fed18e9]{right:0;transform:translateY(-50%) translateX(100%)}.VueCarousel-navigation-prev[data-v-7fed18e9]{left:0;transform:translateY(-50%) translateX(-100%)}.VueCarousel-navigation--disabled[data-v-7fed18e9]{opacity:.5;cursor:default}",""])},function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default={name:"navigation",data:function(){return{parentContainer:this.$parent}},props:{clickTargetSize:{type:Number,default:8},nextLabel:{type:String,default:"▶"},prevLabel:{type:String,default:"◀"}},computed:{canAdvanceForward:function(){return this.parentContainer.canAdvanceForward||!1},canAdvanceBackward:function(){return this.parentContainer.canAdvanceBackward||!1}},methods:{triggerPageAdvance:function(e){e?this.$parent.advancePage(e):this.$parent.advancePage()}}}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"VueCarousel-navigation"},[n("a",{staticClass:"VueCarousel-navigation-button VueCarousel-navigation-prev",class:{"VueCarousel-navigation--disabled":!e.canAdvanceBackward},style:"padding: "+e.clickTargetSize+"px; margin-right: -"+e.clickTargetSize+"px;",attrs:{href:"#"},domProps:{innerHTML:e._s(e.prevLabel)},on:{click:function(t){t.preventDefault(),e.triggerPageAdvance("backward")}}}),e._v(" "),n("a",{staticClass:"VueCarousel-navigation-button VueCarousel-navigation-next",class:{"VueCarousel-navigation--disabled":!e.canAdvanceForward},style:"padding: "+e.clickTargetSize+"px; margin-left: -"+e.clickTargetSize+"px;",attrs:{href:"#"},domProps:{innerHTML:e._s(e.nextLabel)},on:{click:function(t){t.preventDefault(),e.triggerPageAdvance()}}})])},staticRenderFns:[]}},function(e,t,n){n(17);var a=n(7)(n(19),n(20),"data-v-7e42136f",null);e.exports=a.exports},function(e,t,n){var a=n(18);"string"==typeof a&&(a=[[e.id,a,""]]),a.locals&&(e.exports=a.locals);n(5)("0c0460ff",a,!0)},function(e,t,n){t=e.exports=n(4)(),t.push([e.id,".VueCarousel-pagination[data-v-7e42136f]{width:100%;float:left;text-align:center}.VueCarousel-dot-container[data-v-7e42136f]{display:inline-block;margin:0 auto}.VueCarousel-dot[data-v-7e42136f]{float:left;cursor:pointer}.VueCarousel-dot-inner[data-v-7e42136f]{border-radius:100%}",""])},function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default={name:"pagination",data:function(){return{parentContainer:this.$parent}}}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{directives:[{name:"show",rawName:"v-show",value:e.parentContainer.pageCount>1,expression:"parentContainer.pageCount > 1"}],staticClass:"VueCarousel-pagination"},[n("div",{staticClass:"VueCarousel-dot-container"},e._l(e.parentContainer.pageCount,function(t,a){return n("div",{staticClass:"VueCarousel-dot",style:"\n margin-top: "+2*e.parentContainer.paginationPadding+"px;\n padding: "+e.parentContainer.paginationPadding+"px;\n ",on:{click:function(t){e.parentContainer.goToPage(a)}}},[n("div",{staticClass:"VueCarousel-dot-inner",style:"\n width: "+e.parentContainer.paginationSize+"px;\n height: "+e.parentContainer.paginationSize+"px;\n background: "+(a===e.parentContainer.currentPage?e.parentContainer.paginationActiveColor:e.parentContainer.paginationColor)+";\n "})])}))])},staticRenderFns:[]}},function(e,t,n){n(22);var a=n(7)(n(24),n(25),null,null);e.exports=a.exports},function(e,t,n){var a=n(23);"string"==typeof a&&(a=[[e.id,a,""]]),a.locals&&(e.exports=a.locals);n(5)("5b198235",a,!0)},function(e,t,n){t=e.exports=n(4)(),t.push([e.id,".VueCarousel-slide{flex-basis:inherit;flex-grow:0;flex-shrink:0;user-select:none}",""])},function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default={name:"slide",data:function(){return{width:null}}}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"VueCarousel-slide"},[e._t("default")],2)},staticRenderFns:[]}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"VueCarousel"},[n("div",{staticClass:"VueCarousel-wrapper"},[n("div",{staticClass:"VueCarousel-inner",style:"\n transform: translateX("+e.currentOffset+"px);\n transition: "+e.transitionStyle+";\n flex-basis: "+e.slideWidth+"px;\n visibility: "+(e.slideWidth?"visible":"hidden")+"\n "},[e._t("default")],2)]),e._v(" "),e.paginationEnabled&&e.pageCount>0?n("pagination"):e._e(),e._v(" "),e.navigationEnabled?n("navigation",{attrs:{clickTargetSize:e.navigationClickTargetSize,nextLabel:e.navigationNextLabel,prevLabel:e.navigationPrevLabel}}):e._e()],1)},staticRenderFns:[]}}])}); \ No newline at end of file +!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.VueCarousel=t():e.VueCarousel=t()}(this,function(){return function(e){function t(a){if(n[a])return n[a].exports;var i=n[a]={exports:{},id:a,loaded:!1};return e[a].call(i.exports,i,i.exports,t),i.loaded=!0,i.exports}var n={};return t.m=e,t.c=n,t.p="",t(0)}([function(e,t,n){"use strict";function a(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(t,"__esModule",{value:!0}),t.Slide=t.Carousel=void 0;var i=n(1),r=a(i),o=n(21),s=a(o),u=function(e){e.component("carousel",r.default),e.component("slide",s.default)};t.default={install:u},t.Carousel=r.default,t.Slide=s.default},function(e,t,n){n(2);var a=n(7)(n(8),n(26),null,null);e.exports=a.exports},function(e,t,n){var a=n(3);"string"==typeof a&&(a=[[e.id,a,""]]),a.locals&&(e.exports=a.locals);n(5)("482b1162",a,!0)},function(e,t,n){t=e.exports=n(4)(),t.push([e.id,".VueCarousel{position:relative}.VueCarousel-wrapper{width:100%;position:relative;overflow:hidden}.VueCarousel-inner{display:flex;flex-direction:row;backface-visibility:hidden}",""])},function(e,t){e.exports=function(){var e=[];return e.toString=function(){for(var e=[],t=0;tn.parts.length&&(a.parts.length=n.parts.length)}else{for(var r=[],i=0;it[0]?-1:1}),a=n.filter(function(e){return t>=e[0]}),i=a[0]&&a[0][1];return i||this.perPage},canAdvanceForward:function(){return this.currentPage0},currentPerPage:function(){return!this.perPageCustom||this.$isServer?this.perPage:this.breakpointSlidesPerPage},currentOffset:function(){var e=this.currentPage,t=this.slideWidth,n=this.dragOffset,a=this.scrollPerPage?e*t*this.currentPerPage:e*t;return(a+n)*-1},isHidden:function(){return this.carouselWidth<=0},pageCount:function(){var e=this.slideCount,t=this.currentPerPage;if(this.scrollPerPage){var n=Math.ceil(e/t);return n<1?1:n}return e-(this.currentPerPage-1)},slideWidth:function(){var e=this.carouselWidth,t=this.currentPerPage;return e/t},transitionStyle:function(){return this.speed/1e3+"s "+this.easing+" transform"}},methods:{advancePage:function(e){e&&"backward"===e&&this.canAdvanceBackward?this.goToPage(this.currentPage-1):(!e||e&&"backward"!==e)&&this.canAdvanceForward&&this.goToPage(this.currentPage+1)},attachMutationObserver:function(){var e=this,t=window.MutationObserver||window.WebKitMutationObserver||window.MozMutationObserver;if(t){var n={attributes:!0,data:!0};this.mutationObserver=new t(function(){e.$nextTick(function(){e.computeCarouselWidth()})}),this.$parent.$el&&this.mutationObserver.observe(this.$parent.$el,n)}},detachMutationObserver:function(){this.mutationObserver&&this.mutationObserver.disconnect()},getBrowserWidth:function(){return this.browserWidth=window.innerWidth,this.browserWidth},getCarouselWidth:function(){return this.carouselWidth=this.$el&&this.$el.clientWidth||0,this.carouselWidth},getSlideCount:function(){this.slideCount=this.$slots&&this.$slots.default&&this.$slots.default.length||0},goToPage:function(e){e>=0&&e<=this.pageCount&&(this.currentPage=e)},handleMousedown:function(e){e.touches||e.preventDefault(),this.mousedown=!0,this.dragStartX="ontouchstart"in window?e.touches[0].clientX:e.clientX},handleMouseup:function(){this.mousedown=!1,this.dragOffset=0},handleMousemove:function(e){if(this.mousedown){var t="ontouchstart"in window?e.touches[0].clientX:e.clientX,n=this.dragStartX-t;this.dragOffset=n,this.dragOffset>this.minSwipeDistance?(this.handleMouseup(),this.advancePage()):this.dragOffset<-this.minSwipeDistance&&(this.handleMouseup(),this.advancePage("backward"))}},computeCarouselWidth:function(){this.getSlideCount(),this.getBrowserWidth(),this.getCarouselWidth(),this.setCurrentPageInBounds()},setCurrentPageInBounds:function(){if(!this.canAdvanceForward){var e=this.pageCount-1;this.currentPage=e>=0?e:0}}},mounted:function(){this.$isServer||(window.addEventListener("resize",(0,s.default)(this.computeCarouselWidth,16)),"ontouchstart"in window?(this.$el.addEventListener("touchstart",this.handleMousedown),this.$el.addEventListener("touchend",this.handleMouseup),this.$el.addEventListener("touchmove",this.handleMousemove)):(this.$el.addEventListener("mousedown",this.handleMousedown),this.$el.addEventListener("mouseup",this.handleMouseup),this.$el.addEventListener("mousemove",this.handleMousemove))),this.attachMutationObserver(),this.computeCarouselWidth()},destroyed:function(){this.$isServer||(this.detachMutationObserver(),window.removeEventListener("resize",this.getBrowserWidth),"ontouchstart"in window?this.$el.removeEventListener("touchmove",this.handleMousemove):this.$el.removeEventListener("mousemove",this.handleMousemove))}}},function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var n={props:{autoplay:{type:Boolean,default:!1},autoplayTimeout:{type:Number,default:2e3},autoplayHoverPause:{type:Boolean,default:!0}},data:function(){return{autoplayInterval:null}},destroyed:function(){this.$isServer||(this.$el.removeEventListener("mouseenter",this.pauseAutoplay),this.$el.removeEventListener("mouseleave",this.startAutoplay))},methods:{pauseAutoplay:function(){this.autoplayInterval&&(this.autoplayInterval=clearInterval(this.autoplayInterval))},startAutoplay:function(){this.autoplay&&(this.autoplayInterval=setInterval(this.advancePage,this.autoplayTimeout))}},mounted:function(){!this.$isServer&&this.autoplayHoverPause&&(this.$el.addEventListener("mouseenter",this.pauseAutoplay),this.$el.addEventListener("mouseleave",this.startAutoplay)),this.startAutoplay()}};t.default=n},function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var n=function(e,t,n){var a=void 0;return function(){var i=void 0,r=function(){a=null,n||e.apply(i)},o=n&&!a;clearTimeout(a),a=setTimeout(r,t),o&&e.apply(i)}};t.default=n},function(e,t,n){n(12);var a=n(7)(n(14),n(15),"data-v-7fed18e9",null);e.exports=a.exports},function(e,t,n){var a=n(13);"string"==typeof a&&(a=[[e.id,a,""]]),a.locals&&(e.exports=a.locals);n(5)("4e7e1c3a",a,!0)},function(e,t,n){t=e.exports=n(4)(),t.push([e.id,".VueCarousel-navigation-button[data-v-7fed18e9]{position:absolute;top:50%;box-sizing:border-box;color:#000;text-decoration:none}.VueCarousel-navigation-next[data-v-7fed18e9]{right:0;transform:translateY(-50%) translateX(100%)}.VueCarousel-navigation-prev[data-v-7fed18e9]{left:0;transform:translateY(-50%) translateX(-100%)}.VueCarousel-navigation--disabled[data-v-7fed18e9]{opacity:.5;cursor:default}",""])},function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default={name:"navigation",data:function(){return{parentContainer:this.$parent}},props:{clickTargetSize:{type:Number,default:8},nextLabel:{type:String,default:"▶"},prevLabel:{type:String,default:"◀"}},computed:{canAdvanceForward:function(){return this.parentContainer.canAdvanceForward||!1},canAdvanceBackward:function(){return this.parentContainer.canAdvanceBackward||!1}},methods:{triggerPageAdvance:function(e){e?this.$parent.advancePage(e):this.$parent.advancePage()}}}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"VueCarousel-navigation"},[n("a",{staticClass:"VueCarousel-navigation-button VueCarousel-navigation-prev",class:{"VueCarousel-navigation--disabled":!e.canAdvanceBackward},style:"padding: "+e.clickTargetSize+"px; margin-right: -"+e.clickTargetSize+"px;",attrs:{href:"#"},domProps:{innerHTML:e._s(e.prevLabel)},on:{click:function(t){t.preventDefault(),e.triggerPageAdvance("backward")}}}),e._v(" "),n("a",{staticClass:"VueCarousel-navigation-button VueCarousel-navigation-next",class:{"VueCarousel-navigation--disabled":!e.canAdvanceForward},style:"padding: "+e.clickTargetSize+"px; margin-left: -"+e.clickTargetSize+"px;",attrs:{href:"#"},domProps:{innerHTML:e._s(e.nextLabel)},on:{click:function(t){t.preventDefault(),e.triggerPageAdvance()}}})])},staticRenderFns:[]}},function(e,t,n){n(17);var a=n(7)(n(19),n(20),"data-v-7e42136f",null);e.exports=a.exports},function(e,t,n){var a=n(18);"string"==typeof a&&(a=[[e.id,a,""]]),a.locals&&(e.exports=a.locals);n(5)("0c0460ff",a,!0)},function(e,t,n){t=e.exports=n(4)(),t.push([e.id,".VueCarousel-pagination[data-v-7e42136f]{width:100%;float:left;text-align:center}.VueCarousel-dot-container[data-v-7e42136f]{display:inline-block;margin:0 auto}.VueCarousel-dot[data-v-7e42136f]{float:left;cursor:pointer}.VueCarousel-dot-inner[data-v-7e42136f]{border-radius:100%}",""])},function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default={name:"pagination",data:function(){return{parentContainer:this.$parent}}}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{directives:[{name:"show",rawName:"v-show",value:e.parentContainer.pageCount>1,expression:"parentContainer.pageCount > 1"}],staticClass:"VueCarousel-pagination"},[n("div",{staticClass:"VueCarousel-dot-container"},e._l(e.parentContainer.pageCount,function(t,a){return n("div",{staticClass:"VueCarousel-dot",style:"\n margin-top: "+2*e.parentContainer.paginationPadding+"px;\n padding: "+e.parentContainer.paginationPadding+"px;\n ",on:{click:function(t){e.parentContainer.goToPage(a)}}},[n("div",{staticClass:"VueCarousel-dot-inner",style:"\n width: "+e.parentContainer.paginationSize+"px;\n height: "+e.parentContainer.paginationSize+"px;\n background: "+(a===e.parentContainer.currentPage?e.parentContainer.paginationActiveColor:e.parentContainer.paginationColor)+";\n "})])}))])},staticRenderFns:[]}},function(e,t,n){n(22);var a=n(7)(n(24),n(25),null,null);e.exports=a.exports},function(e,t,n){var a=n(23);"string"==typeof a&&(a=[[e.id,a,""]]),a.locals&&(e.exports=a.locals);n(5)("5b198235",a,!0)},function(e,t,n){t=e.exports=n(4)(),t.push([e.id,".VueCarousel-slide{flex-basis:inherit;flex-grow:0;flex-shrink:0;user-select:none}",""])},function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default={name:"slide",data:function(){return{width:null}}}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"VueCarousel-slide"},[e._t("default")],2)},staticRenderFns:[]}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"VueCarousel"},[n("div",{staticClass:"VueCarousel-wrapper"},[n("div",{staticClass:"VueCarousel-inner",style:"\n transform: translateX("+e.currentOffset+"px);\n transition: "+e.transitionStyle+";\n flex-basis: "+e.slideWidth+"px;\n visibility: "+(e.slideWidth?"visible":"hidden")+"\n "},[e._t("default")],2)]),e._v(" "),e.paginationEnabled&&e.pageCount>0?n("pagination"):e._e(),e._v(" "),e.navigationEnabled?n("navigation",{attrs:{clickTargetSize:e.navigationClickTargetSize,nextLabel:e.navigationNextLabel,prevLabel:e.navigationPrevLabel}}):e._e()],1)},staticRenderFns:[]}}])}); \ No newline at end of file diff --git a/docs/db.json b/docs/db.json index 86d90b1dd..658807ac8 100644 --- a/docs/db.json +++ b/docs/db.json @@ -1 +1 @@ -{"meta":{"version":1,"warehouse":"2.2.0"},"models":{"Asset":[{"_id":"themes/vue/source/css/index.styl","path":"css/index.styl","modified":1,"renderable":1},{"_id":"themes/vue/source/css/benchmark.styl","path":"css/benchmark.styl","modified":1,"renderable":1},{"_id":"themes/vue/source/css/search.styl","path":"css/search.styl","modified":1,"renderable":1},{"_id":"themes/vue/source/css/page.styl","path":"css/page.styl","modified":1,"renderable":1},{"_id":"themes/vue/source/images/2mhost.png","path":"images/2mhost.png","modified":1,"renderable":1},{"_id":"themes/vue/source/images/actualize.png","path":"images/actualize.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/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/feed.png","path":"images/feed.png","modified":1,"renderable":1},{"_id":"themes/vue/source/images/icons.png","path":"images/icons.png","modified":1,"renderable":1},{"_id":"themes/vue/source/images/itunescn.png","path":"images/itunescn.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/logo.png","path":"images/logo.png","modified":1,"renderable":1},{"_id":"themes/vue/source/images/menu.png","path":"images/menu.png","modified":1,"renderable":1},{"_id":"themes/vue/source/images/htmlburger.png","path":"images/htmlburger.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/laravel.png","path":"images/laravel.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/paypal.png","path":"images/paypal.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/someline.png","path":"images/someline.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/strikingly.png","path":"images/strikingly.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/transition.png","path":"images/transition.png","modified":1,"renderable":1},{"_id":"themes/vue/source/images/trisoft.png","path":"images/trisoft.png","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/common.js","path":"js/common.js","modified":1,"renderable":1},{"_id":"themes/vue/source/js/smooth-scroll.min.js","path":"js/smooth-scroll.min.js","modified":1,"renderable":1},{"_id":"themes/vue/source/images/vuejobs.png","path":"images/vuejobs.png","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":1486675117000},{"_id":"source/_posts/home.md","hash":"07edadc8485cb285e2696bd606cfef37b6e822d1","modified":1486675117000},{"_id":"source/api/index.md","hash":"cef9b5aa36a0df9c11a0f016cae7d9d43a5ad506","modified":1487096141000},{"_id":"source/examples/index.md","hash":"f2eaa0701cfb70790e0afc8a203d530b3f9b5267","modified":1487088911000},{"_id":"source/guide/index.md","hash":"97a976a93601b5f31ac53573a1ba4639f67cb451","modified":1486675117000},{"_id":"themes/vue/layout/index.ejs","hash":"f6899a2906aeb12f93da7fbb04b9aecf188c6744","modified":1487096141000},{"_id":"themes/vue/layout/layout.ejs","hash":"558ed1335c90b559c1f2ba6219ae8fcce1bae84d","modified":1486675117000},{"_id":"themes/vue/layout/page.ejs","hash":"8ccc26cf27c16e2c54bba0436a22c0d8299d574e","modified":1486675117000},{"_id":"themes/vue/layout/post.ejs","hash":"aa03915a3540de78cfe8fe1c8f9e897974bf35a0","modified":1486675117000},{"_id":"themes/vue/layout/partials/header.ejs","hash":"7e646d6d7074dcb2b277ea2d34ab2190b1f440f4","modified":1486675117000},{"_id":"themes/vue/layout/partials/sidebar.ejs","hash":"f4501f301d45233659a28533c7381443ad4f4071","modified":1486675117000},{"_id":"themes/vue/layout/partials/main_menu.ejs","hash":"c6a8caea8d310d822d47c0dfaff157a9f1a4ef21","modified":1486675117000},{"_id":"themes/vue/layout/partials/sponsors.ejs","hash":"8ce920fa38a01d79001da69697b0927e6c7f8018","modified":1486675117000},{"_id":"themes/vue/source/css/_common.styl","hash":"a0ff20d48bac7dca9a305d84aab10133b9915985","modified":1486675117000},{"_id":"themes/vue/source/css/_demo.styl","hash":"75e128f58b4a6ef5fe6a2ea3899d6831f8566390","modified":1486675117000},{"_id":"themes/vue/source/css/_header.styl","hash":"58deb9f0183b0470dbb68a147e1ef344fa8a682e","modified":1486675117000},{"_id":"themes/vue/source/css/_migration.styl","hash":"5ea4f20818827c0d57a36a3006b736366c3b446f","modified":1486675117000},{"_id":"themes/vue/source/css/_settings.styl","hash":"c25843e8e63122df3f37f7583832ac577079d84b","modified":1486675117000},{"_id":"themes/vue/source/css/_sidebar.styl","hash":"cf214c13aa0d286de019ed16633a21a0ed5660df","modified":1486675117000},{"_id":"themes/vue/source/css/_sponsor.styl","hash":"6a4e1503b1e4f0e98e1e008ba846036fee3199aa","modified":1486675117000},{"_id":"themes/vue/source/css/index.styl","hash":"e16ed6d98d0d9a4cb73fb81d71a46f177a47c260","modified":1486675117000},{"_id":"themes/vue/source/css/benchmark.styl","hash":"95d4607b2b59623a673e131e1a267d0311fe89e6","modified":1486675117000},{"_id":"themes/vue/source/css/_syntax.styl","hash":"edb004001fe151bebfdf63bbc250ba75777b5468","modified":1486675117000},{"_id":"themes/vue/source/css/search.styl","hash":"5117f05598154cfc84da04ec1a257bd186653ba2","modified":1486675117000},{"_id":"themes/vue/source/css/page.styl","hash":"34f22034ade34fe59cec9fe3554a5febac9b9894","modified":1486675117000},{"_id":"themes/vue/source/images/2mhost.png","hash":"a42a475ec7d2b36e82f420bd80a9957915dab2ce","modified":1486675117000},{"_id":"themes/vue/source/images/actualize.png","hash":"7b9c0fefb69cc4fad0520782f5445d495975bb57","modified":1486675117000},{"_id":"themes/vue/source/images/down.png","hash":"42505e12d686cf580f793bd9193acbac1e3e3a91","modified":1486675117000},{"_id":"themes/vue/source/images/chaitin.png","hash":"0cca04b4c318b04be96ed066bc6ad3bb5f3788ec","modified":1486675117000},{"_id":"themes/vue/source/images/check.png","hash":"682cf89e1802afb1dfddf07a6aed828a45b824af","modified":1486675117000},{"_id":"themes/vue/source/images/feed.png","hash":"0a746dab71dca2025f63584dbd222dc5e0707ba8","modified":1486675117000},{"_id":"themes/vue/source/images/icons.png","hash":"91225ef7011e59dbe6b4b9f2666133fb5e1bc976","modified":1486675117000},{"_id":"themes/vue/source/images/itunescn.png","hash":"75968c5e469bec3d061c9207ca872b2e57081015","modified":1486675117000},{"_id":"themes/vue/source/images/juejin.png","hash":"a346d9068f1e4f65262fdc885c5fb362ea3f36b8","modified":1486675117000},{"_id":"themes/vue/source/images/logo.png","hash":"79f7d5310f9ab78f52049fbb554303188cb36076","modified":1486675117000},{"_id":"themes/vue/source/images/menu.png","hash":"bdaa35eb1ed119caeb934e15a05b9f4a5396d957","modified":1486675117000},{"_id":"themes/vue/source/images/htmlburger.png","hash":"0005ef9559a88da3ff7b30b53e44acc5f1a14e46","modified":1486675117000},{"_id":"themes/vue/source/images/jsfiddle.png","hash":"0646dceea2a62d3f5d2aabff4bdecffdf54cc8a7","modified":1486675117000},{"_id":"themes/vue/source/images/laravel.png","hash":"d49fdacbae388601d2ff339b31aedd3c0dd3be3a","modified":1486675117000},{"_id":"themes/vue/source/images/monterail.png","hash":"17b3a1f12f5c40b7b94ce320cc2ec9a4df9bca5e","modified":1486675117000},{"_id":"themes/vue/source/images/paypal.png","hash":"4db177273d209e621a99941d6457456a0950eb96","modified":1486675117000},{"_id":"themes/vue/source/images/search.png","hash":"12d664cc51b8d53c9214830bc9b92fb340526a7b","modified":1486675117000},{"_id":"themes/vue/source/images/someline.png","hash":"81ee000201cb80b19c7d79cc116c688c34163d36","modified":1486675117000},{"_id":"themes/vue/source/images/patreon.png","hash":"c2455d5a6a59ff2b0ce5d698a74af7ed7226438c","modified":1486675117000},{"_id":"themes/vue/source/images/strikingly.png","hash":"d16ea35e0693928823b99efafc139f1ea1d6cb90","modified":1486675117000},{"_id":"themes/vue/source/images/tde.png","hash":"ffa3a10004c2510cabd23ba99bdcb5012aab3835","modified":1486675117000},{"_id":"themes/vue/source/images/transition.png","hash":"47b92628ea1263d651dab90093ff5682d2e54e68","modified":1486675117000},{"_id":"themes/vue/source/images/trisoft.png","hash":"c5689ce6833a3696406dc73bb50fa5b6b18b2dbe","modified":1486675117000},{"_id":"themes/vue/source/js/vue-carousel.min.js","hash":"3a09fc39fcfd09a7c5c5a05117762d8a6c99d2f1","modified":1487100177000},{"_id":"themes/vue/source/js/common.js","hash":"18f681ad46b4c68676af18dee60f96a3fdd9421c","modified":1486675117000},{"_id":"themes/vue/source/js/smooth-scroll.min.js","hash":"86d3196a003a5cdc673a4c6ebb75db3ceee1a1a7","modified":1486675117000},{"_id":"themes/vue/source/images/vuejobs.png","hash":"25aa2ef77fcb62051036171942f3575af2a12e9c","modified":1486675117000},{"_id":"themes/vue/source/js/vue.min.js","hash":"1e9ef27fa8e28cd9f5af14ba562a1cb983e49855","modified":1486675117000},{"_id":"themes/vue/source/js/vue.js","hash":"be10c44019f6577b8f80e233ddb31f1f6b367f65","modified":1486675117000},{"_id":"public/api/index.html","hash":"442ef2528c20afa76f537f9ac3235a0bfc163a7a","modified":1487100242143},{"_id":"public/guide/index.html","hash":"b2e300a270c0838e7c11e70fb527e8e761c21e43","modified":1487100242143},{"_id":"public/examples/index.html","hash":"62b01d884d192fc9611969c249b1308c74566281","modified":1487100242144},{"_id":"public/2016/12/29/home/index.html","hash":"9be9a4f07793ca34ad12a917e2f66aea86c9a906","modified":1487100242144},{"_id":"public/archives/index.html","hash":"40dd0ce304b702434e137fb5f30f02b64b7b90b3","modified":1487100242144},{"_id":"public/archives/2016/index.html","hash":"40dd0ce304b702434e137fb5f30f02b64b7b90b3","modified":1487100242144},{"_id":"public/archives/2016/12/index.html","hash":"40dd0ce304b702434e137fb5f30f02b64b7b90b3","modified":1487100242144},{"_id":"public/index.html","hash":"be5b5bbfaa06dc29483d114d53652bd4dae9e6ce","modified":1487100242144},{"_id":"public/images/2mhost.png","hash":"a42a475ec7d2b36e82f420bd80a9957915dab2ce","modified":1487100242160},{"_id":"public/images/actualize.png","hash":"7b9c0fefb69cc4fad0520782f5445d495975bb57","modified":1487100242160},{"_id":"public/images/down.png","hash":"42505e12d686cf580f793bd9193acbac1e3e3a91","modified":1487100242160},{"_id":"public/images/chaitin.png","hash":"0cca04b4c318b04be96ed066bc6ad3bb5f3788ec","modified":1487100242160},{"_id":"public/images/check.png","hash":"682cf89e1802afb1dfddf07a6aed828a45b824af","modified":1487100242160},{"_id":"public/images/feed.png","hash":"0a746dab71dca2025f63584dbd222dc5e0707ba8","modified":1487100242160},{"_id":"public/images/icons.png","hash":"91225ef7011e59dbe6b4b9f2666133fb5e1bc976","modified":1487100242160},{"_id":"public/images/itunescn.png","hash":"75968c5e469bec3d061c9207ca872b2e57081015","modified":1487100242160},{"_id":"public/images/juejin.png","hash":"a346d9068f1e4f65262fdc885c5fb362ea3f36b8","modified":1487100242160},{"_id":"public/images/logo.png","hash":"79f7d5310f9ab78f52049fbb554303188cb36076","modified":1487100242160},{"_id":"public/images/menu.png","hash":"bdaa35eb1ed119caeb934e15a05b9f4a5396d957","modified":1487100242160},{"_id":"public/images/htmlburger.png","hash":"0005ef9559a88da3ff7b30b53e44acc5f1a14e46","modified":1487100242160},{"_id":"public/images/jsfiddle.png","hash":"0646dceea2a62d3f5d2aabff4bdecffdf54cc8a7","modified":1487100242160},{"_id":"public/images/laravel.png","hash":"d49fdacbae388601d2ff339b31aedd3c0dd3be3a","modified":1487100242160},{"_id":"public/images/monterail.png","hash":"17b3a1f12f5c40b7b94ce320cc2ec9a4df9bca5e","modified":1487100242160},{"_id":"public/images/paypal.png","hash":"4db177273d209e621a99941d6457456a0950eb96","modified":1487100242160},{"_id":"public/images/search.png","hash":"12d664cc51b8d53c9214830bc9b92fb340526a7b","modified":1487100242161},{"_id":"public/images/someline.png","hash":"81ee000201cb80b19c7d79cc116c688c34163d36","modified":1487100242161},{"_id":"public/images/patreon.png","hash":"c2455d5a6a59ff2b0ce5d698a74af7ed7226438c","modified":1487100242161},{"_id":"public/images/strikingly.png","hash":"d16ea35e0693928823b99efafc139f1ea1d6cb90","modified":1487100242161},{"_id":"public/images/tde.png","hash":"ffa3a10004c2510cabd23ba99bdcb5012aab3835","modified":1487100242161},{"_id":"public/images/transition.png","hash":"47b92628ea1263d651dab90093ff5682d2e54e68","modified":1487100242161},{"_id":"public/images/trisoft.png","hash":"c5689ce6833a3696406dc73bb50fa5b6b18b2dbe","modified":1487100242161},{"_id":"public/images/vuejobs.png","hash":"25aa2ef77fcb62051036171942f3575af2a12e9c","modified":1487100242161},{"_id":"public/css/index.css","hash":"ecc18db4eb172acaa0faa1111a29e8722edcdbc1","modified":1487100242689},{"_id":"public/css/search.css","hash":"ac9a0e8c8da7919174caea15d9704c192ea3a2c4","modified":1487100242689},{"_id":"public/css/benchmark.css","hash":"3424ee8c27052da2ab9f544027f49e1550385e9d","modified":1487100242689},{"_id":"public/css/page.css","hash":"b1be2ed7cc5a8e4593b8c008d084a95487f9d940","modified":1487100242689},{"_id":"public/js/vue-carousel.min.js","hash":"3a09fc39fcfd09a7c5c5a05117762d8a6c99d2f1","modified":1487100242689},{"_id":"public/js/common.js","hash":"18f681ad46b4c68676af18dee60f96a3fdd9421c","modified":1487100242691},{"_id":"public/js/smooth-scroll.min.js","hash":"86d3196a003a5cdc673a4c6ebb75db3ceee1a1a7","modified":1487100242691},{"_id":"public/js/vue.min.js","hash":"1e9ef27fa8e28cd9f5af14ba562a1cb983e49855","modified":1487100242691},{"_id":"public/js/vue.js","hash":"be10c44019f6577b8f80e233ddb31f1f6b367f65","modified":1487100242691}],"Category":[],"Data":[],"Page":[{"title":"API","_content":"\n## Global config\n\n### autoplay\n\nFlag to enable autoplay\n\n* **Type**: `Boolean`\n* **Default**: `false`\n\n### autoplayTimeout\n\nTime elapsed before advancing slide\n\n* **Type**: `Number`\n* **Default**: `2000`\n\n### autoplayHoverPause\n\nFlag to pause autoplay on hover\n\n* **Type**: `Boolean`\n* **Default**: `false`\n\n### easing\n\nTransition speed between slides. Any valid CSS transition easing is accepted.\n\n* **Type**: `String`\n* **Default**: `ease`\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\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### speed\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## Pagination\n\nConfigure the pagination component (clickable page dots)\n\n### paginationEnabled\n\n* **Type**: `Boolean`\n* **Default**: `false`\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","source":"api/index.md","raw":"---\ntitle: API\n---\n\n## Global config\n\n### autoplay\n\nFlag to enable autoplay\n\n* **Type**: `Boolean`\n* **Default**: `false`\n\n### autoplayTimeout\n\nTime elapsed before advancing slide\n\n* **Type**: `Number`\n* **Default**: `2000`\n\n### autoplayHoverPause\n\nFlag to pause autoplay on hover\n\n* **Type**: `Boolean`\n* **Default**: `false`\n\n### easing\n\nTransition speed between slides. Any valid CSS transition easing is accepted.\n\n* **Type**: `String`\n* **Default**: `ease`\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\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### speed\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## Pagination\n\nConfigure the pagination component (clickable page dots)\n\n### paginationEnabled\n\n* **Type**: `Boolean`\n* **Default**: `false`\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","date":"2017-02-14T18:15:41.000Z","updated":"2017-02-14T18:15:41.000Z","path":"api/index.html","comments":1,"layout":"page","_id":"ciz5x36c8000197avb34aot0m","content":"

Global config

autoplay

Flag to enable autoplay

\n
    \n
  • Type: Boolean
    • \n
  • Default: false
    • \n
\n

autoplayTimeout

Time elapsed before advancing slide

\n
    \n
  • Type: Number
    • \n
  • Default: 2000
    • \n
\n

autoplayHoverPause

Flag to pause autoplay on hover

\n
    \n
  • Type: Boolean
    • \n
  • Default: false
    • \n
\n

easing

Transition speed between slides. Any valid CSS transition easing is accepted.

\n
    \n
  • Type: String
    • \n
  • Default: ease
    • \n
\n

minSwipeDistance

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

\n
    \n
  • Type: Number
    • \n
  • Default: 8
    • \n
\n

perPage

Maximum number of slides displayed on each page

\n
    \n
  • Type: Number
    • \n
  • Default: 2
    • \n
\n

perPageCustom

Configure the number of visible slides for responsive breakpoints.

\n

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.

\n
    \n
  • Type: Array
    • \n
  • Usage:
    • \n
\n
1
<carousel :perPageCustom=\"[[768, 3], [1024, 4]]\">
\n

A mobile-first strategy is used to determine the matching breakpoint. In the above example, the 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

scrollPerPage

Scroll per page, not per item.

\n
    \n
  • Type: Boolean
    • \n
  • Default: false
    • \n
\n

speed

Size of each pagination dot. Pixel values are accepted.

\n
    \n
  • Type Number
    • \n
  • Default: 10
    • \n
\n

Navigation

Configure the navigation component (next/prev buttons)

\n

navigationClickTargetSize

Amount of padding to apply around the label in pixels

\n
    \n
  • Type: Number
    • \n
  • Default: 8
    • \n
\n

navigationEnabled

    \n
  • Type: Boolean
    • \n
  • Default: false
    • \n
\n

navigationNextLabel

Text content of the navigation next button

\n
    \n
  • Type: String
    • \n
  • Default: ▶
    • \n
\n

navigationPrevLabel

Text content of the navigation prev button

\n
    \n
  • Type: String
    • \n
  • Default: ◀
    • \n
\n

Pagination

Configure the pagination component (clickable page dots)

\n

paginationEnabled

    \n
  • Type: Boolean
    • \n
  • Default: false
    • \n
\n

paginationActiveColor

The fill color of the active pagination dot. Any valid CSS color is accepted.

\n
    \n
  • Type: String
    • \n
  • Default: #000000
    • \n
\n

paginationColor

The fill color of pagination dots. Any valid CSS color is accepted.

\n
    \n
  • Type: String
    • \n
  • Default: #efefef
    • \n
\n

paginationPadding

The padding inside each pagination dot. Pixel values are accepted.

\n
    \n
  • Type: Number
    • \n
  • Default: 10
    • \n
\n

paginationSize

The size of each pagination dot. Pixel values are accepted.

\n
    \n
  • Type: Number
    • \n
  • Default: 10
    • \n
\n","excerpt":"","more":"

Global config

autoplay

Flag to enable autoplay

\n
    \n
  • Type: Boolean
    • \n
  • Default: false
    • \n
\n

autoplayTimeout

Time elapsed before advancing slide

\n
    \n
  • Type: Number
    • \n
  • Default: 2000
    • \n
\n

autoplayHoverPause

Flag to pause autoplay on hover

\n
    \n
  • Type: Boolean
    • \n
  • Default: false
    • \n
\n

easing

Transition speed between slides. Any valid CSS transition easing is accepted.

\n
    \n
  • Type: String
    • \n
  • Default: ease
    • \n
\n

minSwipeDistance

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

\n
    \n
  • Type: Number
    • \n
  • Default: 8
    • \n
\n

perPage

Maximum number of slides displayed on each page

\n
    \n
  • Type: Number
    • \n
  • Default: 2
    • \n
\n

perPageCustom

Configure the number of visible slides for responsive breakpoints.

\n

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.

\n
    \n
  • Type: Array
    • \n
  • Usage:
    • \n
\n
1
<carousel :perPageCustom=\"[[768, 3], [1024, 4]]\">
\n

A mobile-first strategy is used to determine the matching breakpoint. In the above example, the 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

scrollPerPage

Scroll per page, not per item.

\n
    \n
  • Type: Boolean
    • \n
  • Default: false
    • \n
\n

speed

Size of each pagination dot. Pixel values are accepted.

\n
    \n
  • Type Number
    • \n
  • Default: 10
    • \n
\n

Navigation

Configure the navigation component (next/prev buttons)

\n

navigationClickTargetSize

Amount of padding to apply around the label in pixels

\n
    \n
  • Type: Number
    • \n
  • Default: 8
    • \n
\n

navigationEnabled

    \n
  • Type: Boolean
    • \n
  • Default: false
    • \n
\n

navigationNextLabel

Text content of the navigation next button

\n
    \n
  • Type: String
    • \n
  • Default: ▶
    • \n
\n

navigationPrevLabel

Text content of the navigation prev button

\n
    \n
  • Type: String
    • \n
  • Default: ◀
    • \n
\n

Pagination

Configure the pagination component (clickable page dots)

\n

paginationEnabled

    \n
  • Type: Boolean
    • \n
  • Default: false
    • \n
\n

paginationActiveColor

The fill color of the active pagination dot. Any valid CSS color is accepted.

\n
    \n
  • Type: String
    • \n
  • Default: #000000
    • \n
\n

paginationColor

The fill color of pagination dots. Any valid CSS color is accepted.

\n
    \n
  • Type: String
    • \n
  • Default: #efefef
    • \n
\n

paginationPadding

The padding inside each pagination dot. Pixel values are accepted.

\n
    \n
  • Type: Number
    • \n
  • Default: 10
    • \n
\n

paginationSize

The size of each pagination dot. Pixel values are accepted.

\n
    \n
  • Type: Number
    • \n
  • Default: 10
    • \n
\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 \n \n Slide 1 Content\n \n \n Slide 2 Content\n \n \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 \n \n Slide 1 Content\n \n \n Slide 2 Content\n \n \n```","date":"2017-02-09T21:18:37.000Z","updated":"2017-02-09T21:18:37.000Z","path":"guide/index.html","comments":1,"layout":"page","_id":"ciz5x36c9000297av90a2kq8x","content":"

Installation

1
npm install -S vue-carousel
\n

Usage (Global)

You may install Vue Carousel globally:

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

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

\n

Usage (Local)

Include the carousel directly into your component using import:

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

HTML Structure

Once the Carousel and Slide components are installed globally or imported, they can be used in templates in the following manner:

\n
1
2
3
4
5
6
7
8
<carousel>
  <slide>
    Slide 1 Content
  </slide>
  <slide>
    Slide 2 Content
  </slide>
</carousel>
","excerpt":"","more":"

Installation

1
npm install -S vue-carousel
\n

Usage (Global)

You may install Vue Carousel globally:

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

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

\n

Usage (Local)

Include the carousel directly into your component using import:

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

HTML Structure

Once the Carousel and Slide components are installed globally or imported, they can be used in templates in the following manner:

\n
1
2
3
4
5
6
7
8
<carousel>
  <slide>
    Slide 1 Content
  </slide>
  <slide>
    Slide 2 Content
  </slide>
</carousel>
"},{"title":"Examples","_content":"\n## Basic\n\nNo options configured, 10 slides added to the carousel.\n\n\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\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) or [perPageCustom](/vue-carousel/api#perPageCustom) with each movement.\n\n\n\n## Customized\n\nCustomized pagination dot colors and sizes. Customized speed and easing.\n\n\n\n\n","source":"examples/index.md","raw":"---\ntitle: Examples\n---\n\n## Basic\n\nNo options configured, 10 slides added to the carousel.\n\n\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\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) or [perPageCustom](/vue-carousel/api#perPageCustom) with each movement.\n\n\n\n## Customized\n\nCustomized pagination dot colors and sizes. Customized speed and easing.\n\n\n\n\n","date":"2017-02-14T16:15:11.000Z","updated":"2017-02-14T16:15:11.000Z","path":"examples/index.html","comments":1,"layout":"page","_id":"ciz5x36cb000397av6zsz0b6y","content":"

Basic

No options configured, 10 slides added to the carousel.

\n\n\n

Responsive

Configured breakpoints: 2 slides on mobile (<= 480px), 3 slides on tablet (<= 768).
Note: in a JSFiddle iframe, the breakpoint is determined by the iframe’s width.

\n\n\n

Scroll per page

Instead of scrolling on a per item basis, the carousel will scroll the configured perPage or perPageCustom with each movement.

\n\n\n

Customized

Customized pagination dot colors and sizes. Customized speed and easing.

\n\n\n\n","excerpt":"","more":"

Basic

No options configured, 10 slides added to the carousel.

\n\n\n

Responsive

Configured breakpoints: 2 slides on mobile (<= 480px), 3 slides on tablet (<= 768).
Note: in a JSFiddle iframe, the breakpoint is determined by the iframe’s width.

\n\n\n

Scroll per page

Instead of scrolling on a per item basis, the carousel will scroll the configured perPage or perPageCustom with each movement.

\n\n\n

Customized

Customized pagination dot colors and sizes. Customized speed and easing.

\n\n\n\n"}],"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":"2017-02-09T21:18:37.000Z","comments":1,"layout":"post","photos":[],"link":"","_id":"ciz5x36c3000097avv3acgkpj","content":"","excerpt":"","more":""}],"PostAsset":[],"PostCategory":[],"PostTag":[],"Tag":[]}} \ No newline at end of file +{"meta":{"version":1,"warehouse":"2.2.0"},"models":{"Asset":[{"_id":"themes/vue/source/css/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/benchmark.styl","path":"css/benchmark.styl","modified":0,"renderable":1},{"_id":"themes/vue/source/images/actualize.png","path":"images/actualize.png","modified":0,"renderable":1},{"_id":"themes/vue/source/css/index.styl","path":"css/index.styl","modified":0,"renderable":1},{"_id":"themes/vue/source/images/chaitin.png","path":"images/chaitin.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/2mhost.png","path":"images/2mhost.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/check.png","path":"images/check.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/feed.png","path":"images/feed.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/logo.png","path":"images/logo.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/jsfiddle.png","path":"images/jsfiddle.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/monterail.png","path":"images/monterail.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/patreon.png","path":"images/patreon.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/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/tde.png","path":"images/tde.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/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/vuejobs.png","path":"images/vuejobs.png","modified":0,"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":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":1486675117000},{"_id":"source/api/index.md","hash":"cef9b5aa36a0df9c11a0f016cae7d9d43a5ad506","modified":1487096141000},{"_id":"source/_posts/home.md","hash":"07edadc8485cb285e2696bd606cfef37b6e822d1","modified":1486675117000},{"_id":"source/examples/index.md","hash":"5d78d6eb8d407e7c2671b8a67de56694b66472cc","modified":1487102557000},{"_id":"source/guide/index.md","hash":"97a976a93601b5f31ac53573a1ba4639f67cb451","modified":1486675117000},{"_id":"themes/vue/layout/index.ejs","hash":"f6899a2906aeb12f93da7fbb04b9aecf188c6744","modified":1487096141000},{"_id":"themes/vue/layout/post.ejs","hash":"aa03915a3540de78cfe8fe1c8f9e897974bf35a0","modified":1486675117000},{"_id":"themes/vue/layout/layout.ejs","hash":"558ed1335c90b559c1f2ba6219ae8fcce1bae84d","modified":1486675117000},{"_id":"themes/vue/layout/page.ejs","hash":"8ccc26cf27c16e2c54bba0436a22c0d8299d574e","modified":1486675117000},{"_id":"themes/vue/source/css/_demo.styl","hash":"75e128f58b4a6ef5fe6a2ea3899d6831f8566390","modified":1486675117000},{"_id":"themes/vue/source/css/_migration.styl","hash":"5ea4f20818827c0d57a36a3006b736366c3b446f","modified":1486675117000},{"_id":"themes/vue/source/css/_common.styl","hash":"a0ff20d48bac7dca9a305d84aab10133b9915985","modified":1486675117000},{"_id":"themes/vue/source/css/_header.styl","hash":"58deb9f0183b0470dbb68a147e1ef344fa8a682e","modified":1486675117000},{"_id":"themes/vue/source/css/_syntax.styl","hash":"edb004001fe151bebfdf63bbc250ba75777b5468","modified":1486675117000},{"_id":"themes/vue/source/css/_sponsor.styl","hash":"6a4e1503b1e4f0e98e1e008ba846036fee3199aa","modified":1486675117000},{"_id":"themes/vue/source/css/_settings.styl","hash":"c25843e8e63122df3f37f7583832ac577079d84b","modified":1486675117000},{"_id":"themes/vue/source/css/_sidebar.styl","hash":"cf214c13aa0d286de019ed16633a21a0ed5660df","modified":1486675117000},{"_id":"themes/vue/source/css/page.styl","hash":"34f22034ade34fe59cec9fe3554a5febac9b9894","modified":1486675117000},{"_id":"themes/vue/source/css/search.styl","hash":"5117f05598154cfc84da04ec1a257bd186653ba2","modified":1486675117000},{"_id":"themes/vue/source/css/benchmark.styl","hash":"95d4607b2b59623a673e131e1a267d0311fe89e6","modified":1486675117000},{"_id":"themes/vue/source/images/actualize.png","hash":"7b9c0fefb69cc4fad0520782f5445d495975bb57","modified":1486675117000},{"_id":"themes/vue/source/css/index.styl","hash":"e16ed6d98d0d9a4cb73fb81d71a46f177a47c260","modified":1486675117000},{"_id":"themes/vue/source/images/chaitin.png","hash":"0cca04b4c318b04be96ed066bc6ad3bb5f3788ec","modified":1486675117000},{"_id":"themes/vue/source/images/down.png","hash":"42505e12d686cf580f793bd9193acbac1e3e3a91","modified":1486675117000},{"_id":"themes/vue/source/images/2mhost.png","hash":"a42a475ec7d2b36e82f420bd80a9957915dab2ce","modified":1486675117000},{"_id":"themes/vue/source/images/htmlburger.png","hash":"0005ef9559a88da3ff7b30b53e44acc5f1a14e46","modified":1486675117000},{"_id":"themes/vue/source/images/check.png","hash":"682cf89e1802afb1dfddf07a6aed828a45b824af","modified":1486675117000},{"_id":"themes/vue/source/images/icons.png","hash":"91225ef7011e59dbe6b4b9f2666133fb5e1bc976","modified":1486675117000},{"_id":"themes/vue/source/images/itunescn.png","hash":"75968c5e469bec3d061c9207ca872b2e57081015","modified":1486675117000},{"_id":"themes/vue/source/images/feed.png","hash":"0a746dab71dca2025f63584dbd222dc5e0707ba8","modified":1486675117000},{"_id":"themes/vue/source/images/laravel.png","hash":"d49fdacbae388601d2ff339b31aedd3c0dd3be3a","modified":1486675117000},{"_id":"themes/vue/source/images/logo.png","hash":"79f7d5310f9ab78f52049fbb554303188cb36076","modified":1486675117000},{"_id":"themes/vue/source/images/menu.png","hash":"bdaa35eb1ed119caeb934e15a05b9f4a5396d957","modified":1486675117000},{"_id":"themes/vue/source/images/jsfiddle.png","hash":"0646dceea2a62d3f5d2aabff4bdecffdf54cc8a7","modified":1486675117000},{"_id":"themes/vue/source/images/juejin.png","hash":"a346d9068f1e4f65262fdc885c5fb362ea3f36b8","modified":1486675117000},{"_id":"themes/vue/source/images/monterail.png","hash":"17b3a1f12f5c40b7b94ce320cc2ec9a4df9bca5e","modified":1486675117000},{"_id":"themes/vue/source/images/search.png","hash":"12d664cc51b8d53c9214830bc9b92fb340526a7b","modified":1486675117000},{"_id":"themes/vue/source/images/patreon.png","hash":"c2455d5a6a59ff2b0ce5d698a74af7ed7226438c","modified":1486675117000},{"_id":"themes/vue/source/images/paypal.png","hash":"4db177273d209e621a99941d6457456a0950eb96","modified":1486675117000},{"_id":"themes/vue/source/images/someline.png","hash":"81ee000201cb80b19c7d79cc116c688c34163d36","modified":1486675117000},{"_id":"themes/vue/source/images/strikingly.png","hash":"d16ea35e0693928823b99efafc139f1ea1d6cb90","modified":1486675117000},{"_id":"themes/vue/source/images/tde.png","hash":"ffa3a10004c2510cabd23ba99bdcb5012aab3835","modified":1486675117000},{"_id":"themes/vue/source/images/transition.png","hash":"47b92628ea1263d651dab90093ff5682d2e54e68","modified":1486675117000},{"_id":"themes/vue/source/images/trisoft.png","hash":"c5689ce6833a3696406dc73bb50fa5b6b18b2dbe","modified":1486675117000},{"_id":"themes/vue/source/js/smooth-scroll.min.js","hash":"86d3196a003a5cdc673a4c6ebb75db3ceee1a1a7","modified":1486675117000},{"_id":"themes/vue/source/js/common.js","hash":"18f681ad46b4c68676af18dee60f96a3fdd9421c","modified":1486675117000},{"_id":"themes/vue/source/images/vuejobs.png","hash":"25aa2ef77fcb62051036171942f3575af2a12e9c","modified":1486675117000},{"_id":"themes/vue/source/js/vue-carousel.min.js","hash":"ce3074009a867a8a8cc5b77459c366f150d84287","modified":1487101664000},{"_id":"themes/vue/layout/partials/header.ejs","hash":"7e646d6d7074dcb2b277ea2d34ab2190b1f440f4","modified":1486675117000},{"_id":"themes/vue/layout/partials/main_menu.ejs","hash":"c6a8caea8d310d822d47c0dfaff157a9f1a4ef21","modified":1486675117000},{"_id":"themes/vue/layout/partials/sidebar.ejs","hash":"f4501f301d45233659a28533c7381443ad4f4071","modified":1486675117000},{"_id":"themes/vue/layout/partials/sponsors.ejs","hash":"8ce920fa38a01d79001da69697b0927e6c7f8018","modified":1486675117000},{"_id":"themes/vue/source/js/vue.min.js","hash":"1e9ef27fa8e28cd9f5af14ba562a1cb983e49855","modified":1486675117000},{"_id":"themes/vue/source/js/vue.js","hash":"be10c44019f6577b8f80e233ddb31f1f6b367f65","modified":1486675117000}],"Category":[],"Data":[],"Page":[{"title":"API","_content":"\n## Global config\n\n### autoplay\n\nFlag to enable autoplay\n\n* **Type**: `Boolean`\n* **Default**: `false`\n\n### autoplayTimeout\n\nTime elapsed before advancing slide\n\n* **Type**: `Number`\n* **Default**: `2000`\n\n### autoplayHoverPause\n\nFlag to pause autoplay on hover\n\n* **Type**: `Boolean`\n* **Default**: `false`\n\n### easing\n\nTransition speed between slides. Any valid CSS transition easing is accepted.\n\n* **Type**: `String`\n* **Default**: `ease`\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\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### speed\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## Pagination\n\nConfigure the pagination component (clickable page dots)\n\n### paginationEnabled\n\n* **Type**: `Boolean`\n* **Default**: `false`\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","source":"api/index.md","raw":"---\ntitle: API\n---\n\n## Global config\n\n### autoplay\n\nFlag to enable autoplay\n\n* **Type**: `Boolean`\n* **Default**: `false`\n\n### autoplayTimeout\n\nTime elapsed before advancing slide\n\n* **Type**: `Number`\n* **Default**: `2000`\n\n### autoplayHoverPause\n\nFlag to pause autoplay on hover\n\n* **Type**: `Boolean`\n* **Default**: `false`\n\n### easing\n\nTransition speed between slides. Any valid CSS transition easing is accepted.\n\n* **Type**: `String`\n* **Default**: `ease`\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\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### speed\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## Pagination\n\nConfigure the pagination component (clickable page dots)\n\n### paginationEnabled\n\n* **Type**: `Boolean`\n* **Default**: `false`\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","date":"2017-02-14T18:15:41.000Z","updated":"2017-02-14T18:15:41.000Z","path":"api/index.html","_id":"ciz5psvic0000g8avrxtq3jwr","comments":1,"layout":"page","content":"

Global config

autoplay

Flag to enable autoplay

\n
    \n
  • Type: Boolean
    • \n
  • Default: false
    • \n
\n

autoplayTimeout

Time elapsed before advancing slide

\n
    \n
  • Type: Number
    • \n
  • Default: 2000
    • \n
\n

autoplayHoverPause

Flag to pause autoplay on hover

\n
    \n
  • Type: Boolean
    • \n
  • Default: false
    • \n
\n

easing

Transition speed between slides. Any valid CSS transition easing is accepted.

\n
    \n
  • Type: String
    • \n
  • Default: ease
    • \n
\n

minSwipeDistance

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

\n
    \n
  • Type: Number
    • \n
  • Default: 8
    • \n
\n

perPage

Maximum number of slides displayed on each page

\n
    \n
  • Type: Number
    • \n
  • Default: 2
    • \n
\n

perPageCustom

Configure the number of visible slides for responsive breakpoints.

\n

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.

\n
    \n
  • Type: Array
    • \n
  • Usage:
    • \n
\n
1
<carousel :perPageCustom=\"[[768, 3], [1024, 4]]\">
\n

A mobile-first strategy is used to determine the matching breakpoint. In the above example, the 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

scrollPerPage

Scroll per page, not per item.

\n
    \n
  • Type: Boolean
    • \n
  • Default: false
    • \n
\n

speed

Size of each pagination dot. Pixel values are accepted.

\n
    \n
  • Type Number
    • \n
  • Default: 10
    • \n
\n

Navigation

Configure the navigation component (next/prev buttons)

\n

navigationClickTargetSize

Amount of padding to apply around the label in pixels

\n
    \n
  • Type: Number
    • \n
  • Default: 8
    • \n
\n

navigationEnabled

    \n
  • Type: Boolean
    • \n
  • Default: false
    • \n
\n

navigationNextLabel

Text content of the navigation next button

\n
    \n
  • Type: String
    • \n
  • Default: ▶
    • \n
\n

navigationPrevLabel

Text content of the navigation prev button

\n
    \n
  • Type: String
    • \n
  • Default: ◀
    • \n
\n

Pagination

Configure the pagination component (clickable page dots)

\n

paginationEnabled

    \n
  • Type: Boolean
    • \n
  • Default: false
    • \n
\n

paginationActiveColor

The fill color of the active pagination dot. Any valid CSS color is accepted.

\n
    \n
  • Type: String
    • \n
  • Default: #000000
    • \n
\n

paginationColor

The fill color of pagination dots. Any valid CSS color is accepted.

\n
    \n
  • Type: String
    • \n
  • Default: #efefef
    • \n
\n

paginationPadding

The padding inside each pagination dot. Pixel values are accepted.

\n
    \n
  • Type: Number
    • \n
  • Default: 10
    • \n
\n

paginationSize

The size of each pagination dot. Pixel values are accepted.

\n
    \n
  • Type: Number
    • \n
  • Default: 10
    • \n
\n","excerpt":"","more":"

Global config

autoplay

Flag to enable autoplay

\n
    \n
  • Type: Boolean
    • \n
  • Default: false
    • \n
\n

autoplayTimeout

Time elapsed before advancing slide

\n
    \n
  • Type: Number
    • \n
  • Default: 2000
    • \n
\n

autoplayHoverPause

Flag to pause autoplay on hover

\n
    \n
  • Type: Boolean
    • \n
  • Default: false
    • \n
\n

easing

Transition speed between slides. Any valid CSS transition easing is accepted.

\n
    \n
  • Type: String
    • \n
  • Default: ease
    • \n
\n

minSwipeDistance

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

\n
    \n
  • Type: Number
    • \n
  • Default: 8
    • \n
\n

perPage

Maximum number of slides displayed on each page

\n
    \n
  • Type: Number
    • \n
  • Default: 2
    • \n
\n

perPageCustom

Configure the number of visible slides for responsive breakpoints.

\n

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.

\n
    \n
  • Type: Array
    • \n
  • Usage:
    • \n
\n
1
<carousel :perPageCustom=\"[[768, 3], [1024, 4]]\">
\n

A mobile-first strategy is used to determine the matching breakpoint. In the above example, the 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

scrollPerPage

Scroll per page, not per item.

\n
    \n
  • Type: Boolean
    • \n
  • Default: false
    • \n
\n

speed

Size of each pagination dot. Pixel values are accepted.

\n
    \n
  • Type Number
    • \n
  • Default: 10
    • \n
\n

Navigation

Configure the navigation component (next/prev buttons)

\n

navigationClickTargetSize

Amount of padding to apply around the label in pixels

\n
    \n
  • Type: Number
    • \n
  • Default: 8
    • \n
\n

navigationEnabled

    \n
  • Type: Boolean
    • \n
  • Default: false
    • \n
\n

navigationNextLabel

Text content of the navigation next button

\n
    \n
  • Type: String
    • \n
  • Default: ▶
    • \n
\n

navigationPrevLabel

Text content of the navigation prev button

\n
    \n
  • Type: String
    • \n
  • Default: ◀
    • \n
\n

Pagination

Configure the pagination component (clickable page dots)

\n

paginationEnabled

    \n
  • Type: Boolean
    • \n
  • Default: false
    • \n
\n

paginationActiveColor

The fill color of the active pagination dot. Any valid CSS color is accepted.

\n
    \n
  • Type: String
    • \n
  • Default: #000000
    • \n
\n

paginationColor

The fill color of pagination dots. Any valid CSS color is accepted.

\n
    \n
  • Type: String
    • \n
  • Default: #efefef
    • \n
\n

paginationPadding

The padding inside each pagination dot. Pixel values are accepted.

\n
    \n
  • Type: Number
    • \n
  • Default: 10
    • \n
\n

paginationSize

The size of each pagination dot. Pixel values are accepted.

\n
    \n
  • Type: Number
    • \n
  • Default: 10
    • \n
\n"},{"title":"Examples","_content":"\n## Basic\n\nNo options configured, 10 slides added to the carousel.\n\n\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\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) or [perPageCustom](/vue-carousel/api#perPageCustom) with each movement.\n\n\n\n## Customized\n\nCustomized pagination dot colors and sizes. Customized speed and easing.\n\n\n\n","source":"examples/index.md","raw":"---\ntitle: Examples\n---\n\n## Basic\n\nNo options configured, 10 slides added to the carousel.\n\n\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\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) or [perPageCustom](/vue-carousel/api#perPageCustom) with each movement.\n\n\n\n## Customized\n\nCustomized pagination dot colors and sizes. Customized speed and easing.\n\n\n\n","date":"2017-02-14T20:02:37.000Z","updated":"2017-02-14T20:02:37.000Z","path":"examples/index.html","_id":"ciz5psvii0002g8avd6b33ldi","comments":1,"layout":"page","content":"

Basic

No options configured, 10 slides added to the carousel.

\n\n\n

Responsive

Configured breakpoints: 2 slides on mobile (<= 480px), 3 slides on tablet (<= 768).
Note: in a JSFiddle iframe, the breakpoint is determined by the iframe’s width.

\n\n\n

Scroll per page

Instead of scrolling on a per item basis, the carousel will scroll the configured perPage or perPageCustom with each movement.

\n\n\n

Customized

Customized pagination dot colors and sizes. Customized speed and easing.

\n\n\n","excerpt":"","more":"

Basic

No options configured, 10 slides added to the carousel.

\n\n\n

Responsive

Configured breakpoints: 2 slides on mobile (<= 480px), 3 slides on tablet (<= 768).
Note: in a JSFiddle iframe, the breakpoint is determined by the iframe’s width.

\n\n\n

Scroll per page

Instead of scrolling on a per item basis, the carousel will scroll the configured perPage or perPageCustom with each movement.

\n\n\n

Customized

Customized pagination dot colors and sizes. Customized speed and easing.

\n\n\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 \n \n Slide 1 Content\n \n \n Slide 2 Content\n \n \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 \n \n Slide 1 Content\n \n \n Slide 2 Content\n \n \n```","date":"2017-02-09T21:18:37.000Z","updated":"2017-02-09T21:18:37.000Z","path":"guide/index.html","comments":1,"layout":"page","_id":"ciz5psvik0003g8av8odu2ozr","content":"

Installation

1
npm install -S vue-carousel
\n

Usage (Global)

You may install Vue Carousel globally:

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

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

\n

Usage (Local)

Include the carousel directly into your component using import:

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

HTML Structure

Once the Carousel and Slide components are installed globally or imported, they can be used in templates in the following manner:

\n
1
2
3
4
5
6
7
8
<carousel>
  <slide>
    Slide 1 Content
  </slide>
  <slide>
    Slide 2 Content
  </slide>
</carousel>
","excerpt":"","more":"

Installation

1
npm install -S vue-carousel
\n

Usage (Global)

You may install Vue Carousel globally:

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

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

\n

Usage (Local)

Include the carousel directly into your component using import:

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

HTML Structure

Once the Carousel and Slide components are installed globally or imported, they can be used in templates in the following manner:

\n
1
2
3
4
5
6
7
8
<carousel>
  <slide>
    Slide 1 Content
  </slide>
  <slide>
    Slide 2 Content
  </slide>
</carousel>
"}],"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":"2017-02-09T21:18:37.000Z","comments":1,"layout":"post","photos":[],"link":"","_id":"ciz5psvie0001g8avuy4yyko8","content":"","excerpt":"","more":""}],"PostAsset":[],"PostCategory":[],"PostTag":[],"Tag":[]}} \ No newline at end of file diff --git a/docs/public b/docs/public index ae6f2a1a7..40e72b407 160000 --- a/docs/public +++ b/docs/public @@ -1 +1 @@ -Subproject commit ae6f2a1a7220753369887874f57108099e508dc9 +Subproject commit 40e72b4071a7eee3070b22d1b5de547196bdf71a diff --git a/docs/source/examples/index.md b/docs/source/examples/index.md index 1e2dd9a7c..fe090f6e7 100644 --- a/docs/source/examples/index.md +++ b/docs/source/examples/index.md @@ -21,10 +21,22 @@ Instead of scrolling on a per item basis, the carousel will scroll the configure +## Autoplay + +The carousel will auto-advance slides unless the carousel is hovered upon. + + + +## Navigation + +Buttons added to advance the carousel in either direction. + + + ## Customized Customized pagination dot colors and sizes. Customized speed and easing. - + diff --git a/docs/themes/vue/source/js/vue-carousel.min.js b/docs/themes/vue/source/js/vue-carousel.min.js index 44e275fa3..2b1d7e44e 100644 --- a/docs/themes/vue/source/js/vue-carousel.min.js +++ b/docs/themes/vue/source/js/vue-carousel.min.js @@ -3,4 +3,4 @@ * (c) 2017 todd.beauchamp@ssense.com * https://github.com/ssense/vue-carousel#readme */ -!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.VueCarousel=t():e.VueCarousel=t()}(this,function(){return function(e){function t(a){if(n[a])return n[a].exports;var i=n[a]={exports:{},id:a,loaded:!1};return e[a].call(i.exports,i,i.exports,t),i.loaded=!0,i.exports}var n={};return t.m=e,t.c=n,t.p="",t(0)}([function(e,t,n){"use strict";function a(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(t,"__esModule",{value:!0}),t.Slide=t.Carousel=void 0;var i=n(1),r=a(i),o=n(21),s=a(o),u=function(e){e.component("carousel",r.default),e.component("slide",s.default)};t.default={install:u},t.Carousel=r.default,t.Slide=s.default},function(e,t,n){n(2);var a=n(7)(n(8),n(26),null,null);e.exports=a.exports},function(e,t,n){var a=n(3);"string"==typeof a&&(a=[[e.id,a,""]]),a.locals&&(e.exports=a.locals);n(5)("482b1162",a,!0)},function(e,t,n){t=e.exports=n(4)(),t.push([e.id,".VueCarousel{position:relative}.VueCarousel-wrapper{width:100%;position:relative;overflow:hidden}.VueCarousel-inner{display:flex;flex-direction:row;backface-visibility:hidden}",""])},function(e,t){e.exports=function(){var e=[];return e.toString=function(){for(var e=[],t=0;tn.parts.length&&(a.parts.length=n.parts.length)}else{for(var r=[],i=0;it[0]?-1:1}),a=n.filter(function(e){return t>=e[0]}),i=a[0]&&a[0][1];return i||this.perPage},canAdvanceForward:function(){return this.currentPage0},currentPerPage:function(){return!this.perPageCustom||this.$isServer?this.perPage:this.breakpointSlidesPerPage},currentOffset:function(){var e=this.currentPage,t=this.slideWidth,n=this.dragOffset,a=this.scrollPerPage?e*t*this.currentPerPage:e*t;return(a+n)*-1},isHidden:function(){return this.carouselWidth<=0},pageCount:function(){var e=this.slideCount,t=this.currentPerPage;if(this.scrollPerPage){var n=Math.ceil(e/t);return n<1?1:n}return e-(this.currentPerPage-1)},slideWidth:function(){var e=this.carouselWidth,t=this.currentPerPage;return e/t},transitionStyle:function(){return this.speed/1e3+"s "+this.easing+" transform"}},methods:{advancePage:function(e){e&&"backward"===e&&this.canAdvanceBackward?this.goToPage(this.currentPage-1):(!e||e&&"backward"!==e)&&this.canAdvanceForward&&this.goToPage(this.currentPage+1)},attachMutationObserver:function(){var e=this,t=window.MutationObserver||window.WebKitMutationObserver||window.MozMutationObserver;if(t){var n={attributes:!0,data:!0};this.mutationObserver=new t(function(){e.$nextTick(function(){e.computeCarouselWidth()})}),this.$parent.$el&&this.mutationObserver.observe(this.$parent.$el,n)}},detachMutationObserver:function(){this.mutationObserver&&this.mutationObserver.disconnect()},getBrowserWidth:function(){return this.browserWidth=window.innerWidth,this.browserWidth},getCarouselWidth:function(){return this.carouselWidth=this.$el&&this.$el.clientWidth||0,this.carouselWidth},getSlideCount:function(){this.slideCount=this.$slots&&this.$slots.default&&this.$slots.default.length||0},goToPage:function(e){e>=0&&e<=this.pageCount&&(this.currentPage=e)},handleMousedown:function(e){e.touches||e.preventDefault(),this.mousedown=!0,this.dragStartX="ontouchstart"in window?e.touches[0].clientX:e.clientX},handleMouseup:function(){this.mousedown=!1,this.dragOffset=0},handleMousemove:function(e){if(this.mousedown){var t="ontouchstart"in window?e.touches[0].clientX:e.clientX,n=this.dragStartX-t;this.dragOffset=n,this.dragOffset>this.minSwipeDistance?(this.handleMouseup(),this.advancePage()):this.dragOffset<-this.minSwipeDistance&&(this.handleMouseup(),this.advancePage("backward"))}},computeCarouselWidth:function(){this.getSlideCount(),this.getBrowserWidth(),this.getCarouselWidth(),this.setCurrentPageInBounds()},setCurrentPageInBounds:function(){if(!this.canAdvanceForward){var e=this.pageCount-1;this.currentPage=e>=0?e:0}}},mounted:function(){this.$isServer||(window.addEventListener("resize",(0,s.default)(this.computeCarouselWidth,16)),"ontouchstart"in window?(this.$el.addEventListener("touchstart",this.handleMousedown),this.$el.addEventListener("touchend",this.handleMouseup),this.$el.addEventListener("touchmove",this.handleMousemove)):(this.$el.addEventListener("mousedown",this.handleMousedown),this.$el.addEventListener("mouseup",this.handleMouseup),this.$el.addEventListener("mousemove",this.handleMousemove))),this.attachMutationObserver(),this.computeCarouselWidth()},destroyed:function(){this.$isServer||(this.detachMutationObserver(),window.removeEventListener("resize",this.getBrowserWidth),"ontouchstart"in window?this.$el.removeEventListener("touchmove",this.handleMousemove):this.$el.removeEventListener("mousemove",this.handleMousemove))}}},function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var n={props:{autoplay:{type:Boolean,default:!1},autoplayTimeout:{type:Number,default:2e3},autoplayHoverPause:{type:Boolean,default:!1}},data:function(){return{autoplayInterval:null}},destroyed:function(){this.$isServer||(this.$el.removeEventListener("mouseenter",this.pauseAutoplay),this.$el.removeEventListener("mouseleave",this.startAutoplay))},methods:{pauseAutoplay:function(){this.autoplayInterval&&(this.autoplayInterval=clearInterval(this.autoplayInterval))},startAutoplay:function(){this.autoplay&&(this.autoplayInterval=setInterval(this.advancePage,this.autoplayTimeout))}},mounted:function(){!this.$isServer&&this.autoplayHoverPause&&(this.$el.addEventListener("mouseenter",this.pauseAutoplay),this.$el.addEventListener("mouseleave",this.startAutoplay)),this.startAutoplay()}};t.default=n},function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var n=function(e,t,n){var a=void 0;return function(){var i=void 0,r=function(){a=null,n||e.apply(i)},o=n&&!a;clearTimeout(a),a=setTimeout(r,t),o&&e.apply(i)}};t.default=n},function(e,t,n){n(12);var a=n(7)(n(14),n(15),"data-v-7fed18e9",null);e.exports=a.exports},function(e,t,n){var a=n(13);"string"==typeof a&&(a=[[e.id,a,""]]),a.locals&&(e.exports=a.locals);n(5)("4e7e1c3a",a,!0)},function(e,t,n){t=e.exports=n(4)(),t.push([e.id,".VueCarousel-navigation-button[data-v-7fed18e9]{position:absolute;top:50%;box-sizing:border-box;color:#000;text-decoration:none}.VueCarousel-navigation-next[data-v-7fed18e9]{right:0;transform:translateY(-50%) translateX(100%)}.VueCarousel-navigation-prev[data-v-7fed18e9]{left:0;transform:translateY(-50%) translateX(-100%)}.VueCarousel-navigation--disabled[data-v-7fed18e9]{opacity:.5;cursor:default}",""])},function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default={name:"navigation",data:function(){return{parentContainer:this.$parent}},props:{clickTargetSize:{type:Number,default:8},nextLabel:{type:String,default:"▶"},prevLabel:{type:String,default:"◀"}},computed:{canAdvanceForward:function(){return this.parentContainer.canAdvanceForward||!1},canAdvanceBackward:function(){return this.parentContainer.canAdvanceBackward||!1}},methods:{triggerPageAdvance:function(e){e?this.$parent.advancePage(e):this.$parent.advancePage()}}}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"VueCarousel-navigation"},[n("a",{staticClass:"VueCarousel-navigation-button VueCarousel-navigation-prev",class:{"VueCarousel-navigation--disabled":!e.canAdvanceBackward},style:"padding: "+e.clickTargetSize+"px; margin-right: -"+e.clickTargetSize+"px;",attrs:{href:"#"},domProps:{innerHTML:e._s(e.prevLabel)},on:{click:function(t){t.preventDefault(),e.triggerPageAdvance("backward")}}}),e._v(" "),n("a",{staticClass:"VueCarousel-navigation-button VueCarousel-navigation-next",class:{"VueCarousel-navigation--disabled":!e.canAdvanceForward},style:"padding: "+e.clickTargetSize+"px; margin-left: -"+e.clickTargetSize+"px;",attrs:{href:"#"},domProps:{innerHTML:e._s(e.nextLabel)},on:{click:function(t){t.preventDefault(),e.triggerPageAdvance()}}})])},staticRenderFns:[]}},function(e,t,n){n(17);var a=n(7)(n(19),n(20),"data-v-7e42136f",null);e.exports=a.exports},function(e,t,n){var a=n(18);"string"==typeof a&&(a=[[e.id,a,""]]),a.locals&&(e.exports=a.locals);n(5)("0c0460ff",a,!0)},function(e,t,n){t=e.exports=n(4)(),t.push([e.id,".VueCarousel-pagination[data-v-7e42136f]{width:100%;float:left;text-align:center}.VueCarousel-dot-container[data-v-7e42136f]{display:inline-block;margin:0 auto}.VueCarousel-dot[data-v-7e42136f]{float:left;cursor:pointer}.VueCarousel-dot-inner[data-v-7e42136f]{border-radius:100%}",""])},function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default={name:"pagination",data:function(){return{parentContainer:this.$parent}}}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{directives:[{name:"show",rawName:"v-show",value:e.parentContainer.pageCount>1,expression:"parentContainer.pageCount > 1"}],staticClass:"VueCarousel-pagination"},[n("div",{staticClass:"VueCarousel-dot-container"},e._l(e.parentContainer.pageCount,function(t,a){return n("div",{staticClass:"VueCarousel-dot",style:"\n margin-top: "+2*e.parentContainer.paginationPadding+"px;\n padding: "+e.parentContainer.paginationPadding+"px;\n ",on:{click:function(t){e.parentContainer.goToPage(a)}}},[n("div",{staticClass:"VueCarousel-dot-inner",style:"\n width: "+e.parentContainer.paginationSize+"px;\n height: "+e.parentContainer.paginationSize+"px;\n background: "+(a===e.parentContainer.currentPage?e.parentContainer.paginationActiveColor:e.parentContainer.paginationColor)+";\n "})])}))])},staticRenderFns:[]}},function(e,t,n){n(22);var a=n(7)(n(24),n(25),null,null);e.exports=a.exports},function(e,t,n){var a=n(23);"string"==typeof a&&(a=[[e.id,a,""]]),a.locals&&(e.exports=a.locals);n(5)("5b198235",a,!0)},function(e,t,n){t=e.exports=n(4)(),t.push([e.id,".VueCarousel-slide{flex-basis:inherit;flex-grow:0;flex-shrink:0;user-select:none}",""])},function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default={name:"slide",data:function(){return{width:null}}}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"VueCarousel-slide"},[e._t("default")],2)},staticRenderFns:[]}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"VueCarousel"},[n("div",{staticClass:"VueCarousel-wrapper"},[n("div",{staticClass:"VueCarousel-inner",style:"\n transform: translateX("+e.currentOffset+"px);\n transition: "+e.transitionStyle+";\n flex-basis: "+e.slideWidth+"px;\n visibility: "+(e.slideWidth?"visible":"hidden")+"\n "},[e._t("default")],2)]),e._v(" "),e.paginationEnabled&&e.pageCount>0?n("pagination"):e._e(),e._v(" "),e.navigationEnabled?n("navigation",{attrs:{clickTargetSize:e.navigationClickTargetSize,nextLabel:e.navigationNextLabel,prevLabel:e.navigationPrevLabel}}):e._e()],1)},staticRenderFns:[]}}])}); \ No newline at end of file +!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.VueCarousel=t():e.VueCarousel=t()}(this,function(){return function(e){function t(a){if(n[a])return n[a].exports;var i=n[a]={exports:{},id:a,loaded:!1};return e[a].call(i.exports,i,i.exports,t),i.loaded=!0,i.exports}var n={};return t.m=e,t.c=n,t.p="",t(0)}([function(e,t,n){"use strict";function a(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(t,"__esModule",{value:!0}),t.Slide=t.Carousel=void 0;var i=n(1),r=a(i),o=n(21),s=a(o),u=function(e){e.component("carousel",r.default),e.component("slide",s.default)};t.default={install:u},t.Carousel=r.default,t.Slide=s.default},function(e,t,n){n(2);var a=n(7)(n(8),n(26),null,null);e.exports=a.exports},function(e,t,n){var a=n(3);"string"==typeof a&&(a=[[e.id,a,""]]),a.locals&&(e.exports=a.locals);n(5)("482b1162",a,!0)},function(e,t,n){t=e.exports=n(4)(),t.push([e.id,".VueCarousel{position:relative}.VueCarousel-wrapper{width:100%;position:relative;overflow:hidden}.VueCarousel-inner{display:flex;flex-direction:row;backface-visibility:hidden}",""])},function(e,t){e.exports=function(){var e=[];return e.toString=function(){for(var e=[],t=0;tn.parts.length&&(a.parts.length=n.parts.length)}else{for(var r=[],i=0;it[0]?-1:1}),a=n.filter(function(e){return t>=e[0]}),i=a[0]&&a[0][1];return i||this.perPage},canAdvanceForward:function(){return this.currentPage0},currentPerPage:function(){return!this.perPageCustom||this.$isServer?this.perPage:this.breakpointSlidesPerPage},currentOffset:function(){var e=this.currentPage,t=this.slideWidth,n=this.dragOffset,a=this.scrollPerPage?e*t*this.currentPerPage:e*t;return(a+n)*-1},isHidden:function(){return this.carouselWidth<=0},pageCount:function(){var e=this.slideCount,t=this.currentPerPage;if(this.scrollPerPage){var n=Math.ceil(e/t);return n<1?1:n}return e-(this.currentPerPage-1)},slideWidth:function(){var e=this.carouselWidth,t=this.currentPerPage;return e/t},transitionStyle:function(){return this.speed/1e3+"s "+this.easing+" transform"}},methods:{advancePage:function(e){e&&"backward"===e&&this.canAdvanceBackward?this.goToPage(this.currentPage-1):(!e||e&&"backward"!==e)&&this.canAdvanceForward&&this.goToPage(this.currentPage+1)},attachMutationObserver:function(){var e=this,t=window.MutationObserver||window.WebKitMutationObserver||window.MozMutationObserver;if(t){var n={attributes:!0,data:!0};this.mutationObserver=new t(function(){e.$nextTick(function(){e.computeCarouselWidth()})}),this.$parent.$el&&this.mutationObserver.observe(this.$parent.$el,n)}},detachMutationObserver:function(){this.mutationObserver&&this.mutationObserver.disconnect()},getBrowserWidth:function(){return this.browserWidth=window.innerWidth,this.browserWidth},getCarouselWidth:function(){return this.carouselWidth=this.$el&&this.$el.clientWidth||0,this.carouselWidth},getSlideCount:function(){this.slideCount=this.$slots&&this.$slots.default&&this.$slots.default.length||0},goToPage:function(e){e>=0&&e<=this.pageCount&&(this.currentPage=e)},handleMousedown:function(e){e.touches||e.preventDefault(),this.mousedown=!0,this.dragStartX="ontouchstart"in window?e.touches[0].clientX:e.clientX},handleMouseup:function(){this.mousedown=!1,this.dragOffset=0},handleMousemove:function(e){if(this.mousedown){var t="ontouchstart"in window?e.touches[0].clientX:e.clientX,n=this.dragStartX-t;this.dragOffset=n,this.dragOffset>this.minSwipeDistance?(this.handleMouseup(),this.advancePage()):this.dragOffset<-this.minSwipeDistance&&(this.handleMouseup(),this.advancePage("backward"))}},computeCarouselWidth:function(){this.getSlideCount(),this.getBrowserWidth(),this.getCarouselWidth(),this.setCurrentPageInBounds()},setCurrentPageInBounds:function(){if(!this.canAdvanceForward){var e=this.pageCount-1;this.currentPage=e>=0?e:0}}},mounted:function(){this.$isServer||(window.addEventListener("resize",(0,s.default)(this.computeCarouselWidth,16)),"ontouchstart"in window?(this.$el.addEventListener("touchstart",this.handleMousedown),this.$el.addEventListener("touchend",this.handleMouseup),this.$el.addEventListener("touchmove",this.handleMousemove)):(this.$el.addEventListener("mousedown",this.handleMousedown),this.$el.addEventListener("mouseup",this.handleMouseup),this.$el.addEventListener("mousemove",this.handleMousemove))),this.attachMutationObserver(),this.computeCarouselWidth()},destroyed:function(){this.$isServer||(this.detachMutationObserver(),window.removeEventListener("resize",this.getBrowserWidth),"ontouchstart"in window?this.$el.removeEventListener("touchmove",this.handleMousemove):this.$el.removeEventListener("mousemove",this.handleMousemove))}}},function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var n={props:{autoplay:{type:Boolean,default:!1},autoplayTimeout:{type:Number,default:2e3},autoplayHoverPause:{type:Boolean,default:!0}},data:function(){return{autoplayInterval:null}},destroyed:function(){this.$isServer||(this.$el.removeEventListener("mouseenter",this.pauseAutoplay),this.$el.removeEventListener("mouseleave",this.startAutoplay))},methods:{pauseAutoplay:function(){this.autoplayInterval&&(this.autoplayInterval=clearInterval(this.autoplayInterval))},startAutoplay:function(){this.autoplay&&(this.autoplayInterval=setInterval(this.advancePage,this.autoplayTimeout))}},mounted:function(){!this.$isServer&&this.autoplayHoverPause&&(this.$el.addEventListener("mouseenter",this.pauseAutoplay),this.$el.addEventListener("mouseleave",this.startAutoplay)),this.startAutoplay()}};t.default=n},function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var n=function(e,t,n){var a=void 0;return function(){var i=void 0,r=function(){a=null,n||e.apply(i)},o=n&&!a;clearTimeout(a),a=setTimeout(r,t),o&&e.apply(i)}};t.default=n},function(e,t,n){n(12);var a=n(7)(n(14),n(15),"data-v-7fed18e9",null);e.exports=a.exports},function(e,t,n){var a=n(13);"string"==typeof a&&(a=[[e.id,a,""]]),a.locals&&(e.exports=a.locals);n(5)("4e7e1c3a",a,!0)},function(e,t,n){t=e.exports=n(4)(),t.push([e.id,".VueCarousel-navigation-button[data-v-7fed18e9]{position:absolute;top:50%;box-sizing:border-box;color:#000;text-decoration:none}.VueCarousel-navigation-next[data-v-7fed18e9]{right:0;transform:translateY(-50%) translateX(100%)}.VueCarousel-navigation-prev[data-v-7fed18e9]{left:0;transform:translateY(-50%) translateX(-100%)}.VueCarousel-navigation--disabled[data-v-7fed18e9]{opacity:.5;cursor:default}",""])},function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default={name:"navigation",data:function(){return{parentContainer:this.$parent}},props:{clickTargetSize:{type:Number,default:8},nextLabel:{type:String,default:"▶"},prevLabel:{type:String,default:"◀"}},computed:{canAdvanceForward:function(){return this.parentContainer.canAdvanceForward||!1},canAdvanceBackward:function(){return this.parentContainer.canAdvanceBackward||!1}},methods:{triggerPageAdvance:function(e){e?this.$parent.advancePage(e):this.$parent.advancePage()}}}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"VueCarousel-navigation"},[n("a",{staticClass:"VueCarousel-navigation-button VueCarousel-navigation-prev",class:{"VueCarousel-navigation--disabled":!e.canAdvanceBackward},style:"padding: "+e.clickTargetSize+"px; margin-right: -"+e.clickTargetSize+"px;",attrs:{href:"#"},domProps:{innerHTML:e._s(e.prevLabel)},on:{click:function(t){t.preventDefault(),e.triggerPageAdvance("backward")}}}),e._v(" "),n("a",{staticClass:"VueCarousel-navigation-button VueCarousel-navigation-next",class:{"VueCarousel-navigation--disabled":!e.canAdvanceForward},style:"padding: "+e.clickTargetSize+"px; margin-left: -"+e.clickTargetSize+"px;",attrs:{href:"#"},domProps:{innerHTML:e._s(e.nextLabel)},on:{click:function(t){t.preventDefault(),e.triggerPageAdvance()}}})])},staticRenderFns:[]}},function(e,t,n){n(17);var a=n(7)(n(19),n(20),"data-v-7e42136f",null);e.exports=a.exports},function(e,t,n){var a=n(18);"string"==typeof a&&(a=[[e.id,a,""]]),a.locals&&(e.exports=a.locals);n(5)("0c0460ff",a,!0)},function(e,t,n){t=e.exports=n(4)(),t.push([e.id,".VueCarousel-pagination[data-v-7e42136f]{width:100%;float:left;text-align:center}.VueCarousel-dot-container[data-v-7e42136f]{display:inline-block;margin:0 auto}.VueCarousel-dot[data-v-7e42136f]{float:left;cursor:pointer}.VueCarousel-dot-inner[data-v-7e42136f]{border-radius:100%}",""])},function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default={name:"pagination",data:function(){return{parentContainer:this.$parent}}}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{directives:[{name:"show",rawName:"v-show",value:e.parentContainer.pageCount>1,expression:"parentContainer.pageCount > 1"}],staticClass:"VueCarousel-pagination"},[n("div",{staticClass:"VueCarousel-dot-container"},e._l(e.parentContainer.pageCount,function(t,a){return n("div",{staticClass:"VueCarousel-dot",style:"\n margin-top: "+2*e.parentContainer.paginationPadding+"px;\n padding: "+e.parentContainer.paginationPadding+"px;\n ",on:{click:function(t){e.parentContainer.goToPage(a)}}},[n("div",{staticClass:"VueCarousel-dot-inner",style:"\n width: "+e.parentContainer.paginationSize+"px;\n height: "+e.parentContainer.paginationSize+"px;\n background: "+(a===e.parentContainer.currentPage?e.parentContainer.paginationActiveColor:e.parentContainer.paginationColor)+";\n "})])}))])},staticRenderFns:[]}},function(e,t,n){n(22);var a=n(7)(n(24),n(25),null,null);e.exports=a.exports},function(e,t,n){var a=n(23);"string"==typeof a&&(a=[[e.id,a,""]]),a.locals&&(e.exports=a.locals);n(5)("5b198235",a,!0)},function(e,t,n){t=e.exports=n(4)(),t.push([e.id,".VueCarousel-slide{flex-basis:inherit;flex-grow:0;flex-shrink:0;user-select:none}",""])},function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default={name:"slide",data:function(){return{width:null}}}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"VueCarousel-slide"},[e._t("default")],2)},staticRenderFns:[]}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"VueCarousel"},[n("div",{staticClass:"VueCarousel-wrapper"},[n("div",{staticClass:"VueCarousel-inner",style:"\n transform: translateX("+e.currentOffset+"px);\n transition: "+e.transitionStyle+";\n flex-basis: "+e.slideWidth+"px;\n visibility: "+(e.slideWidth?"visible":"hidden")+"\n "},[e._t("default")],2)]),e._v(" "),e.paginationEnabled&&e.pageCount>0?n("pagination"):e._e(),e._v(" "),e.navigationEnabled?n("navigation",{attrs:{clickTargetSize:e.navigationClickTargetSize,nextLabel:e.navigationNextLabel,prevLabel:e.navigationPrevLabel}}):e._e()],1)},staticRenderFns:[]}}])}); \ No newline at end of file diff --git a/src/mixins/autoplay.js b/src/mixins/autoplay.js index ffb516c30..691089887 100644 --- a/src/mixins/autoplay.js +++ b/src/mixins/autoplay.js @@ -19,7 +19,7 @@ const autoplay = { */ autoplayHoverPause: { type: Boolean, - default: false, + default: true, }, }, data() {