vue-carousel.min.js 11 KB

12
  1. /*! vue-carousel v2.0.0 | (c) 2018-present Chen Fengyuan | MIT */
  2. !function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e(require("vue")):"function"==typeof define&&define.amd?define(["vue"],e):(t="undefined"!=typeof globalThis?globalThis:t||self).VueCarousel=e(t.Vue)}(this,(function(t){"use strict";const e="undefined"!=typeof window&&void 0!==window.document,o=!(!e||!window.document.documentElement)&&"ontouchstart"in window.document.documentElement,i=!!e&&"PointerEvent"in window,r=o?"ontouchstart":"onmousedown",s=i?"onpointerdown":r,a=i?"onpointermove":o?"ontouchmove":"onmousemove",n=i?"onpointerup":o?"ontouchend":"onmouseup",l=i?"onpointerenter":"onmouseenter",u=i?"onpointerleave":"onmouseleave";var c=t.defineComponent({name:"VueCarousel",props:{autoplay:{type:Boolean,default:!0},controls:{type:[Boolean,String],default:"hover"},data:{type:Array,default:void 0},direction:{type:String,default:"left"},duration:{type:Number,default:600},indicators:{type:[Boolean,String],default:!0},indicatorTrigger:{type:String,default:"click"},indicatorType:{type:String,default:"line"},interval:{type:Number,default:5e3},pauseOnEnter:{type:Boolean,default:!0},slideOnSwipe:{type:Boolean,default:!0},tag:{type:String,default:"div"}},emits:["slide","slid"],data:()=>({endX:0,endY:0,index:0,list:[],onVisibilityChange:()=>{},playing:!1,sliding:!1,startX:0,startY:0,timeout:0}),watch:{data(){this.init()}},created(){this.init()},mounted(){document.addEventListener("visibilitychange",this.onVisibilityChange=()=>{this.playing&&("visible"===document.visibilityState?this.cycle():this.pause())}),this.autoplay&&this.play()},beforeUnmount(){document.removeEventListener("visibilitychange",this.onVisibilityChange)},methods:{init(){const{data:t}=this,e=[];if(t&&t.length>0){const o=t.length-1;this.index>o&&(this.index=o),t.forEach(((t,o)=>{const i=o===this.index,r={...t&&void 0!==t.content?t:{content:t},active:i,bottom:!1,left:!1,raw:t,right:!1,sliding:i,toBottom:!1,toLeft:!1,toRight:!1,toTop:!1,top:!1};e.push(r)}))}this.list=e},play(){this.playing||(this.playing=!0,this.cycle())},cycle(){this.playing&&(this.pause(),this.timeout=window.setTimeout((()=>{this.next((()=>{this.cycle()}))}),this.interval))},pause(){window.clearTimeout(this.timeout),this.timeout=0},stop(){this.playing&&(this.pause(),this.playing=!1)},prev(t){this.slideTo(this.index-1,t)},next(t){this.slideTo(this.index+1,t)},slide(e,o=!1,i=(()=>{})){if(document.hidden||this.sliding)return void i();const{list:r}=this,s=r.length-1;if(e>s?e=0:e<0&&(e=s),e===this.index)return void i();this.sliding=!0,this.$emit("slide",e,this.index);const a=r[this.index],n=r[e];switch(this.direction){case"up":n.bottom=!o,n.top=o;break;case"right":n.left=!o,n.right=o;break;case"down":n.top=!o,n.bottom=o;break;default:n.right=!o,n.left=o}t.nextTick((()=>{switch(this.$el.offsetWidth,this.direction){case"up":a.toTop=!o,a.toBottom=o,n.toTop=!o,n.toBottom=o;break;case"right":a.toRight=!o,a.toLeft=o,n.toRight=!o,n.toLeft=o;break;case"down":a.toBottom=!o,a.toTop=o,n.toBottom=!o,n.toTop=o;break;default:a.toLeft=!o,a.toRight=o,n.toLeft=!o,n.toRight=o}a.sliding=!1,n.sliding=!0,setTimeout((()=>{a.active=!1,a.top=!1,a.right=!1,a.bottom=!1,a.left=!1,a.toTop=!1,a.toRight=!1,a.toBottom=!1,a.toLeft=!1,n.active=!0,n.top=!1,n.right=!1,n.bottom=!1,n.left=!1,n.toTop=!1,n.toRight=!1,n.toBottom=!1,n.toLeft=!1,this.$emit("slid",e,this.index),this.index=e,this.sliding=!1,i()}),this.duration)}))},slideTo(t,e){t!==this.index&&this.slide(t,t<this.index,e)},slideStart(t){const e=t.touches?t.touches[0]:null;this.playing&&this.pauseOnEnter&&this.stop(),this.startX=e?e.pageX:t.pageX,this.startY=e?e.pageY:t.pageY},slideMove(t){const e=t.touches?t.touches[0]:null;t.preventDefault(),this.endX=e?e.pageX:t.pageX,this.endY=e?e.pageY:t.pageY},slideEnd(){const t=this.endX-this.startX,e=this.endY-this.startY;if(this.endX=this.startX,this.endY=this.startY,0===t&&0===e)return;const o=this.$el.offsetWidth/5,i=this.$el.offsetHeight/5,r=e<-i,s=t>o,a=e>i,n=t<-o,l=()=>{!this.playing&&this.pauseOnEnter&&this.play()};let u=!1,c=!1;switch(this.direction){case"up":u=a,c=r;break;case"right":u=n,c=s;break;case"down":u=r,c=a;break;default:u=s,c=n}u?this.prev(l):c?this.next(l):l()}},render(){return t.h(this.tag,{class:{"vue-carousel":!0,[`vue-carousel--${this.direction}`]:this.direction,"vue-carousel--slidable":this.slideOnSwipe,"vue-carousel--controls":"hover"===this.controls,"vue-carousel--indicators":"hover"===this.indicators},...this.pauseOnEnter?{[l]:this.pause,[u]:this.cycle}:{},...this.slideOnSwipe?{[s]:this.slideStart,[a]:this.slideMove,[n]:this.slideEnd}:{}},0===this.list.length?[]:[t.h("ul",{class:"vue-carousel__list"},this.list.map(((e,o)=>{return t.h("li",{"data-index":o,class:{"vue-carousel__item":!0,"vue-carousel__item--active":e.active,"vue-carousel__item--top":e.top,"vue-carousel__item--right":e.right,"vue-carousel__item--bottom":e.bottom,"vue-carousel__item--left":e.left,"vue-carousel__item--to-top":e.toTop,"vue-carousel__item--to-right":e.toRight,"vue-carousel__item--to-bottom":e.toBottom,"vue-carousel__item--to-left":e.toLeft},style:{"transition-duration":this.duration/1e3+"s"}},[t.h((i=e.content,"object"==typeof i&&null!==i||"function"==typeof i?i:{template:String(i)}))]);var i}))),this.indicators?t.h("ol",{class:{"vue-carousel__indicators":!0,[`vue-carousel__indicators--${this.indicatorType}`]:this.indicatorType}},this.list.map(((e,s)=>t.h("li",{"data-slide-to":s,class:{"vue-carousel__indicator":!0,"vue-carousel__indicator--active":e.sliding},...(()=>{const t={},e=()=>{this.slideTo(s)};return"hover"===this.indicatorTrigger?(t[l]=e,o&&!i&&(t[r]=e)):t.onclick=e,t})()})))):"",this.controls?t.h("button",{type:"button","data-slide":"prev",class:"vue-carousel__control vue-carousel__control--prev",onclick:()=>{["right","down"].indexOf(this.direction)>-1?this.next():this.prev()}}):"",this.controls?t.h("button",{type:"button","data-slide":"next",class:"vue-carousel__control vue-carousel__control--next",onclick:()=>{["right","down"].indexOf(this.direction)>-1?this.prev():this.next()}}):""])}});return function(t,e){void 0===e&&(e={});var o=e.insertAt;if(t&&"undefined"!=typeof document){var i=document.head||document.getElementsByTagName("head")[0],r=document.createElement("style");r.type="text/css","top"===o&&i.firstChild?i.insertBefore(r,i.firstChild):i.appendChild(r),r.styleSheet?r.styleSheet.cssText=t:r.appendChild(document.createTextNode(t))}}('.vue-carousel{position:relative;user-select:none}.vue-carousel--slidable{touch-action:none}.vue-carousel--down>.vue-carousel__indicators,.vue-carousel--up>.vue-carousel__indicators{bottom:auto;flex-direction:column;left:auto;right:0;top:50%;transform:translateY(-50%)}.vue-carousel--down>.vue-carousel__indicators>.vue-carousel__indicator:before,.vue-carousel--up>.vue-carousel__indicators>.vue-carousel__indicator:before{height:100%;width:.125rem}.vue-carousel--down>.vue-carousel__indicators--disc>.vue-carousel__indicator,.vue-carousel--up>.vue-carousel__indicators--disc>.vue-carousel__indicator{height:.75rem;width:1.5rem}.vue-carousel--down>.vue-carousel__indicators--disc>.vue-carousel__indicator:before,.vue-carousel--up>.vue-carousel__indicators--disc>.vue-carousel__indicator:before{height:.5rem;width:.5rem}.vue-carousel--right>.vue-carousel__indicators{flex-direction:row-reverse}.vue-carousel--down>.vue-carousel__indicators{flex-direction:column-reverse}.vue-carousel--controls:hover>.vue-carousel__control{opacity:.5;transform:translateX(0);z-index:1}.vue-carousel--controls:hover>.vue-carousel__control:focus,.vue-carousel--controls:hover>.vue-carousel__control:hover{opacity:1}.vue-carousel--controls>.vue-carousel__control{opacity:0;z-index:-1}.vue-carousel--controls>.vue-carousel__control--prev{transform:translateX(-50%)}.vue-carousel--controls>.vue-carousel__control--next{transform:translateX(50%)}.vue-carousel--indicators:hover>.vue-carousel__indicators{opacity:1;z-index:1}.vue-carousel--indicators>.vue-carousel__indicators{opacity:0;transition:opacity .15s;z-index:-1}.vue-carousel__list{margin:0;overflow:hidden;padding:0;position:relative;width:100%}.vue-carousel__item{display:none;margin:0}.vue-carousel__item--active,.vue-carousel__item--bottom,.vue-carousel__item--left,.vue-carousel__item--right,.vue-carousel__item--top{display:block;transition:transform .6s ease-in-out;width:100%}.vue-carousel__item--bottom,.vue-carousel__item--left,.vue-carousel__item--right,.vue-carousel__item--top{left:0;position:absolute;top:0}.vue-carousel__item--top{transform:translateY(-100%)}.vue-carousel__item--top.vue-carousel__item--to-bottom{transform:translateY(0)}.vue-carousel__item--right{transform:translateX(100%)}.vue-carousel__item--right.vue-carousel__item--to-left{transform:translateX(0)}.vue-carousel__item--bottom{transform:translateY(100%)}.vue-carousel__item--bottom.vue-carousel__item--to-top{transform:translateY(0)}.vue-carousel__item--left{transform:translateX(-100%)}.vue-carousel__item--left.vue-carousel__item--to-right{transform:translateX(0)}.vue-carousel__item--active{transform:translate(0);z-index:1}.vue-carousel__item--active.vue-carousel__item--to-top{transform:translateY(-100%)}.vue-carousel__item--active.vue-carousel__item--to-right{transform:translateX(100%)}.vue-carousel__item--active.vue-carousel__item--to-bottom{transform:translateY(100%)}.vue-carousel__item--active.vue-carousel__item--to-left{transform:translateX(-100%)}.vue-carousel__indicators{bottom:0;display:flex;justify-content:center;left:50%;list-style:none;margin:0;padding:0;position:absolute;transform:translateX(-50%);z-index:1}.vue-carousel__indicators--disc>.vue-carousel__indicator{width:.75rem}.vue-carousel__indicators--disc>.vue-carousel__indicator:before{border-radius:50%;height:.5rem;width:.5rem}.vue-carousel__indicator{cursor:pointer;height:1.5rem;margin:.125rem;opacity:.5;position:relative;transition:opacity .15s;width:1.5rem}.vue-carousel__indicator:before{background-color:#fff;content:"";display:block;height:.125rem;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:100%}.vue-carousel__indicator--active{opacity:1}.vue-carousel__control{background-color:rgba(0,0,0,.5);border:0;border-radius:50%;color:#fff;cursor:pointer;height:2rem;margin-top:-1rem;opacity:.5;padding:.5rem;position:absolute;top:50%;transition:all .15s;width:2rem}.vue-carousel__control:focus,.vue-carousel__control:hover{opacity:1}.vue-carousel__control:focus{outline:none}.vue-carousel__control:before{border:.0625rem solid transparent;border-radius:.125rem;content:"";display:block;height:.5rem;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%) rotate(45deg);width:.5rem}.vue-carousel__control--prev{left:1rem}.vue-carousel__control--prev:before{border-bottom-color:#fff;border-left-color:#fff;margin-left:.125rem}.vue-carousel__control--next{right:1rem}.vue-carousel__control--next:before{border-right-color:#fff;border-top-color:#fff;margin-left:-.125rem}'),c}));