hooper 0.3.1 → 0.3.2
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/hooper.css +47 -47
- package/dist/hooper.esm.js +9 -4
- package/dist/hooper.js +9 -4
- package/dist/hooper.min.js +1 -1
- package/package.json +5 -7
- package/dist/index.html +0 -47
package/dist/hooper.css
CHANGED
@@ -1,50 +1,15 @@
|
|
1
|
-
.hooper-
|
2
|
-
.hooper-prev {
|
3
|
-
background-color: transparent;
|
4
|
-
border: none;
|
5
|
-
padding: 1em;
|
1
|
+
.hooper-progress {
|
6
2
|
position: absolute;
|
7
|
-
top: 50%;
|
8
|
-
transform: translateY(-50%);
|
9
|
-
cursor: pointer;
|
10
|
-
}
|
11
|
-
.hooper-next.is-disabled,
|
12
|
-
.hooper-prev.is-disabled {
|
13
|
-
opacity: 0.3;
|
14
|
-
cursor: not-allowed;
|
15
|
-
}
|
16
|
-
.hooper-next {
|
17
|
-
right: 0;
|
18
|
-
}
|
19
|
-
.hooper-prev {
|
20
|
-
left: 0;
|
21
|
-
}
|
22
|
-
.hooper-navigation.is-vertical .hooper-next {
|
23
|
-
top: auto;
|
24
|
-
bottom: 0;
|
25
|
-
transform: initial;
|
26
|
-
}
|
27
|
-
.hooper-navigation.is-vertical .hooper-prev {
|
28
3
|
top: 0;
|
29
|
-
bottom: auto;
|
30
|
-
right: 0;
|
31
|
-
left: auto;
|
32
|
-
transform: initial;
|
33
|
-
}
|
34
|
-
.hooper-navigation.is-rtl .hooper-prev {
|
35
|
-
left: auto;
|
36
4
|
right: 0;
|
37
|
-
}
|
38
|
-
.hooper-navigation.is-rtl .hooper-next {
|
39
|
-
right: auto;
|
40
5
|
left: 0;
|
6
|
+
height: 4px;
|
7
|
+
background-color: #efefef;
|
41
8
|
}
|
42
|
-
.hooper-
|
43
|
-
flex-shrink: 0;
|
9
|
+
.hooper-progress-inner {
|
44
10
|
height: 100%;
|
45
|
-
|
46
|
-
|
47
|
-
list-style: none;
|
11
|
+
background-color: #4285f4;
|
12
|
+
transition: 300ms;
|
48
13
|
}
|
49
14
|
.hooper-pagination {
|
50
15
|
position: absolute;
|
@@ -86,18 +51,53 @@
|
|
86
51
|
.hooper-pagination.is-vertical .hooper-indicator {
|
87
52
|
width: 6px;
|
88
53
|
}
|
89
|
-
.hooper-
|
54
|
+
.hooper-next,
|
55
|
+
.hooper-prev {
|
56
|
+
background-color: transparent;
|
57
|
+
border: none;
|
58
|
+
padding: 1em;
|
90
59
|
position: absolute;
|
60
|
+
top: 50%;
|
61
|
+
transform: translateY(-50%);
|
62
|
+
cursor: pointer;
|
63
|
+
}
|
64
|
+
.hooper-next.is-disabled,
|
65
|
+
.hooper-prev.is-disabled {
|
66
|
+
opacity: 0.3;
|
67
|
+
cursor: not-allowed;
|
68
|
+
}
|
69
|
+
.hooper-next {
|
70
|
+
right: 0;
|
71
|
+
}
|
72
|
+
.hooper-prev {
|
73
|
+
left: 0;
|
74
|
+
}
|
75
|
+
.hooper-navigation.is-vertical .hooper-next {
|
76
|
+
top: auto;
|
77
|
+
bottom: 0;
|
78
|
+
transform: initial;
|
79
|
+
}
|
80
|
+
.hooper-navigation.is-vertical .hooper-prev {
|
91
81
|
top: 0;
|
82
|
+
bottom: auto;
|
83
|
+
right: 0;
|
84
|
+
left: auto;
|
85
|
+
transform: initial;
|
86
|
+
}
|
87
|
+
.hooper-navigation.is-rtl .hooper-prev {
|
88
|
+
left: auto;
|
92
89
|
right: 0;
|
90
|
+
}
|
91
|
+
.hooper-navigation.is-rtl .hooper-next {
|
92
|
+
right: auto;
|
93
93
|
left: 0;
|
94
|
-
height: 4px;
|
95
|
-
background-color: #efefef;
|
96
94
|
}
|
97
|
-
.hooper-
|
95
|
+
.hooper-slide {
|
96
|
+
flex-shrink: 0;
|
98
97
|
height: 100%;
|
99
|
-
|
100
|
-
|
98
|
+
margin: 0;
|
99
|
+
padding: 0;
|
100
|
+
list-style: none;
|
101
101
|
}
|
102
102
|
.hooper {
|
103
103
|
position: relative;
|
package/dist/hooper.esm.js
CHANGED
@@ -1,5 +1,5 @@
|
|
1
1
|
/**
|
2
|
-
* Hopper 0.3.
|
2
|
+
* Hopper 0.3.2
|
3
3
|
* (c) 2019
|
4
4
|
* @license MIT
|
5
5
|
*/
|
@@ -391,11 +391,11 @@ var Carousel = {
|
|
391
391
|
}
|
392
392
|
|
393
393
|
if (this.config.mouseDrag) {
|
394
|
-
this.$refs.
|
394
|
+
this.$refs.list.addEventListener('mousedown', this.onDragStart);
|
395
395
|
}
|
396
396
|
|
397
397
|
if (this.config.touchDrag) {
|
398
|
-
this.$refs.
|
398
|
+
this.$refs.list.addEventListener('touchstart', this.onDragStart, {
|
399
399
|
passive: true
|
400
400
|
});
|
401
401
|
}
|
@@ -815,7 +815,8 @@ function renderBody(h) {
|
|
815
815
|
}, "Item ".concat(this.currentSlide + 1, " of ").concat(this.slidesCount));
|
816
816
|
var children = [slides].concat(_toConsumableArray(addons), [a11y]);
|
817
817
|
return [h('div', {
|
818
|
-
class: 'hooper-list'
|
818
|
+
class: 'hooper-list',
|
819
|
+
ref: 'list'
|
819
820
|
}, children)];
|
820
821
|
}
|
821
822
|
|
@@ -1084,6 +1085,10 @@ var Navigation = {
|
|
1084
1085
|
return false;
|
1085
1086
|
}
|
1086
1087
|
|
1088
|
+
if (this.$hooper.config.trimWhiteSpace) {
|
1089
|
+
return this.$hooper.currentSlide === this.$hooper.slidesCount - Math.min(this.$hooper.config.itemsToShow, this.$hooper.slidesCount);
|
1090
|
+
}
|
1091
|
+
|
1087
1092
|
return this.$hooper.currentSlide === this.$hooper.slidesCount - 1;
|
1088
1093
|
}
|
1089
1094
|
},
|
package/dist/hooper.js
CHANGED
@@ -1,5 +1,5 @@
|
|
1
1
|
/**
|
2
|
-
* Hopper 0.3.
|
2
|
+
* Hopper 0.3.2
|
3
3
|
* (c) 2019
|
4
4
|
* @license MIT
|
5
5
|
*/
|
@@ -397,11 +397,11 @@
|
|
397
397
|
}
|
398
398
|
|
399
399
|
if (this.config.mouseDrag) {
|
400
|
-
this.$refs.
|
400
|
+
this.$refs.list.addEventListener('mousedown', this.onDragStart);
|
401
401
|
}
|
402
402
|
|
403
403
|
if (this.config.touchDrag) {
|
404
|
-
this.$refs.
|
404
|
+
this.$refs.list.addEventListener('touchstart', this.onDragStart, {
|
405
405
|
passive: true
|
406
406
|
});
|
407
407
|
}
|
@@ -821,7 +821,8 @@
|
|
821
821
|
}, "Item ".concat(this.currentSlide + 1, " of ").concat(this.slidesCount));
|
822
822
|
var children = [slides].concat(_toConsumableArray(addons), [a11y]);
|
823
823
|
return [h('div', {
|
824
|
-
class: 'hooper-list'
|
824
|
+
class: 'hooper-list',
|
825
|
+
ref: 'list'
|
825
826
|
}, children)];
|
826
827
|
}
|
827
828
|
|
@@ -1090,6 +1091,10 @@
|
|
1090
1091
|
return false;
|
1091
1092
|
}
|
1092
1093
|
|
1094
|
+
if (this.$hooper.config.trimWhiteSpace) {
|
1095
|
+
return this.$hooper.currentSlide === this.$hooper.slidesCount - Math.min(this.$hooper.config.itemsToShow, this.$hooper.slidesCount);
|
1096
|
+
}
|
1097
|
+
|
1093
1098
|
return this.$hooper.currentSlide === this.$hooper.slidesCount - 1;
|
1094
1099
|
}
|
1095
1100
|
},
|
package/dist/hooper.min.js
CHANGED
@@ -1 +1 @@
|
|
1
|
-
var t,i;t=this,i=function(t,i){"use strict";function l(t,i,e){return i in t?Object.defineProperty(t,i,{value:e,enumerable:!0,configurable:!0,writable:!0}):t[i]=e,t}function h(i){for(var t=1;t<arguments.length;t++){var e=null!=arguments[t]?arguments[t]:{},n=Object.keys(e);"function"==typeof Object.getOwnPropertySymbols&&(n=n.concat(Object.getOwnPropertySymbols(e).filter(function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.forEach(function(t){l(i,t,e[t])})}return i}function c(t){return function(t){if(Array.isArray(t)){for(var i=0,e=new Array(t.length);i<t.length;i++)e[i]=t[i];return e}}(t)||function(t){if(Symbol.iterator in Object(t)||"[object Arguments]"===Object.prototype.toString.call(t))return Array.from(t)}(t)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance")}()}function n(){return Date.now()}function e(t,i){this.create=function(){return window.setInterval(t,i)},this.stop=function(){this.timer&&(window.clearInterval(this.timer),this.timer=null)},this.start=function(){this.timer||(this.timer=this.create())},this.restart=function(t){i=t||i,this.stop(),this.start()},this.timer=this.create()}function u(t,i){var e;return(e=t<0?(t+i)%i:t%i)!=e?0:e}function d(t,i){var e=i.children||i.componentOptions.children||i.text;return t(i.componentOptions.Ctor,i.data,e)}i=i&&i.hasOwnProperty("default")?i.default:i;var r=Object.assign||function(t){if(null==t)throw new TypeError("Cannot convert first argument to object");for(var i=Object(t),e=1;e<arguments.length;e++){var n=arguments[e];if(null!=n){n=Object(n);for(var r=Object.keys(Object(n)),o=0,s=r.length;o<s;o++){var a=r[o],h=Object.getOwnPropertyDescriptor(n,a);void 0!==h&&h.enumerable&&(i[a]=n[a])}}}return i};var o=Math.sign||function(t){return t<0?-1:0<t?1:0};function f(t,i){var e=1<arguments.length&&void 0!==i?i:{};return t.$scopedSlots.default?t.$scopedSlots.default(e)||[]:t.$slots.default||[]}var p=new i,s={name:"Hooper",provide:function(){return{$hooper:this}},props:{itemsToShow:{default:1,type:Number},itemsToSlide:{default:1,type:Number},initialSlide:{default:0,type:Number},infiniteScroll:{default:!1,type:Boolean},centerMode:{default:!1,type:Boolean},vertical:{default:!1,type:Boolean},rtl:{default:null,type:Boolean},autoPlay:{default:!1,type:Boolean},playSpeed:{default:2e3,type:Number},mouseDrag:{default:!0,type:Boolean},touchDrag:{default:!0,type:Boolean},wheelControl:{default:!0,type:Boolean},keysControl:{default:!0,type:Boolean},shortDrag:{default:!0,type:Boolean},transition:{default:300,type:Number},hoverPause:{default:!0,type:Boolean},trimWhiteSpace:{default:!1,type:Boolean},settings:{default:function(){return{}},type:Object},group:{type:String,default:null}},data:function(){return{isDragging:!1,isSliding:!1,isTouch:!1,isHover:!1,isFocus:!1,slideWidth:0,slideHeight:0,slidesCount:0,trimStart:0,trimEnd:1,currentSlide:null,timer:null,defaults:{},breakpoints:{},delta:{x:0,y:0},config:{}}},computed:{trackTransform:function(){var t=this.config,i=t.infiniteScroll,e=t.vertical,n=t.rtl,r=t.centerMode,o=n?-1:1,s=e?this.slideHeight:this.slideWidth,a=e?this.containerHeight:this.containerWidth,h=(e?this.delta.y:this.delta.x)+o*((r?(a-s)/2:0)-(i?s*this.slidesCount:0)-this.currentSlide*s);return e?"transform: translate(0, ".concat(h,"px);"):"transform: translate(".concat(h,"px, 0);")},trackTransition:function(){return this.isSliding?"transition: ".concat(this.config.transition,"ms"):""}},watch:{group:function(t,i){t!==i&&(p.$off("slideGroup:".concat(i),this._groupSlideHandler),this.addGroupListeners())}},methods:{slideTo:function(t,i){var e=this,n=!(1<arguments.length&&void 0!==i)||i;if(!this.isSliding&&t!==this.currentSlide){this.$emit("beforeSlide",{currentSlide:this.currentSlide,slideTo:h});var r=this.config,o=r.infiniteScroll,s=r.transition,a=this.currentSlide,h=o?t:function(t,i,e){return Math.max(Math.min(t,e),i)}(t,this.trimStart,this.slidesCount-this.trimEnd);this.group&&n&&p.$emit("slideGroup:".concat(this.group),t),this.currentSlide=h,this.isSliding=!0,window.setTimeout(function(){e.isSliding=!1,e.currentSlide=u(h,e.slidesCount)},s),this.$emit("slide",{currentSlide:this.currentSlide,slideFrom:a})}},slideNext:function(){this.slideTo(this.currentSlide+this.config.itemsToSlide)},slidePrev:function(){this.slideTo(this.currentSlide-this.config.itemsToSlide)},initEvents:function(){null===this.defaults.rtl&&(this.defaults.rtl="rtl"===getComputedStyle(this.$el).direction),this.config.autoPlay&&this.initAutoPlay(),this.config.mouseDrag&&this.$refs.track.addEventListener("mousedown",this.onDragStart),this.config.touchDrag&&this.$refs.track.addEventListener("touchstart",this.onDragStart,{passive:!0}),this.config.keysControl&&this.$el.addEventListener("keydown",this.onKeypress),this.config.wheelControl&&(this.lastScrollTime=n(),this.$el.addEventListener("wheel",this.onWheel,{passive:!1})),window.addEventListener("resize",this.update)},initAutoPlay:function(){var t=this;this.timer=new e(function(){t.isSliding||t.isDragging||t.isHover&&t.config.hoverPause||t.isFocus||(t.currentSlide!==t.slidesCount-1||t.config.infiniteScroll?t.slideNext():t.slideTo(0))},this.config.playSpeed)},initDefaults:function(){this.breakpoints=this.settings.breakpoints,this.defaults=r({},this.$props,this.settings),this.config=r({},this.defaults)},update:function(){this.breakpoints&&this.updateConfig(),this.updateWidth(),this.updateTrim(),this.$emit("updated",{containerWidth:this.containerWidth,containerHeight:this.containerHeight,slideWidth:this.slideWidth,slideHeight:this.slideHeight,settings:this.config})},updateTrim:function(){var t=this.config,i=t.trimWhiteSpace,e=t.itemsToShow,n=t.centerMode,r=t.infiniteScroll;if(!i||r)return this.trimStart=0,void(this.trimEnd=1);this.trimStart=n?Math.floor((e-1)/2):0,this.trimEnd=n?Math.ceil(e/2):e},updateWidth:function(){var t=this.$el.getBoundingClientRect();this.containerWidth=t.width,this.containerHeight=t.height,this.config.vertical?this.slideHeight=this.containerHeight/this.config.itemsToShow:this.slideWidth=this.containerWidth/this.config.itemsToShow},updateConfig:function(){var i,e=this;Object.keys(this.breakpoints).sort(function(t,i){return i-t}).some(function(t){if(i=window.matchMedia("(min-width: ".concat(t,"px)")).matches)return e.config=r({},e.config,e.defaults,e.breakpoints[t]),!0}),i||(this.config=r(this.config,this.defaults))},restartTimer:function(){this.timer&&this.timer.restart()},restart:function(){var t=this;this.$nextTick(function(){t.update()})},onDragStart:function(t){this.isTouch="touchstart"===t.type,!this.isTouch&&0!==t.button||(this.startPosition={x:0,y:0},this.endPosition={x:0,y:0},this.isDragging=!0,this.startPosition.x=this.isTouch?t.touches[0].clientX:t.clientX,this.startPosition.y=this.isTouch?t.touches[0].clientY:t.clientY,document.addEventListener(this.isTouch?"touchmove":"mousemove",this.onDrag),document.addEventListener(this.isTouch?"touchend":"mouseup",this.onDragEnd),"touchstart"!==t.type&&t.preventDefault())},onDrag:function(t){this.isSliding||(this.endPosition.x=this.isTouch?t.touches[0].clientX:t.clientX,this.endPosition.y=this.isTouch?t.touches[0].clientY:t.clientY,this.delta.x=this.endPosition.x-this.startPosition.x,this.delta.y=this.endPosition.y-this.startPosition.y,this.isTouch||t.preventDefault())},onDragEnd:function(){var t=this.config.shortDrag?.5:.15;if(this.isDragging=!1,this.config.vertical){var i=Math.round(Math.abs(this.delta.y/this.slideHeight)+t);this.slideTo(this.currentSlide-o(this.delta.y)*i)}if(!this.config.vertical){var e=(this.config.rtl?-1:1)*o(this.delta.x),n=Math.round(Math.abs(this.delta.x/this.slideWidth)+t);this.slideTo(this.currentSlide-e*n)}this.delta.x=0,this.delta.y=0,document.removeEventListener(this.isTouch?"touchmove":"mousemove",this.onDrag),document.removeEventListener(this.isTouch?"touchend":"mouseup",this.onDragEnd),this.restartTimer()},onTransitionend:function(){this.isSliding=!1,this.$emit("afterSlide",{currentSlide:this.currentSlide})},onKeypress:function(t){var i=t.key;return i.startsWith("Arrow")&&t.preventDefault(),this.config.vertical?("ArrowUp"===i&&this.slidePrev(),void("ArrowDown"===i&&this.slideNext())):this.config.rtl?("ArrowRight"===i&&this.slidePrev(),void("ArrowLeft"===i&&this.slideNext())):("ArrowRight"===i&&this.slideNext(),void("ArrowLeft"===i&&this.slidePrev()))},onWheel:function(t){if(t.preventDefault(),!(n()-this.lastScrollTime<200)){this.lastScrollTime=n();var i=t.wheelDelta||-t.deltaY,e=o(i);-1===e&&this.slideNext(),1===e&&this.slidePrev()}},addGroupListeners:function(){var i=this;this.group&&(this._groupSlideHandler=function(t){i.slideTo(t,!1)},p.$on("slideGroup:".concat(this.group),this._groupSlideHandler))}},created:function(){this.initDefaults()},mounted:function(){var t=this;this.initEvents(),this.addGroupListeners(),this.$nextTick(function(){t.update(),t.slideTo(t.config.initialSlide||0),t.$emit("loaded")})},beforeDestroy:function(){window.removeEventListener("resize",this.update),this.group&&p.$off("slideGroup:".concat(this.group),this._groupSlideHandler),this.timer&&this.timer.stop()},render:function(t){var i=this,e=function(t){var i=function(t){for(var i=f(this),e=i.length,n=0,r=[],o=0;o<e;o++){var s=i[o],a=s.componentOptions&&s.componentOptions.Ctor;a&&"HooperSlide"===a.options.name&&(s.componentOptions.propsData.index=n,s.data.key=n,s.key=n,s.data.props=h({},s.data.props||{},{isClone:!1,index:n++}),r.push(s))}this.slidesCount=r.length,this.config.infiniteScroll&&(r=function(t,i){for(var e=[],n=[],r=i.length,o=0;o<r;o++){var s=i[o],a=d(t,s);a.data.key="index-".concat(o-r),a.key=a.data.key,a.data.props={index:o-r,isClone:!0},e.push(a);var h=d(t,s);h.data.key="index-".concat(o+r),h.key=h.data.key,h.data.props={index:o+r,isClone:!0},n.push(h)}return[].concat(e,c(i),n)}(t,r));return t("ul",{class:{"hooper-track":!0,"is-dragging":this.isDragging},style:this.trackTransform+this.trackTransition,ref:"track",on:{transitionend:this.onTransitionend}},r)}.call(this,t),e=this.$slots["hooper-addons"]||[],n=t("div",{class:"hooper-liveregion hooper-sr-only",attrs:{"aria-live":"polite","aria-atomic":"true"}},"Item ".concat(this.currentSlide+1," of ").concat(this.slidesCount)),r=[i].concat(c(e),[n]);return[t("div",{class:"hooper-list"},r)]}.call(this,t);return t("section",{class:{hooper:!0,"is-vertical":this.config.vertical,"is-rtl":this.config.rtl},attrs:{tabindex:"0"},on:{focusin:function(){return i.isFocus=!0},focusout:function(){return i.isFocus=!1},mouseover:function(){return i.isHover=!0},mouseleave:function(){return i.isHover=!1}}},e)}};var a={name:"HooperSlide",inject:["$hooper"],props:{isClone:{type:Boolean,default:!1},index:{type:Number,default:0,required:!0}},computed:{style:function(){var t=this.$hooper||{},i=t.config,e=t.slideHeight,n=t.slideWidth;return i.vertical?"height: ".concat(e,"px"):"width: ".concat(n,"px")},lower:function(){var t=this.$hooper||{},i=t.config,e=t.currentSlide,n=i.itemsToShow;return i.centerMode?Math.ceil(e-n/2):e},upper:function(){var t=this.$hooper||{},i=t.config,e=t.currentSlide,n=i.itemsToShow;return i.centerMode?Math.floor(e+n/2):Math.floor(e+n-1)},isActive:function(){return this.index>=this.lower&&this.index<=this.upper},isPrev:function(){return this.index<=this.lower-1},isNext:function(){return this.index>=this.upper+1},isCurrent:function(){return this.index===this.$hooper.currentSlide}},render:function(t){var i={"hooper-slide":!0,"is-clone":this.isClone,"is-active":this.isActive,"is-prev":this.isPrev,"is-next":this.isNext,"is-current":this.isCurrent},e=f(this);return t("li",{class:i,style:this.style,attrs:{"aria-hidden":!this.isActive}},e)}},g={arrowUp:"M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z",arrowDown:"M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z",arrowRight:"M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z",arrowLeft:"M15.41 16.59L10.83 12l4.58-4.59L14 6l-6 6 6 6 1.41-1.41z"},v={name:"HooperIcon",functional:!0,inheritAttrs:!0,props:{name:{type:String,required:!0,validator:function(t){return t in g}}},render:function(t,i){var e=i.props,n=g[e.name],r=[];return r.push(t("title",function(t){return(t=t.replace(/([A-Z]+)/g," $1")).charAt(0).toUpperCase()+t.slice(1)}(e.name))),r.push(t("path",{attrs:{d:"M0 0h24v24H0z",fill:"none"}})),r.push(t("path",{attrs:{d:n}})),t("svg",{attrs:{class:"icon icon-".concat(e.name),viewBox:"0 0 24 24",width:"24px",height:"24px"}},r)}},m={inject:["$hooper"],name:"HooperProgress",computed:{currentSlide:function(){return u(this.$hooper.currentSlide,this.$hooper.slidesCount)},progress:function(){var t=this.$hooper.slidesCount-this.$hooper.trimStart-this.$hooper.trimEnd;return 100*(this.currentSlide-this.$hooper.trimStart)/t}},render:function(t){return t("div",{class:"hooper-progress"},[t("div",{class:"hooper-progress-inner",style:"width: ".concat(this.progress,"%")})])}};var S={inject:["$hooper"],name:"HooperPagination",props:{mode:{default:"indicator",type:String}},computed:{currentSlide:function(){return u(this.$hooper.currentSlide,this.$hooper.slidesCount)},slides:function(){var t=this.$hooper.slides.map(function(t,i){return i});return t.slice(this.$hooper.trimStart,this.$hooper.slidesCount-this.$hooper.trimEnd+1)}},render:function(t){var i=this,e=this.$hooper.slidesCount,n="indicator"===this.mode?function(i,e,t,n){for(var r=[],o=function(t){r.push(function(t,i,e,n){return t("li",[t("button",{class:{"hooper-indicator":!0,"is-active":e},on:{click:n}},[t("span",{class:"hooper-sr-only"},"item ".concat(i))])])}(i,t,t===e,function(){return n(t)}))},s=0;s<t;s++)o(s);return[i("ol",{class:"hooper-indicators"},r)]}(t,this.currentSlide,e,function(t){return i.$hooper.slideTo(t)}):function(t,i,e){return[t("span",i+1),t("span","/"),t("span",e)]}(t,this.currentSlide,e);return t("div",{class:{"hooper-pagination":!0,"is-vertical":this.$hooper.config.vertical}},n)}};function y(t,i,e,n,r,o){var s,a=r.isVertical,h=r.isRTL,c=e&&e.length?e:[t(v,{props:{name:function(t,i,e){return e?t?"arrowUp":i?"arrowRight":"arrowLeft":t?"arrowDown":i?"arrowLeft":"arrowRight"}(a,h,n)}})];return t("button",{class:(s={},l(s,"hooper-".concat(n?"prev":"next"),!0),l(s,"is-disabled",i),s),attrs:{type:"button"},on:{click:o}},c)}var w={inject:["$hooper"],name:"HooperNavigation",computed:{isPrevDisabled:function(){return!this.$hooper.config.infiniteScroll&&0===this.$hooper.currentSlide},isNextDisabled:function(){return!this.$hooper.config.infiniteScroll&&this.$hooper.currentSlide===this.$hooper.slidesCount-1}},methods:{slideNext:function(){this.$hooper.slideNext(),this.$hooper.restartTimer()},slidePrev:function(){this.$hooper.slidePrev(),this.$hooper.restartTimer()}},render:function(t){var i=this,e={isRTL:this.$hooper.config.rtl,isVertical:this.$hooper.config.vertical},n=[y(t,this.isPrevDisabled,this.$slots["hooper-prev"],!0,e,function(){return i.slidePrev()}),y(t,this.isNextDisabled,this.$slots["hooper-next"],!1,e,function(){return i.slideNext()})];return t("div",{class:{"hooper-navigation":!0,"is-vertical":this.$hooper.config.vertical,"is-rtl":this.$hooper.config.rtl}},n)}};t.Hooper=s,t.Icon=v,t.Navigation=w,t.Pagination=S,t.Progress=m,t.Slide=a,t.addonMixin={inject:["$hooper"]},t.default=s,Object.defineProperty(t,"__esModule",{value:!0})},"object"==typeof exports&&"undefined"!=typeof module?i(exports,require("vue")):"function"==typeof define&&define.amd?define(["exports","vue"],i):i((t=t||self).Hooper={},t.Vue);
|
1
|
+
var t,i;t=this,i=function(t,i){"use strict";function l(t,i,e){return i in t?Object.defineProperty(t,i,{value:e,enumerable:!0,configurable:!0,writable:!0}):t[i]=e,t}function a(i){for(var t=1;t<arguments.length;t++){var e=null!=arguments[t]?arguments[t]:{},n=Object.keys(e);"function"==typeof Object.getOwnPropertySymbols&&(n=n.concat(Object.getOwnPropertySymbols(e).filter(function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.forEach(function(t){l(i,t,e[t])})}return i}function c(t){return function(t){if(Array.isArray(t)){for(var i=0,e=new Array(t.length);i<t.length;i++)e[i]=t[i];return e}}(t)||function(t){if(Symbol.iterator in Object(t)||"[object Arguments]"===Object.prototype.toString.call(t))return Array.from(t)}(t)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance")}()}function n(){return Date.now()}function e(t,i){this.create=function(){return window.setInterval(t,i)},this.stop=function(){this.timer&&(window.clearInterval(this.timer),this.timer=null)},this.start=function(){this.timer||(this.timer=this.create())},this.restart=function(t){i=t||i,this.stop(),this.start()},this.timer=this.create()}function u(t,i){var e;return(e=t<0?(t+i)%i:t%i)!=e?0:e}function d(t,i){var e=i.children||i.componentOptions.children||i.text;return t(i.componentOptions.Ctor,i.data,e)}i=i&&i.hasOwnProperty("default")?i.default:i;var r=Object.assign||function(t){if(null==t)throw new TypeError("Cannot convert first argument to object");for(var i=Object(t),e=1;e<arguments.length;e++){var n=arguments[e];if(null!=n){n=Object(n);for(var r=Object.keys(Object(n)),o=0,s=r.length;o<s;o++){var h=r[o],a=Object.getOwnPropertyDescriptor(n,h);void 0!==a&&a.enumerable&&(i[h]=n[h])}}}return i};var o=Math.sign||function(t){return t<0?-1:0<t?1:0};function p(t,i){var e=1<arguments.length&&void 0!==i?i:{};return t.$scopedSlots.default?t.$scopedSlots.default(e)||[]:t.$slots.default||[]}var f=new i,s={name:"Hooper",provide:function(){return{$hooper:this}},props:{itemsToShow:{default:1,type:Number},itemsToSlide:{default:1,type:Number},initialSlide:{default:0,type:Number},infiniteScroll:{default:!1,type:Boolean},centerMode:{default:!1,type:Boolean},vertical:{default:!1,type:Boolean},rtl:{default:null,type:Boolean},autoPlay:{default:!1,type:Boolean},playSpeed:{default:2e3,type:Number},mouseDrag:{default:!0,type:Boolean},touchDrag:{default:!0,type:Boolean},wheelControl:{default:!0,type:Boolean},keysControl:{default:!0,type:Boolean},shortDrag:{default:!0,type:Boolean},transition:{default:300,type:Number},hoverPause:{default:!0,type:Boolean},trimWhiteSpace:{default:!1,type:Boolean},settings:{default:function(){return{}},type:Object},group:{type:String,default:null}},data:function(){return{isDragging:!1,isSliding:!1,isTouch:!1,isHover:!1,isFocus:!1,slideWidth:0,slideHeight:0,slidesCount:0,trimStart:0,trimEnd:1,currentSlide:null,timer:null,defaults:{},breakpoints:{},delta:{x:0,y:0},config:{}}},computed:{trackTransform:function(){var t=this.config,i=t.infiniteScroll,e=t.vertical,n=t.rtl,r=t.centerMode,o=n?-1:1,s=e?this.slideHeight:this.slideWidth,h=e?this.containerHeight:this.containerWidth,a=(e?this.delta.y:this.delta.x)+o*((r?(h-s)/2:0)-(i?s*this.slidesCount:0)-this.currentSlide*s);return e?"transform: translate(0, ".concat(a,"px);"):"transform: translate(".concat(a,"px, 0);")},trackTransition:function(){return this.isSliding?"transition: ".concat(this.config.transition,"ms"):""}},watch:{group:function(t,i){t!==i&&(f.$off("slideGroup:".concat(i),this._groupSlideHandler),this.addGroupListeners())}},methods:{slideTo:function(t,i){var e=this,n=!(1<arguments.length&&void 0!==i)||i;if(!this.isSliding&&t!==this.currentSlide){this.$emit("beforeSlide",{currentSlide:this.currentSlide,slideTo:a});var r=this.config,o=r.infiniteScroll,s=r.transition,h=this.currentSlide,a=o?t:function(t,i,e){return Math.max(Math.min(t,e),i)}(t,this.trimStart,this.slidesCount-this.trimEnd);this.group&&n&&f.$emit("slideGroup:".concat(this.group),t),this.currentSlide=a,this.isSliding=!0,window.setTimeout(function(){e.isSliding=!1,e.currentSlide=u(a,e.slidesCount)},s),this.$emit("slide",{currentSlide:this.currentSlide,slideFrom:h})}},slideNext:function(){this.slideTo(this.currentSlide+this.config.itemsToSlide)},slidePrev:function(){this.slideTo(this.currentSlide-this.config.itemsToSlide)},initEvents:function(){null===this.defaults.rtl&&(this.defaults.rtl="rtl"===getComputedStyle(this.$el).direction),this.config.autoPlay&&this.initAutoPlay(),this.config.mouseDrag&&this.$refs.list.addEventListener("mousedown",this.onDragStart),this.config.touchDrag&&this.$refs.list.addEventListener("touchstart",this.onDragStart,{passive:!0}),this.config.keysControl&&this.$el.addEventListener("keydown",this.onKeypress),this.config.wheelControl&&(this.lastScrollTime=n(),this.$el.addEventListener("wheel",this.onWheel,{passive:!1})),window.addEventListener("resize",this.update)},initAutoPlay:function(){var t=this;this.timer=new e(function(){t.isSliding||t.isDragging||t.isHover&&t.config.hoverPause||t.isFocus||(t.currentSlide!==t.slidesCount-1||t.config.infiniteScroll?t.slideNext():t.slideTo(0))},this.config.playSpeed)},initDefaults:function(){this.breakpoints=this.settings.breakpoints,this.defaults=r({},this.$props,this.settings),this.config=r({},this.defaults)},update:function(){this.breakpoints&&this.updateConfig(),this.updateWidth(),this.updateTrim(),this.$emit("updated",{containerWidth:this.containerWidth,containerHeight:this.containerHeight,slideWidth:this.slideWidth,slideHeight:this.slideHeight,settings:this.config})},updateTrim:function(){var t=this.config,i=t.trimWhiteSpace,e=t.itemsToShow,n=t.centerMode,r=t.infiniteScroll;if(!i||r)return this.trimStart=0,void(this.trimEnd=1);this.trimStart=n?Math.floor((e-1)/2):0,this.trimEnd=n?Math.ceil(e/2):e},updateWidth:function(){var t=this.$el.getBoundingClientRect();this.containerWidth=t.width,this.containerHeight=t.height,this.config.vertical?this.slideHeight=this.containerHeight/this.config.itemsToShow:this.slideWidth=this.containerWidth/this.config.itemsToShow},updateConfig:function(){var i,e=this;Object.keys(this.breakpoints).sort(function(t,i){return i-t}).some(function(t){if(i=window.matchMedia("(min-width: ".concat(t,"px)")).matches)return e.config=r({},e.config,e.defaults,e.breakpoints[t]),!0}),i||(this.config=r(this.config,this.defaults))},restartTimer:function(){this.timer&&this.timer.restart()},restart:function(){var t=this;this.$nextTick(function(){t.update()})},onDragStart:function(t){this.isTouch="touchstart"===t.type,!this.isTouch&&0!==t.button||(this.startPosition={x:0,y:0},this.endPosition={x:0,y:0},this.isDragging=!0,this.startPosition.x=this.isTouch?t.touches[0].clientX:t.clientX,this.startPosition.y=this.isTouch?t.touches[0].clientY:t.clientY,document.addEventListener(this.isTouch?"touchmove":"mousemove",this.onDrag),document.addEventListener(this.isTouch?"touchend":"mouseup",this.onDragEnd),"touchstart"!==t.type&&t.preventDefault())},onDrag:function(t){this.isSliding||(this.endPosition.x=this.isTouch?t.touches[0].clientX:t.clientX,this.endPosition.y=this.isTouch?t.touches[0].clientY:t.clientY,this.delta.x=this.endPosition.x-this.startPosition.x,this.delta.y=this.endPosition.y-this.startPosition.y,this.isTouch||t.preventDefault())},onDragEnd:function(){var t=this.config.shortDrag?.5:.15;if(this.isDragging=!1,this.config.vertical){var i=Math.round(Math.abs(this.delta.y/this.slideHeight)+t);this.slideTo(this.currentSlide-o(this.delta.y)*i)}if(!this.config.vertical){var e=(this.config.rtl?-1:1)*o(this.delta.x),n=Math.round(Math.abs(this.delta.x/this.slideWidth)+t);this.slideTo(this.currentSlide-e*n)}this.delta.x=0,this.delta.y=0,document.removeEventListener(this.isTouch?"touchmove":"mousemove",this.onDrag),document.removeEventListener(this.isTouch?"touchend":"mouseup",this.onDragEnd),this.restartTimer()},onTransitionend:function(){this.isSliding=!1,this.$emit("afterSlide",{currentSlide:this.currentSlide})},onKeypress:function(t){var i=t.key;return i.startsWith("Arrow")&&t.preventDefault(),this.config.vertical?("ArrowUp"===i&&this.slidePrev(),void("ArrowDown"===i&&this.slideNext())):this.config.rtl?("ArrowRight"===i&&this.slidePrev(),void("ArrowLeft"===i&&this.slideNext())):("ArrowRight"===i&&this.slideNext(),void("ArrowLeft"===i&&this.slidePrev()))},onWheel:function(t){if(t.preventDefault(),!(n()-this.lastScrollTime<200)){this.lastScrollTime=n();var i=t.wheelDelta||-t.deltaY,e=o(i);-1===e&&this.slideNext(),1===e&&this.slidePrev()}},addGroupListeners:function(){var i=this;this.group&&(this._groupSlideHandler=function(t){i.slideTo(t,!1)},f.$on("slideGroup:".concat(this.group),this._groupSlideHandler))}},created:function(){this.initDefaults()},mounted:function(){var t=this;this.initEvents(),this.addGroupListeners(),this.$nextTick(function(){t.update(),t.slideTo(t.config.initialSlide||0),t.$emit("loaded")})},beforeDestroy:function(){window.removeEventListener("resize",this.update),this.group&&f.$off("slideGroup:".concat(this.group),this._groupSlideHandler),this.timer&&this.timer.stop()},render:function(t){var i=this,e=function(t){var i=function(t){for(var i=p(this),e=i.length,n=0,r=[],o=0;o<e;o++){var s=i[o],h=s.componentOptions&&s.componentOptions.Ctor;h&&"HooperSlide"===h.options.name&&(s.componentOptions.propsData.index=n,s.data.key=n,s.key=n,s.data.props=a({},s.data.props||{},{isClone:!1,index:n++}),r.push(s))}this.slidesCount=r.length,this.config.infiniteScroll&&(r=function(t,i){for(var e=[],n=[],r=i.length,o=0;o<r;o++){var s=i[o],h=d(t,s);h.data.key="index-".concat(o-r),h.key=h.data.key,h.data.props={index:o-r,isClone:!0},e.push(h);var a=d(t,s);a.data.key="index-".concat(o+r),a.key=a.data.key,a.data.props={index:o+r,isClone:!0},n.push(a)}return[].concat(e,c(i),n)}(t,r));return t("ul",{class:{"hooper-track":!0,"is-dragging":this.isDragging},style:this.trackTransform+this.trackTransition,ref:"track",on:{transitionend:this.onTransitionend}},r)}.call(this,t),e=this.$slots["hooper-addons"]||[],n=t("div",{class:"hooper-liveregion hooper-sr-only",attrs:{"aria-live":"polite","aria-atomic":"true"}},"Item ".concat(this.currentSlide+1," of ").concat(this.slidesCount)),r=[i].concat(c(e),[n]);return[t("div",{class:"hooper-list",ref:"list"},r)]}.call(this,t);return t("section",{class:{hooper:!0,"is-vertical":this.config.vertical,"is-rtl":this.config.rtl},attrs:{tabindex:"0"},on:{focusin:function(){return i.isFocus=!0},focusout:function(){return i.isFocus=!1},mouseover:function(){return i.isHover=!0},mouseleave:function(){return i.isHover=!1}}},e)}};var h={name:"HooperSlide",inject:["$hooper"],props:{isClone:{type:Boolean,default:!1},index:{type:Number,default:0,required:!0}},computed:{style:function(){var t=this.$hooper||{},i=t.config,e=t.slideHeight,n=t.slideWidth;return i.vertical?"height: ".concat(e,"px"):"width: ".concat(n,"px")},lower:function(){var t=this.$hooper||{},i=t.config,e=t.currentSlide,n=i.itemsToShow;return i.centerMode?Math.ceil(e-n/2):e},upper:function(){var t=this.$hooper||{},i=t.config,e=t.currentSlide,n=i.itemsToShow;return i.centerMode?Math.floor(e+n/2):Math.floor(e+n-1)},isActive:function(){return this.index>=this.lower&&this.index<=this.upper},isPrev:function(){return this.index<=this.lower-1},isNext:function(){return this.index>=this.upper+1},isCurrent:function(){return this.index===this.$hooper.currentSlide}},render:function(t){var i={"hooper-slide":!0,"is-clone":this.isClone,"is-active":this.isActive,"is-prev":this.isPrev,"is-next":this.isNext,"is-current":this.isCurrent},e=p(this);return t("li",{class:i,style:this.style,attrs:{"aria-hidden":!this.isActive}},e)}},g={arrowUp:"M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z",arrowDown:"M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z",arrowRight:"M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z",arrowLeft:"M15.41 16.59L10.83 12l4.58-4.59L14 6l-6 6 6 6 1.41-1.41z"},v={name:"HooperIcon",functional:!0,inheritAttrs:!0,props:{name:{type:String,required:!0,validator:function(t){return t in g}}},render:function(t,i){var e=i.props,n=g[e.name],r=[];return r.push(t("title",function(t){return(t=t.replace(/([A-Z]+)/g," $1")).charAt(0).toUpperCase()+t.slice(1)}(e.name))),r.push(t("path",{attrs:{d:"M0 0h24v24H0z",fill:"none"}})),r.push(t("path",{attrs:{d:n}})),t("svg",{attrs:{class:"icon icon-".concat(e.name),viewBox:"0 0 24 24",width:"24px",height:"24px"}},r)}},m={inject:["$hooper"],name:"HooperProgress",computed:{currentSlide:function(){return u(this.$hooper.currentSlide,this.$hooper.slidesCount)},progress:function(){var t=this.$hooper.slidesCount-this.$hooper.trimStart-this.$hooper.trimEnd;return 100*(this.currentSlide-this.$hooper.trimStart)/t}},render:function(t){return t("div",{class:"hooper-progress"},[t("div",{class:"hooper-progress-inner",style:"width: ".concat(this.progress,"%")})])}};var S={inject:["$hooper"],name:"HooperPagination",props:{mode:{default:"indicator",type:String}},computed:{currentSlide:function(){return u(this.$hooper.currentSlide,this.$hooper.slidesCount)},slides:function(){var t=this.$hooper.slides.map(function(t,i){return i});return t.slice(this.$hooper.trimStart,this.$hooper.slidesCount-this.$hooper.trimEnd+1)}},render:function(t){var i=this,e=this.$hooper.slidesCount,n="indicator"===this.mode?function(i,e,t,n){for(var r=[],o=function(t){r.push(function(t,i,e,n){return t("li",[t("button",{class:{"hooper-indicator":!0,"is-active":e},on:{click:n}},[t("span",{class:"hooper-sr-only"},"item ".concat(i))])])}(i,t,t===e,function(){return n(t)}))},s=0;s<t;s++)o(s);return[i("ol",{class:"hooper-indicators"},r)]}(t,this.currentSlide,e,function(t){return i.$hooper.slideTo(t)}):function(t,i,e){return[t("span",i+1),t("span","/"),t("span",e)]}(t,this.currentSlide,e);return t("div",{class:{"hooper-pagination":!0,"is-vertical":this.$hooper.config.vertical}},n)}};function y(t,i,e,n,r,o){var s,h=r.isVertical,a=r.isRTL,c=e&&e.length?e:[t(v,{props:{name:function(t,i,e){return e?t?"arrowUp":i?"arrowRight":"arrowLeft":t?"arrowDown":i?"arrowLeft":"arrowRight"}(h,a,n)}})];return t("button",{class:(s={},l(s,"hooper-".concat(n?"prev":"next"),!0),l(s,"is-disabled",i),s),attrs:{type:"button"},on:{click:o}},c)}var w={inject:["$hooper"],name:"HooperNavigation",computed:{isPrevDisabled:function(){return!this.$hooper.config.infiniteScroll&&0===this.$hooper.currentSlide},isNextDisabled:function(){return!this.$hooper.config.infiniteScroll&&(this.$hooper.config.trimWhiteSpace?this.$hooper.currentSlide===this.$hooper.slidesCount-Math.min(this.$hooper.config.itemsToShow,this.$hooper.slidesCount):this.$hooper.currentSlide===this.$hooper.slidesCount-1)}},methods:{slideNext:function(){this.$hooper.slideNext(),this.$hooper.restartTimer()},slidePrev:function(){this.$hooper.slidePrev(),this.$hooper.restartTimer()}},render:function(t){var i=this,e={isRTL:this.$hooper.config.rtl,isVertical:this.$hooper.config.vertical},n=[y(t,this.isPrevDisabled,this.$slots["hooper-prev"],!0,e,function(){return i.slidePrev()}),y(t,this.isNextDisabled,this.$slots["hooper-next"],!1,e,function(){return i.slideNext()})];return t("div",{class:{"hooper-navigation":!0,"is-vertical":this.$hooper.config.vertical,"is-rtl":this.$hooper.config.rtl}},n)}};t.Hooper=s,t.Icon=v,t.Navigation=w,t.Pagination=S,t.Progress=m,t.Slide=h,t.addonMixin={inject:["$hooper"]},t.default=s,Object.defineProperty(t,"__esModule",{value:!0})},"object"==typeof exports&&"undefined"!=typeof module?i(exports,require("vue")):"function"==typeof define&&define.amd?define(["exports","vue"],i):i((t=t||self).Hooper={},t.Vue);
|
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "hooper",
|
3
|
-
"version": "0.3.
|
3
|
+
"version": "0.3.2",
|
4
4
|
"description": "A customizable accessible carousel slider optimized for Vue",
|
5
5
|
"module": "dist/hooper.esm.js",
|
6
6
|
"unpkg": "dist/hooper.js",
|
@@ -17,8 +17,8 @@
|
|
17
17
|
"test": "jest --config jest.config.json"
|
18
18
|
},
|
19
19
|
"devDependencies": {
|
20
|
-
"@babel/core": "^7.4
|
21
|
-
"@commitlint/cli": "^8.
|
20
|
+
"@babel/core": "^7.5.4",
|
21
|
+
"@commitlint/cli": "^8.1.0",
|
22
22
|
"@vue/test-utils": "^1.0.0-beta.29",
|
23
23
|
"babel-core": "^7.0.0-bridge.0",
|
24
24
|
"babel-eslint": "^10.0.2",
|
@@ -34,12 +34,12 @@
|
|
34
34
|
"html-webpack-plugin": "^3.2.0",
|
35
35
|
"husky": "^3.0.0",
|
36
36
|
"jest": "24.8.0",
|
37
|
-
"lint-staged": "^9.0
|
37
|
+
"lint-staged": "^9.2.0",
|
38
38
|
"mkdirp": "^0.5.1",
|
39
39
|
"prettier": "^1.18.2",
|
40
40
|
"pretty-quick": "^1.11.1",
|
41
41
|
"progress-bar-webpack-plugin": "^1.12.1",
|
42
|
-
"rollup": "^1.
|
42
|
+
"rollup": "^1.17.0",
|
43
43
|
"rollup-plugin-babel": "^4.3.3",
|
44
44
|
"rollup-plugin-commonjs": "^10.0.1",
|
45
45
|
"rollup-plugin-css-only": "^1.0.0",
|
@@ -52,8 +52,6 @@
|
|
52
52
|
"vue-server-renderer": "^2.6.10",
|
53
53
|
"vue-template-compiler": "^2.6.10",
|
54
54
|
"vuepress": "^1.0.2",
|
55
|
-
"webpack": "^4.35.2",
|
56
|
-
"webpack-cli": "^3.3.5",
|
57
55
|
"webpack-dev-server": "^3.7.2"
|
58
56
|
},
|
59
57
|
"license": "MIT",
|
package/dist/index.html
DELETED
@@ -1,47 +0,0 @@
|
|
1
|
-
<!DOCTYPE html>
|
2
|
-
<html lang="en">
|
3
|
-
<head>
|
4
|
-
<meta charset="UTF-8" />
|
5
|
-
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
6
|
-
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
|
7
|
-
<title>Document</title>
|
8
|
-
<link rel="stylesheet" href="./hooper.css" />
|
9
|
-
</head>
|
10
|
-
<body>
|
11
|
-
<div id="app">
|
12
|
-
<hooper :items-to-show="3" :infinite-scroll="true">
|
13
|
-
<slide v-for="(slide, indx) in slides" :key="indx">
|
14
|
-
<div class="hooper-item">{{ slide }}</div>
|
15
|
-
</slide>
|
16
|
-
</hooper>
|
17
|
-
<button @click="increase">increase</button>
|
18
|
-
</div>
|
19
|
-
|
20
|
-
<script src="https://unpkg.com/vue@2.6.10/dist/vue.js"></script>
|
21
|
-
<script src="./hooper.js"></script>
|
22
|
-
<script>
|
23
|
-
new Vue({
|
24
|
-
el: '#app',
|
25
|
-
components: {
|
26
|
-
Hooper: Hooper.Hooper,
|
27
|
-
Slide: Hooper.Slide
|
28
|
-
},
|
29
|
-
data() {
|
30
|
-
return {
|
31
|
-
slides: []
|
32
|
-
};
|
33
|
-
},
|
34
|
-
methods: {
|
35
|
-
increase() {
|
36
|
-
this.slides.push(this.slides.length + 1);
|
37
|
-
}
|
38
|
-
},
|
39
|
-
mounted() {
|
40
|
-
setTimeout(() => {
|
41
|
-
this.slides = [1, 2, 3, 4, 5];
|
42
|
-
}, 500);
|
43
|
-
}
|
44
|
-
});
|
45
|
-
</script>
|
46
|
-
</body>
|
47
|
-
</html>
|