vueperslides
Advanced tools
Comparing version 1.0.4 to 1.1.0
@@ -20,3 +20,3 @@ (function (global, factory) { | ||
var VueperSlide = { render: function render() { | ||
var _vm = this;var _h = _vm.$createElement;var _c = _vm._self._c || _h;return _c('div', { class: { 'vueperslides__slide': true, 'vueperslides__slide--active': _vm.$parent.activeSlideUid === _vm._uid }, style: _vm.styles }, [!_vm.$parent.slideContentOutside && (_vm.title || _vm.content) ? _c('div', { staticClass: "vueperslides__slide-content" }, [_c('p', { staticClass: "slide-title", domProps: { "innerHTML": _vm._s(_vm.title) } }), _c('p', { staticClass: "slide-content", domProps: { "innerHTML": _vm._s(_vm.content) } })]) : _vm._e()]); | ||
var _vm = this;var _h = _vm.$createElement;var _c = _vm._self._c || _h;return _c('div', { class: { 'vueperslides__slide': true, 'vueperslides__slide--active': _vm.$parent.activeSlideUid === _vm._uid }, style: _vm.styles }, [!_vm.$parent.conf.slideContentOutside && (_vm.title || _vm.content) ? _c('div', { staticClass: "vueperslides__slide-content" }, [_c('p', { staticClass: "slide-title", domProps: { "innerHTML": _vm._s(_vm.title) } }), _c('p', { staticClass: "slide-content", domProps: { "innerHTML": _vm._s(_vm.content) } })]) : _vm._e()]); | ||
}, staticRenderFns: [], | ||
@@ -63,4 +63,4 @@ props: { | ||
} | ||
if (this.$parent.slideRatio) { | ||
styles.paddingBottom = this.$parent.slideRatio * 100 + '%'; | ||
if (this.$parent.conf.slideRatio) { | ||
styles.paddingBottom = this.$parent.conf.slideRatio * 100 + '%'; | ||
} | ||
@@ -72,2 +72,4 @@ return styles; | ||
function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } } | ||
(function () { | ||
@@ -86,7 +88,7 @@ if (typeof document !== 'undefined') { | ||
var VueperSlides = { render: function render() { | ||
var _vm = this;var _h = _vm.$createElement;var _c = _vm._self._c || _h;return _c('div', { staticClass: "vueperslides-wrapper", class: { 'ready': _vm.isReady } }, [_vm.slideContentOutside ? _c('div', { staticClass: "vueperslides__slide-content vueperslides__slide-content--outside", class: _vm.slideContentOutsideClass }, [_vm.slidesCount && _vm.slides[_vm.currentSlide].title ? _c('p', { staticClass: "slide-title", domProps: { "innerHTML": _vm._s(_vm.slides[_vm.currentSlide].title) } }) : _vm._e(), _vm.slidesCount && _vm.slides[_vm.currentSlide].content ? _c('p', { staticClass: "slide-content", domProps: { "innerHTML": _vm._s(_vm.slides[_vm.currentSlide].content) } }) : _vm._e()]) : _vm._e(), _c('div', { ref: "vueperslides", staticClass: "vueperslides", class: { 'vueperslides--fade': _vm.fade, 'vueperslides--touchable': _vm.touchEnabled && !_vm.disable } }, [_c('div', { staticClass: "vueperslides__slides-wrapper" }, [_c('div', { ref: "track", staticClass: "vueperslides__track", class: { 'vueperslides__track--dragging': _vm.dragging, 'vueperslides__track--mousedown': _vm.mouseDown }, style: !_vm.fade ? 'transform: translate3d(' + _vm.currentTranslation + '%, 0, 0)' : 'padding-bottom: ' + this.slideRatio * 100 + '%' }, [_vm.slidesCount && _vm.clones[0] ? _c('vueper-slide', { staticClass: "vueperslides__slide--clone", style: _vm.clones[0].style, attrs: { "clone": 0, "title": _vm.clones[0].title, "content": _vm.clones[0].content, "image": _vm.clones[0].image } }) : _vm._e(), _vm._t("default", null, { currentSlide: _vm.currentSlide }), _vm.slidesCount && _vm.clones[1] ? _c('vueper-slide', { staticClass: "vueperslides__slide--clone", style: _vm.clones[1].style, attrs: { "clone": 1, "title": _vm.clones[1].title, "content": _vm.clones[1].content, "image": _vm.clones[1].image } }) : _vm._e()], 2)]), _vm.$slots.pausedIcon ? _c('div', { staticClass: "vueperslides__paused" }, [_vm._t("pausedIcon")], 2) : _vm._e(), _vm.arrows && _vm.slidesCount > 1 && !_vm.disable ? _c('div', { staticClass: "vueperslides__arrows" }, [_c('button', { directives: [{ name: "show", rawName: "v-show", value: !_vm.arrowPrevDisabled, expression: "!arrowPrevDisabled" }], staticClass: "vueperslides__arrow vueperslides__arrow--prev", on: { "click": function click($event) { | ||
var _vm = this;var _h = _vm.$createElement;var _c = _vm._self._c || _h;return _c('div', { staticClass: "vueperslides-wrapper", class: { 'ready': _vm.isReady } }, [_vm.conf.slideContentOutside ? _c('div', { staticClass: "vueperslides__slide-content vueperslides__slide-content--outside", class: _vm.conf.slideContentOutsideClass }, [_vm.slidesCount && _vm.slides[_vm.currentSlide].title ? _c('p', { staticClass: "slide-title", domProps: { "innerHTML": _vm._s(_vm.slides[_vm.currentSlide].title) } }) : _vm._e(), _vm.slidesCount && _vm.slides[_vm.currentSlide].content ? _c('p', { staticClass: "slide-content", domProps: { "innerHTML": _vm._s(_vm.slides[_vm.currentSlide].content) } }) : _vm._e()]) : _vm._e(), _c('div', { ref: "vueperslides", staticClass: "vueperslides", class: { 'vueperslides--fade': _vm.conf.fade, 'vueperslides--touchable': _vm.touchEnabled && !_vm.disable } }, [_c('div', { staticClass: "vueperslides__slides-wrapper" }, [_c('div', { ref: "track", staticClass: "vueperslides__track", class: { 'vueperslides__track--dragging': _vm.dragging, 'vueperslides__track--mousedown': _vm.mouseDown }, style: !_vm.conf.fade ? 'transform: translate3d(' + _vm.currentTranslation + '%, 0, 0)' : 'padding-bottom: ' + _vm.conf.slideRatio * 100 + '%' }, [_vm.slidesCount && _vm.clones[0] ? _c('vueper-slide', { staticClass: "vueperslides__slide--clone", style: _vm.clones[0].style, attrs: { "clone": 0, "title": _vm.clones[0].title, "content": _vm.clones[0].content, "image": _vm.clones[0].image } }) : _vm._e(), _vm._t("default", null, { currentSlide: _vm.currentSlide }), _vm.slidesCount && _vm.clones[1] ? _c('vueper-slide', { staticClass: "vueperslides__slide--clone", style: _vm.clones[1].style, attrs: { "clone": 1, "title": _vm.clones[1].title, "content": _vm.clones[1].content, "image": _vm.clones[1].image } }) : _vm._e()], 2)]), _vm.$slots.pausedIcon ? _c('div', { staticClass: "vueperslides__paused" }, [_vm._t("pausedIcon")], 2) : _vm._e(), _vm.conf.arrows && _vm.slidesCount > 1 && !_vm.disable ? _c('div', { staticClass: "vueperslides__arrows" }, [_c('button', { directives: [{ name: "show", rawName: "v-show", value: !_vm.arrowPrevDisabled, expression: "!arrowPrevDisabled" }], staticClass: "vueperslides__arrow vueperslides__arrow--prev", on: { "click": function click($event) { | ||
_vm.onArrowClick(false); | ||
} } }, [_vm._t("arrowLeft", [_c('svg', { attrs: { "viewBox": "0 0 24 24" } }, [_c('path', { attrs: { "d": "M16.2,21c0.3,0,0.5-0.1,0.7-0.3c0.4-0.4,0.4-1,0-1.4L9.6,12L17,4.7c0.4-0.4,0.4-1,0-1.4c-0.4-0.4-1-0.4-1.4,0L6.8,12l8.8,8.7C15.7,20.9,16,21,16.2,21z" } })])])], 2), _c('button', { directives: [{ name: "show", rawName: "v-show", value: !_vm.arrowNextDisabled, expression: "!arrowNextDisabled" }], staticClass: "vueperslides__arrow vueperslides__arrow--next", on: { "click": function click($event) { | ||
_vm.onArrowClick(); | ||
} } }, [_vm._t("arrowRight", [_c('svg', { attrs: { "viewBox": "0 0 24 24" } }, [_c('path', { attrs: { "d": "M7.8,21c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l7.4-7.3L7,4.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l8.8,8.7l-8.8,8.7C8.3,20.9,8,21,7.8,21z" } })])])], 2)]) : _vm._e(), _vm.bullets && _vm.slidesCount > 1 && !_vm.disable ? _c('div', { staticClass: "vueperslides__bullets", class: { 'vueperslides__bullets--outside': _vm.bulletsOutside } }, _vm._l(_vm.slides, function (item, i) { | ||
} } }, [_vm._t("arrowRight", [_c('svg', { attrs: { "viewBox": "0 0 24 24" } }, [_c('path', { attrs: { "d": "M7.8,21c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l7.4-7.3L7,4.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l8.8,8.7l-8.8,8.7C8.3,20.9,8,21,7.8,21z" } })])])], 2)]) : _vm._e(), _vm.conf.bullets && _vm.slidesCount > 1 && !_vm.disable ? _c('div', { staticClass: "vueperslides__bullets", class: { 'vueperslides__bullets--outside': _vm.conf.bulletsOutside } }, _vm._l(_vm.slides, function (item, i) { | ||
return _c('button', { key: i, ref: "bullet", refInFor: true, staticClass: "vueperslides__bullet", class: { 'vueperslides__bullet--active': _vm.currentSlide === i }, on: { "click": function click($event) { | ||
@@ -110,5 +112,3 @@ _vm.goToSlide(i); | ||
name: 'vueper-slides', | ||
components: { | ||
VueperSlide: VueperSlide | ||
}, | ||
components: { VueperSlide: VueperSlide }, | ||
props: { | ||
@@ -175,2 +175,8 @@ initSlide: { | ||
default: false | ||
}, | ||
breakpoints: { | ||
type: Object, | ||
default: function _default() { | ||
return {}; | ||
} | ||
} | ||
@@ -196,5 +202,12 @@ }, | ||
touchEnabled: true, | ||
clones: [] | ||
clones: [], | ||
breakpointsList: [], | ||
currentBreakpoint: null, | ||
conf: null | ||
}; | ||
}, | ||
created: function created() { | ||
this.conf = Object.assign({}, this.$props); | ||
delete this.conf.breakpoints; // Prevent cyclic redundancy. | ||
}, | ||
mounted: function mounted() { | ||
@@ -208,9 +221,15 @@ this.init(); | ||
this.slidesCount = this.slides.length; | ||
this.touchEnabled = this.touchable; | ||
if (this.infinite && !this.fade) { | ||
if (Object.keys(this.breakpoints).length) { | ||
this.setBreakpointsList(); | ||
this.setBreakpointConfig(this.getCurrentBreakpoint()); | ||
} | ||
this.touchEnabled = this.conf.touchable; | ||
if (this.conf.infinite && !this.conf.fade) { | ||
this.cloneSlides(); | ||
} | ||
this.goToSlide(this.initSlide - 1); | ||
this.goToSlide(this.conf.initSlide - 1); | ||
this.bindEvents(); | ||
@@ -254,2 +273,28 @@ | ||
}, | ||
setBreakpointsList: function setBreakpointsList() { | ||
this.breakpointsList = [99999].concat(_toConsumableArray(Object.keys(this.breakpoints))).sort(function (a, b) { | ||
return parseInt(a) < parseInt(b); | ||
}); | ||
}, | ||
getCurrentBreakpoint: function getCurrentBreakpoint() { | ||
var windowWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; | ||
var breakpoints = [windowWidth].concat(_toConsumableArray(this.breakpointsList)).sort(function (a, b) { | ||
return parseInt(a) < parseInt(b); | ||
}); | ||
return this.breakpointsList[breakpoints.indexOf(windowWidth) - 1]; | ||
}, | ||
hasBreakpointChanged: function hasBreakpointChanged(breakpoint) { | ||
return this.currentBreakpoint !== breakpoint; | ||
}, | ||
setBreakpointConfig: function setBreakpointConfig(breakpoint) { | ||
this.currentBreakpoint = breakpoint; | ||
this.conf = Object.assign({}, this.$props, this.$props.breakpoints[breakpoint] || {}); | ||
// Re-apply slide ratio on clones. | ||
if (this.clones.length && this.conf.slideRatio) { | ||
this.clones[0].style['padding-bottom'] = this.conf.slideRatio * 100 + '%'; | ||
this.clones[1].style['padding-bottom'] = this.conf.slideRatio * 100 + '%'; | ||
} | ||
}, | ||
cloneSlides: function cloneSlides() { | ||
@@ -264,3 +309,3 @@ var firstNodeIsVnode = this.$slots.default[0].tag; | ||
image: this.slides[this.slidesCount - 1].image, | ||
style: lastSlide && lastSlide.attributes.style ? lastSlide.attributes.style.value : null | ||
style: { cssText: lastSlide && lastSlide.attributes.style ? lastSlide.attributes.style.value : null } | ||
}; | ||
@@ -271,3 +316,4 @@ this.clones[1] = { | ||
image: this.slides[0].image, | ||
style: firstSlide && lastSlide.attributes.style ? firstSlide.attributes.style.value : null | ||
// style: firstSlide && lastSlide.attributes.style ? firstSlide.attributes.style.value : null | ||
style: { cssText: firstSlide && lastSlide.attributes.style ? firstSlide.attributes.style.value : null } | ||
}; | ||
@@ -285,3 +331,3 @@ }, | ||
// Pause autoplay on mouseover. | ||
if (this.pauseOnHover && !hasTouch && this.autoplay) { | ||
if (this.conf.pauseOnHover && !hasTouch && this.conf.autoplay) { | ||
this.$refs.vueperslides.addEventListener('mouseover', this.onMouseIn); | ||
@@ -291,3 +337,5 @@ this.$refs.vueperslides.addEventListener('mouseout', this.onMouseOut); | ||
// window.addEventListener('resize', this.getSlideshowWidth) | ||
if (this.breakpointsList.length) { | ||
window.addEventListener('resize', this.onResize); | ||
} | ||
}, | ||
@@ -304,6 +352,12 @@ getDragPercentage: function getDragPercentage(e) { | ||
}, | ||
onResize: function onResize() { | ||
var breakpoint = this.getCurrentBreakpoint(); | ||
if (this.hasBreakpointChanged(breakpoint)) { | ||
this.setBreakpointConfig(breakpoint); | ||
} | ||
}, | ||
onMouseIn: function onMouseIn() { | ||
this.mouseOver = true; | ||
if (this.pauseOnHover && this.autoplay) { | ||
if (this.conf.pauseOnHover && this.conf.autoplay) { | ||
this.clearTimer(); | ||
@@ -315,3 +369,3 @@ } | ||
if (this.pauseOnHover && this.autoplay) { | ||
if (this.conf.pauseOnHover && this.conf.autoplay) { | ||
this.setTimer(); | ||
@@ -364,3 +418,3 @@ } | ||
if (this.arrowNextDisabled && this.autoplay && nextSlide === 0) { | ||
if (this.arrowNextDisabled && this.conf.autoplay && nextSlide === 0) { | ||
nextSlide = this.slidesCount - 1; | ||
@@ -399,3 +453,3 @@ } | ||
_this.goToSlide(_this.currentSlide + 1, true, true); | ||
}, this.speed); | ||
}, this.conf.speed); | ||
}, | ||
@@ -425,6 +479,6 @@ onArrowClick: function onArrowClick() { | ||
else { | ||
if (i < 0) i = this.disableArrowsOnEdges ? 0 : this.slidesCount - 1;else if (i > this.slidesCount - 1) { | ||
if (i < 0) i = this.conf.disableArrowsOnEdges ? 0 : this.slidesCount - 1;else if (i > this.slidesCount - 1) { | ||
// If autoplay is on but disableArrowsOnEdges is enabled, going beyond the last one will also bring | ||
// the first one in. | ||
i = this.disableArrowsOnEdges ? this.autoplay ? 0 : this.slidesCount - 1 : 0; | ||
i = this.conf.disableArrowsOnEdges ? this.conf.autoplay ? 0 : this.slidesCount - 1 : 0; | ||
} | ||
@@ -443,3 +497,3 @@ } | ||
if (this.autoplay) this.clearTimer(); | ||
if (this.conf.autoplay) this.clearTimer(); | ||
@@ -456,3 +510,3 @@ var _getSlideInRange3 = this.getSlideInRange(i), | ||
// Disable arrows if `disableArrowsOnEdges` is on and there is no slide to go to on that end. | ||
if (this.arrows && this.disableArrowsOnEdges) { | ||
if (this.conf.arrows && this.conf.disableArrowsOnEdges) { | ||
this.arrowPrevDisabled = nextSlide === 0; | ||
@@ -478,3 +532,3 @@ this.arrowNextDisabled = nextSlide === this.slidesCount - 1; | ||
// Only apply sliding transition when the slideshow animation type is `slide`. | ||
if (!this.fade) { | ||
if (!this.conf.fade) { | ||
if (nextSlideIsClone !== null) { | ||
@@ -487,3 +541,3 @@ this.currentTranslation = -100 * (nextSlideIsClone ? this.slidesCount + 1 : 0); | ||
if (this.autoplay && !this.mouseOver) { | ||
if (this.conf.autoplay && !this.mouseOver) { | ||
this.setTimer(); | ||
@@ -506,3 +560,3 @@ } | ||
var needReclone = this.infinite && !this.fade && this.isReady && !newSlide.clone; | ||
var needReclone = this.conf.infinite && !this.conf.fade && this.isReady && !newSlide.clone; | ||
@@ -509,0 +563,0 @@ if (newSlide.clone !== null) { |
@@ -1,2 +0,2 @@ | ||
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t(e.VueperSlides=e.VueperSlides||{})}(this,function(e){"use strict";!function(){if("undefined"!=typeof document){var e=document.head||document.getElementsByTagName("head")[0],t=document.createElement("style");t.type="text/css",t.styleSheet?t.styleSheet.cssText="":t.appendChild(document.createTextNode("")),e.appendChild(t)}}();var t={render:function(){var e=this,t=e.$createElement,s=e._self._c||t;return s("div",{class:{vueperslides__slide:!0,"vueperslides__slide--active":e.$parent.activeSlideUid===e._uid},style:e.styles},[e.$parent.slideContentOutside||!e.title&&!e.content?e._e():s("div",{staticClass:"vueperslides__slide-content"},[s("p",{staticClass:"slide-title",domProps:{innerHTML:e._s(e.title)}}),s("p",{staticClass:"slide-content",domProps:{innerHTML:e._s(e.content)}})])])},staticRenderFns:[],props:{clone:{type:Number,default:null},image:{type:String,default:""},title:{type:String,default:""},content:{type:String,default:""}},created:function(){this.$parent.addSlide({_uid:this._uid,image:this.image,title:this.title,content:this.content,clone:this.clone})},destroyed:function(){null===this.clone&&this.$parent.removeSlide(this._uid)},computed:{styles:function(){var e={};return this.image&&(e.backgroundImage="url("+this.image+")"),this.$parent.slideRatio&&(e.paddingBottom=100*this.$parent.slideRatio+"%"),e}}};!function(){if("undefined"!=typeof document){var e=document.head||document.getElementsByTagName("head")[0],t=document.createElement("style"),s='.vueperslides { position: relative; } .vueperslides-wrapper { position: relative; } .vueperslides__slides-wrapper { position: relative; overflow: hidden; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; z-index: 1; } .vueperslides__slides-wrapper::before, .vueperslides__slides-wrapper::after { content: ""; position: absolute; bottom: 100%; left: -1em; right: -1em; height: 2em; box-shadow: 0 0 20px rgba(0, 0, 0, 0.25); z-index: 2; } .vueperslides__slides-wrapper::after { top: 100%; bottom: auto; } .vueperslides--fade .vueperslides__track { white-space: normal; transition: none; } .vueperslides--touchable .vueperslides__track { cursor: ew-resize; cursor: -webkit-grab; } .vueperslides--touchable .vueperslides__track--mousedown, .vueperslides--touchable .vueperslides__track--dragging { cursor: -webkit-grabbing; } .vueperslides__track { white-space: nowrap; transition: 0.5s ease-in-out transform; } .vueperslides__track--mousedown { transition: 0.2s ease-in-out transform; } .vueperslides__track--dragging { transition: none; } .vueperslides__track--no-animation { transition-duration: 0s; } .vueperslides__slide { white-space: normal; padding-bottom: 34%; background-position: top; background-size: cover; display: inline-block; width: 100%; height: 0; margin-bottom: -8px; } .vueperslides__slide-content { user-select: none; } .vueperslides__slide-content--outside { user-select: initial; } .vueperslides--fade .vueperslides__slide { position: absolute; top: 0; left: 0; right: 0; bottom: 0; opacity: 0; transition: .8s ease-in-out opacity; } .vueperslides--fade .vueperslides__slide--active { z-index: 1; opacity: 1; } .vueperslides__arrow { position: absolute; top: 50%; background-color: transparent; border: none; color: #fff; fill: currentColor; font-size: 3em; width: 1em; text-align: center; transform: translateY(-50%); opacity: 0.7; z-index: 10; transition: 0.3s ease-in-out; cursor: pointer; user-select: none; outline: none; z-index: 2; } .vueperslides__arrow--prev { left: 10px; } .vueperslides__arrow--next { right: 10px; } .vueperslides__arrow:hover { opacity: 1; } .vueperslides__paused { position: absolute; top: 3%; right: 3%; opacity: 0; transition: 0.3s ease-in-out; text-shadow: 0 0 3px rgba(0, 0, 0, 0.4); z-index: 1; } .vueperslides:hover .vueperslides__paused { opacity: 1; } .vueperslides__bullets { display: flex; justify-content: center; position: absolute; bottom: 0; left: 0; right: 0; } .vueperslides__bullets--outside { position: relative; } .vueperslides__bullet { width: 12px; height: 12px; border-radius: 12px; border: 1px solid #fff; background-color: transparent; box-shadow: 0 0 1px rgba(0, 0, 0, 0.5), 0 0 3px rgba(0, 0, 0, 0.3); margin: 1.5em 0.6em; padding: 0; display: inline-block; cursor: pointer; user-select: none; outline: none; z-index: 2; display: flex; justify-content: center; align-items: center; } .vueperslides__bullet--active { background-color: #fff; } .vueperslides__bullet span { display: none; } @media screen and (max-width: 1000px) { .vueperslides__slide { padding-bottom: 45%; } .vueperslides--fade .vueperslides__track { padding-bottom: 45%; } } @media screen and (max-width: 700px) { .vueperslides__slide { padding-bottom: 54%; } .vueperslides--fade .vueperslides__track { padding-bottom: 54%; } } @media screen and (max-width: 400px) { .vueperslides__slide { padding-bottom: 60%; } .vueperslides--fade .vueperslides__track { padding-bottom: 60%; } } ';t.type="text/css",t.styleSheet?t.styleSheet.cssText=s:t.appendChild(document.createTextNode(s)),e.appendChild(t)}}();var s={render:function(){var e=this,t=e.$createElement,s=e._self._c||t;return s("div",{staticClass:"vueperslides-wrapper",class:{ready:e.isReady}},[e.slideContentOutside?s("div",{staticClass:"vueperslides__slide-content vueperslides__slide-content--outside",class:e.slideContentOutsideClass},[e.slidesCount&&e.slides[e.currentSlide].title?s("p",{staticClass:"slide-title",domProps:{innerHTML:e._s(e.slides[e.currentSlide].title)}}):e._e(),e.slidesCount&&e.slides[e.currentSlide].content?s("p",{staticClass:"slide-content",domProps:{innerHTML:e._s(e.slides[e.currentSlide].content)}}):e._e()]):e._e(),s("div",{ref:"vueperslides",staticClass:"vueperslides",class:{"vueperslides--fade":e.fade,"vueperslides--touchable":e.touchEnabled&&!e.disable}},[s("div",{staticClass:"vueperslides__slides-wrapper"},[s("div",{ref:"track",staticClass:"vueperslides__track",class:{"vueperslides__track--dragging":e.dragging,"vueperslides__track--mousedown":e.mouseDown},style:e.fade?"padding-bottom: "+100*this.slideRatio+"%":"transform: translate3d("+e.currentTranslation+"%, 0, 0)"},[e.slidesCount&&e.clones[0]?s("vueper-slide",{staticClass:"vueperslides__slide--clone",style:e.clones[0].style,attrs:{clone:0,title:e.clones[0].title,content:e.clones[0].content,image:e.clones[0].image}}):e._e(),e._t("default",null,{currentSlide:e.currentSlide}),e.slidesCount&&e.clones[1]?s("vueper-slide",{staticClass:"vueperslides__slide--clone",style:e.clones[1].style,attrs:{clone:1,title:e.clones[1].title,content:e.clones[1].content,image:e.clones[1].image}}):e._e()],2)]),e.$slots.pausedIcon?s("div",{staticClass:"vueperslides__paused"},[e._t("pausedIcon")],2):e._e(),e.arrows&&e.slidesCount>1&&!e.disable?s("div",{staticClass:"vueperslides__arrows"},[s("button",{directives:[{name:"show",rawName:"v-show",value:!e.arrowPrevDisabled,expression:"!arrowPrevDisabled"}],staticClass:"vueperslides__arrow vueperslides__arrow--prev",on:{click:function(t){e.onArrowClick(!1)}}},[e._t("arrowLeft",[s("svg",{attrs:{viewBox:"0 0 24 24"}},[s("path",{attrs:{d:"M16.2,21c0.3,0,0.5-0.1,0.7-0.3c0.4-0.4,0.4-1,0-1.4L9.6,12L17,4.7c0.4-0.4,0.4-1,0-1.4c-0.4-0.4-1-0.4-1.4,0L6.8,12l8.8,8.7C15.7,20.9,16,21,16.2,21z"}})])])],2),s("button",{directives:[{name:"show",rawName:"v-show",value:!e.arrowNextDisabled,expression:"!arrowNextDisabled"}],staticClass:"vueperslides__arrow vueperslides__arrow--next",on:{click:function(t){e.onArrowClick()}}},[e._t("arrowRight",[s("svg",{attrs:{viewBox:"0 0 24 24"}},[s("path",{attrs:{d:"M7.8,21c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l7.4-7.3L7,4.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l8.8,8.7l-8.8,8.7C8.3,20.9,8,21,7.8,21z"}})])])],2)]):e._e(),e.bullets&&e.slidesCount>1&&!e.disable?s("div",{staticClass:"vueperslides__bullets",class:{"vueperslides__bullets--outside":e.bulletsOutside}},e._l(e.slides,function(t,i){return s("button",{key:i,ref:"bullet",refInFor:!0,staticClass:"vueperslides__bullet",class:{"vueperslides__bullet--active":e.currentSlide===i},on:{click:function(t){e.goToSlide(i)},keyup:[function(t){return"button"in t||!e._k(t.keyCode,"left",37,t.key,["Left","ArrowLeft"])?"button"in t&&0!==t.button?null:void e.onArrowClick(!1):null},function(t){return"button"in t||!e._k(t.keyCode,"right",39,t.key,["Right","ArrowRight"])?"button"in t&&2!==t.button?null:void e.onArrowClick():null}]}},[s("span",[e._v(e._s(i+1))])])})):e._e()])])},staticRenderFns:[],name:"vueper-slides",components:{VueperSlide:t},props:{initSlide:{type:Number,default:1},slideRatio:{type:Number,default:1/3},arrows:{type:Boolean,default:!0},disableArrowsOnEdges:{type:[Boolean,String],default:!1},bullets:{type:Boolean,default:!0},bulletsOutside:{type:Boolean,default:!1},fade:{type:Boolean,default:!1},slideContentOutside:{type:Boolean,default:!1},slideContentOutsideClass:{type:String,default:""},autoplay:{type:Boolean,default:!1},speed:{type:[Number,String],default:4e3},pauseOnHover:{type:Boolean,default:!0},infinite:{type:Boolean,default:!0},touchable:{type:Boolean,default:!0},disable:{type:Boolean,default:!1}},data:function(){return{isReady:!1,slides:[],slidesCount:0,activeSlideUid:null,mouseDown:!1,mouseOver:!1,dragging:!1,currentSlide:0,currentTranslation:0,dragStartX:0,dragStartY:0,goNext:!0,timer:null,arrowPrevDisabled:!1,arrowNextDisabled:!1,touchEnabled:!0,clones:[]}},mounted:function(){this.init()},methods:{init:function(){this.emit("before-init",!1),this.slidesCount=this.slides.length,this.touchEnabled=this.touchable,this.infinite&&!this.fade&&this.cloneSlides(),this.goToSlide(this.initSlide-1),this.bindEvents(),this.isReady=!0,this.emit("ready")},emit:function(e){var t=!(arguments.length>1&&void 0!==arguments[1])||arguments[1],s=arguments.length>2&&void 0!==arguments[2]&&arguments[2],i=[e];if((t||"number"==typeof s)&&(i[1]={},t&&this.activeSlideUid&&(i[1].currentSlide={index:this.currentSlide,title:this.slides[this.currentSlide].title,content:this.slides[this.currentSlide].content}),"number"==typeof s)){var n=this.getSlideInRange(s).nextSlide;i[1].nextSlide={index:n,title:this.slides[n].title,content:this.slides[n].content}}this.$emit.apply(this,[e].concat(i))},cloneSlides:function(){var e=this.$slots.default[0].tag,t=this.$slots.default[e?0:1].elm,s=this.$slots.default[this.$slots.default.length-1].elm;this.clones[0]={title:this.slides[this.slidesCount-1].title,content:this.slides[this.slidesCount-1].content,image:this.slides[this.slidesCount-1].image,style:s&&s.attributes.style?s.attributes.style.value:null},this.clones[1]={title:this.slides[0].title,content:this.slides[0].content,image:this.slides[0].image,style:t&&s.attributes.style?t.attributes.style.value:null}},bindEvents:function(){var e="ontouchstart"in window;this.touchEnabled&&(this.$refs.track.addEventListener(e?"touchstart":"mousedown",this.onMouseDown),document.addEventListener(e?"touchmove":"mousemove",this.onMouseMove),document.addEventListener(e?"touchend":"mouseup",this.onMouseUp)),this.pauseOnHover&&!e&&this.autoplay&&(this.$refs.vueperslides.addEventListener("mouseover",this.onMouseIn),this.$refs.vueperslides.addEventListener("mouseout",this.onMouseOut))},getDragPercentage:function(e){this.dragStartX="ontouchstart"in window?e.touches[0].clientX:e.clientX;var t=this.$refs.vueperslides.offsetParent;return(this.dragStartX-t.offsetLeft)/t.clientWidth},onMouseIn:function(){this.mouseOver=!0,this.pauseOnHover&&this.autoplay&&this.clearTimer()},onMouseOut:function(){this.mouseOver=!1,this.pauseOnHover&&this.autoplay&&this.setTimer()},onMouseDown:function(e){if(this.touchEnabled&&!this.disable){e.touches||e.preventDefault(),this.mouseDown=!0;var t=this.getDragPercentage(e);this.goNext=t>=.5,this.currentTranslation=-100*(this.currentSlide+(this.goNext?1:0)+(this.clones.length?1:0)-t)}},onMouseMove:function(e){if(this.mouseDown||this.dragging){this.mouseDown=!1,this.dragging=!0;var t=this.getDragPercentage(e);this.currentTranslation=-100*(this.currentSlide+(this.goNext?1:0)+(this.clones.length?1:0)-t)}},onMouseUp:function(){if(this.mouseDown||this.dragging){this.mouseDown=!1,this.dragging=!1;var e=-(Math.round(this.currentTranslation/100)+(this.clones.length?1:0)),t=this.getSlideInRange(e).nextSlide;this.arrowNextDisabled&&this.autoplay&&0===t&&(t=this.slidesCount-1),t!==this.currentSlide?this.goToSlide(e):this.currentTranslation=100*-(this.currentSlide+(this.clones.length?1:0)),this.enableScroll()}},disableScroll:function(){document.ontouchmove=function(e){e.preventDefault()}},enableScroll:function(){document.ontouchmove=function(){return!0}},clearTimer:function(){clearTimeout(this.timer),this.timer=0},setTimer:function(){var e=this;this.timer=setTimeout(function(){e.goToSlide(e.currentSlide+1,!0,!0)},this.speed)},onArrowClick:function(){var e=!(arguments.length>0&&void 0!==arguments[0])||arguments[0];this.goToSlide(this.currentSlide+(e?1:-1))},getSlideInRange:function(e){var t=null;return this.clones.length?e<0?(e=this.slidesCount-1,t=0):e>this.slidesCount-1&&(e=0,t=1):e<0?e=this.disableArrowsOnEdges?0:this.slidesCount-1:e>this.slidesCount-1&&(e=this.disableArrowsOnEdges?this.autoplay?0:this.slidesCount-1:0),{nextSlide:e,clone:t}},goToSlide:function(e){var t=this,s=!(arguments.length>1&&void 0!==arguments[1])||arguments[1],i=arguments.length>2&&void 0!==arguments[2]&&arguments[2];if(this.slidesCount&&!this.disable){this.autoplay&&this.clearTimer();var n=this.getSlideInRange(e),l=n.nextSlide,o=n.clone;this.isReady&&this.emit("before-slide",!0,l),this.arrows&&this.disableArrowsOnEdges&&(this.arrowPrevDisabled=0===l,this.arrowNextDisabled=l===this.slidesCount-1),this.$refs.track.classList[s?"remove":"add"]("vueperslides__track--no-animation"),null!==o&&setTimeout(function(){t.goToSlide(o?0:t.slidesCount-1,!1,i)},400),this.currentSlide=l,this.fade||(this.currentTranslation=null!==o?-100*(o?this.slidesCount+1:0):-100*(this.currentSlide+(this.clones.length?1:0))),this.activeSlideUid=this.slides[this.currentSlide]._uid,this.autoplay&&!this.mouseOver&&this.setTimer(),this.slidesCount&&(this.$slots.default[this.currentSlide]&&this.isReady&&this.emit("slide"),this.isReady&&!i&&this.$refs.bullet[this.currentSlide]&&this.$refs.bullet[this.currentSlide].focus())}},addSlide:function(e){var t=this,s=this.infinite&&!this.fade&&this.isReady&&!e.clone;null!==e.clone?this.clones[e.clone]=e:(this.slides.push(e),this.slidesCount=this.slides.length),this.slidesCount>1&&(this.touchEnabled=!0),s&&this.$nextTick(function(){return t.cloneSlides()})},removeSlide:function(e){var t=this,s=!1;this.slides.some(function(i,n){if(i._uid===e)return t.slides.splice(n,1),t.slidesCount=t.slides.length,e===t.activeSlideUid&&(t.activeSlideUid=null,t.goToSlide(n-1,!0,!0)),t.slidesCount<=1&&(t.touchEnabled=!1),t.clones.length&&t.isReady&&!i.clone&&(s=!0),!0}),this.slidesCount&&s&&this.cloneSlides()}}};"undefined"!=typeof window&&window.Vue&&(window.Vue.component("vueper-slides",s),window.Vue.component("vueper-slide",t)),e.VueperSlides=s,e.VueperSlide=t,Object.defineProperty(e,"__esModule",{value:!0})}); | ||
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t(e.VueperSlides=e.VueperSlides||{})}(this,function(e){"use strict";!function(){if("undefined"!=typeof document){var e=document.head||document.getElementsByTagName("head")[0],t=document.createElement("style");t.type="text/css",t.styleSheet?t.styleSheet.cssText="":t.appendChild(document.createTextNode("")),e.appendChild(t)}}();var t={render:function(){var e=this,t=e.$createElement,s=e._self._c||t;return s("div",{class:{vueperslides__slide:!0,"vueperslides__slide--active":e.$parent.activeSlideUid===e._uid},style:e.styles},[e.$parent.conf.slideContentOutside||!e.title&&!e.content?e._e():s("div",{staticClass:"vueperslides__slide-content"},[s("p",{staticClass:"slide-title",domProps:{innerHTML:e._s(e.title)}}),s("p",{staticClass:"slide-content",domProps:{innerHTML:e._s(e.content)}})])])},staticRenderFns:[],props:{clone:{type:Number,default:null},image:{type:String,default:""},title:{type:String,default:""},content:{type:String,default:""}},created:function(){this.$parent.addSlide({_uid:this._uid,image:this.image,title:this.title,content:this.content,clone:this.clone})},destroyed:function(){null===this.clone&&this.$parent.removeSlide(this._uid)},computed:{styles:function(){var e={};return this.image&&(e.backgroundImage="url("+this.image+")"),this.$parent.conf.slideRatio&&(e.paddingBottom=100*this.$parent.conf.slideRatio+"%"),e}}};function s(e){if(Array.isArray(e)){for(var t=0,s=Array(e.length);t<e.length;t++)s[t]=e[t];return s}return Array.from(e)}!function(){if("undefined"!=typeof document){var e=document.head||document.getElementsByTagName("head")[0],t=document.createElement("style"),s='.vueperslides { position: relative; } .vueperslides-wrapper { position: relative; } .vueperslides__slides-wrapper { position: relative; overflow: hidden; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; z-index: 1; } .vueperslides__slides-wrapper::before, .vueperslides__slides-wrapper::after { content: ""; position: absolute; bottom: 100%; left: -1em; right: -1em; height: 2em; box-shadow: 0 0 20px rgba(0, 0, 0, 0.25); z-index: 2; } .vueperslides__slides-wrapper::after { top: 100%; bottom: auto; } .vueperslides--fade .vueperslides__track { white-space: normal; transition: none; } .vueperslides--touchable .vueperslides__track { cursor: ew-resize; cursor: -webkit-grab; } .vueperslides--touchable .vueperslides__track--mousedown, .vueperslides--touchable .vueperslides__track--dragging { cursor: -webkit-grabbing; } .vueperslides__track { white-space: nowrap; transition: 0.5s ease-in-out transform; } .vueperslides__track--mousedown { transition: 0.2s ease-in-out transform; } .vueperslides__track--dragging { transition: none; } .vueperslides__track--no-animation { transition-duration: 0s; } .vueperslides__slide { white-space: normal; padding-bottom: 34%; background-position: top; background-size: cover; display: inline-block; width: 100%; height: 0; margin-bottom: -8px; } .vueperslides__slide-content { user-select: none; } .vueperslides__slide-content--outside { user-select: initial; } .vueperslides--fade .vueperslides__slide { position: absolute; top: 0; left: 0; right: 0; bottom: 0; opacity: 0; transition: .8s ease-in-out opacity; } .vueperslides--fade .vueperslides__slide--active { z-index: 1; opacity: 1; } .vueperslides__arrow { position: absolute; top: 50%; background-color: transparent; border: none; color: #fff; fill: currentColor; font-size: 3em; width: 1em; text-align: center; transform: translateY(-50%); opacity: 0.7; z-index: 10; transition: 0.3s ease-in-out; cursor: pointer; user-select: none; outline: none; z-index: 2; } .vueperslides__arrow--prev { left: 10px; } .vueperslides__arrow--next { right: 10px; } .vueperslides__arrow:hover { opacity: 1; } .vueperslides__paused { position: absolute; top: 3%; right: 3%; opacity: 0; transition: 0.3s ease-in-out; text-shadow: 0 0 3px rgba(0, 0, 0, 0.4); z-index: 1; } .vueperslides:hover .vueperslides__paused { opacity: 1; } .vueperslides__bullets { display: flex; justify-content: center; position: absolute; bottom: 0; left: 0; right: 0; } .vueperslides__bullets--outside { position: relative; } .vueperslides__bullet { width: 12px; height: 12px; border-radius: 12px; border: 1px solid #fff; background-color: transparent; box-shadow: 0 0 1px rgba(0, 0, 0, 0.5), 0 0 3px rgba(0, 0, 0, 0.3); margin: 1.5em 0.6em; padding: 0; display: inline-block; cursor: pointer; user-select: none; outline: none; z-index: 2; display: flex; justify-content: center; align-items: center; } .vueperslides__bullet--active { background-color: #fff; } .vueperslides__bullet span { display: none; } @media screen and (max-width: 1000px) { .vueperslides__slide { padding-bottom: 45%; } .vueperslides--fade .vueperslides__track { padding-bottom: 45%; } } @media screen and (max-width: 700px) { .vueperslides__slide { padding-bottom: 54%; } .vueperslides--fade .vueperslides__track { padding-bottom: 54%; } } @media screen and (max-width: 400px) { .vueperslides__slide { padding-bottom: 60%; } .vueperslides--fade .vueperslides__track { padding-bottom: 60%; } } ';t.type="text/css",t.styleSheet?t.styleSheet.cssText=s:t.appendChild(document.createTextNode(s)),e.appendChild(t)}}();var i={render:function(){var e=this,t=e.$createElement,s=e._self._c||t;return s("div",{staticClass:"vueperslides-wrapper",class:{ready:e.isReady}},[e.conf.slideContentOutside?s("div",{staticClass:"vueperslides__slide-content vueperslides__slide-content--outside",class:e.conf.slideContentOutsideClass},[e.slidesCount&&e.slides[e.currentSlide].title?s("p",{staticClass:"slide-title",domProps:{innerHTML:e._s(e.slides[e.currentSlide].title)}}):e._e(),e.slidesCount&&e.slides[e.currentSlide].content?s("p",{staticClass:"slide-content",domProps:{innerHTML:e._s(e.slides[e.currentSlide].content)}}):e._e()]):e._e(),s("div",{ref:"vueperslides",staticClass:"vueperslides",class:{"vueperslides--fade":e.conf.fade,"vueperslides--touchable":e.touchEnabled&&!e.disable}},[s("div",{staticClass:"vueperslides__slides-wrapper"},[s("div",{ref:"track",staticClass:"vueperslides__track",class:{"vueperslides__track--dragging":e.dragging,"vueperslides__track--mousedown":e.mouseDown},style:e.conf.fade?"padding-bottom: "+100*e.conf.slideRatio+"%":"transform: translate3d("+e.currentTranslation+"%, 0, 0)"},[e.slidesCount&&e.clones[0]?s("vueper-slide",{staticClass:"vueperslides__slide--clone",style:e.clones[0].style,attrs:{clone:0,title:e.clones[0].title,content:e.clones[0].content,image:e.clones[0].image}}):e._e(),e._t("default",null,{currentSlide:e.currentSlide}),e.slidesCount&&e.clones[1]?s("vueper-slide",{staticClass:"vueperslides__slide--clone",style:e.clones[1].style,attrs:{clone:1,title:e.clones[1].title,content:e.clones[1].content,image:e.clones[1].image}}):e._e()],2)]),e.$slots.pausedIcon?s("div",{staticClass:"vueperslides__paused"},[e._t("pausedIcon")],2):e._e(),e.conf.arrows&&e.slidesCount>1&&!e.disable?s("div",{staticClass:"vueperslides__arrows"},[s("button",{directives:[{name:"show",rawName:"v-show",value:!e.arrowPrevDisabled,expression:"!arrowPrevDisabled"}],staticClass:"vueperslides__arrow vueperslides__arrow--prev",on:{click:function(t){e.onArrowClick(!1)}}},[e._t("arrowLeft",[s("svg",{attrs:{viewBox:"0 0 24 24"}},[s("path",{attrs:{d:"M16.2,21c0.3,0,0.5-0.1,0.7-0.3c0.4-0.4,0.4-1,0-1.4L9.6,12L17,4.7c0.4-0.4,0.4-1,0-1.4c-0.4-0.4-1-0.4-1.4,0L6.8,12l8.8,8.7C15.7,20.9,16,21,16.2,21z"}})])])],2),s("button",{directives:[{name:"show",rawName:"v-show",value:!e.arrowNextDisabled,expression:"!arrowNextDisabled"}],staticClass:"vueperslides__arrow vueperslides__arrow--next",on:{click:function(t){e.onArrowClick()}}},[e._t("arrowRight",[s("svg",{attrs:{viewBox:"0 0 24 24"}},[s("path",{attrs:{d:"M7.8,21c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l7.4-7.3L7,4.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l8.8,8.7l-8.8,8.7C8.3,20.9,8,21,7.8,21z"}})])])],2)]):e._e(),e.conf.bullets&&e.slidesCount>1&&!e.disable?s("div",{staticClass:"vueperslides__bullets",class:{"vueperslides__bullets--outside":e.conf.bulletsOutside}},e._l(e.slides,function(t,i){return s("button",{key:i,ref:"bullet",refInFor:!0,staticClass:"vueperslides__bullet",class:{"vueperslides__bullet--active":e.currentSlide===i},on:{click:function(t){e.goToSlide(i)},keyup:[function(t){return"button"in t||!e._k(t.keyCode,"left",37,t.key,["Left","ArrowLeft"])?"button"in t&&0!==t.button?null:void e.onArrowClick(!1):null},function(t){return"button"in t||!e._k(t.keyCode,"right",39,t.key,["Right","ArrowRight"])?"button"in t&&2!==t.button?null:void e.onArrowClick():null}]}},[s("span",[e._v(e._s(i+1))])])})):e._e()])])},staticRenderFns:[],name:"vueper-slides",components:{VueperSlide:t},props:{initSlide:{type:Number,default:1},slideRatio:{type:Number,default:1/3},arrows:{type:Boolean,default:!0},disableArrowsOnEdges:{type:[Boolean,String],default:!1},bullets:{type:Boolean,default:!0},bulletsOutside:{type:Boolean,default:!1},fade:{type:Boolean,default:!1},slideContentOutside:{type:Boolean,default:!1},slideContentOutsideClass:{type:String,default:""},autoplay:{type:Boolean,default:!1},speed:{type:[Number,String],default:4e3},pauseOnHover:{type:Boolean,default:!0},infinite:{type:Boolean,default:!0},touchable:{type:Boolean,default:!0},disable:{type:Boolean,default:!1},breakpoints:{type:Object,default:function(){return{}}}},data:function(){return{isReady:!1,slides:[],slidesCount:0,activeSlideUid:null,mouseDown:!1,mouseOver:!1,dragging:!1,currentSlide:0,currentTranslation:0,dragStartX:0,dragStartY:0,goNext:!0,timer:null,arrowPrevDisabled:!1,arrowNextDisabled:!1,touchEnabled:!0,clones:[],breakpointsList:[],currentBreakpoint:null,conf:null}},created:function(){this.conf=Object.assign({},this.$props),delete this.conf.breakpoints},mounted:function(){this.init()},methods:{init:function(){this.emit("before-init",!1),this.slidesCount=this.slides.length,Object.keys(this.breakpoints).length&&(this.setBreakpointsList(),this.setBreakpointConfig(this.getCurrentBreakpoint())),this.touchEnabled=this.conf.touchable,this.conf.infinite&&!this.conf.fade&&this.cloneSlides(),this.goToSlide(this.conf.initSlide-1),this.bindEvents(),this.isReady=!0,this.emit("ready")},emit:function(e){var t=!(arguments.length>1&&void 0!==arguments[1])||arguments[1],s=arguments.length>2&&void 0!==arguments[2]&&arguments[2],i=[e];if((t||"number"==typeof s)&&(i[1]={},t&&this.activeSlideUid&&(i[1].currentSlide={index:this.currentSlide,title:this.slides[this.currentSlide].title,content:this.slides[this.currentSlide].content}),"number"==typeof s)){var n=this.getSlideInRange(s).nextSlide;i[1].nextSlide={index:n,title:this.slides[n].title,content:this.slides[n].content}}this.$emit.apply(this,[e].concat(i))},setBreakpointsList:function(){this.breakpointsList=[99999].concat(s(Object.keys(this.breakpoints))).sort(function(e,t){return parseInt(e)<parseInt(t)})},getCurrentBreakpoint:function(){var e=window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth,t=[e].concat(s(this.breakpointsList)).sort(function(e,t){return parseInt(e)<parseInt(t)});return this.breakpointsList[t.indexOf(e)-1]},hasBreakpointChanged:function(e){return this.currentBreakpoint!==e},setBreakpointConfig:function(e){this.currentBreakpoint=e,this.conf=Object.assign({},this.$props,this.$props.breakpoints[e]||{}),this.clones.length&&this.conf.slideRatio&&(this.clones[0].style["padding-bottom"]=100*this.conf.slideRatio+"%",this.clones[1].style["padding-bottom"]=100*this.conf.slideRatio+"%")},cloneSlides:function(){var e=this.$slots.default[0].tag,t=this.$slots.default[e?0:1].elm,s=this.$slots.default[this.$slots.default.length-1].elm;this.clones[0]={title:this.slides[this.slidesCount-1].title,content:this.slides[this.slidesCount-1].content,image:this.slides[this.slidesCount-1].image,style:{cssText:s&&s.attributes.style?s.attributes.style.value:null}},this.clones[1]={title:this.slides[0].title,content:this.slides[0].content,image:this.slides[0].image,style:{cssText:t&&s.attributes.style?t.attributes.style.value:null}}},bindEvents:function(){var e="ontouchstart"in window;this.touchEnabled&&(this.$refs.track.addEventListener(e?"touchstart":"mousedown",this.onMouseDown),document.addEventListener(e?"touchmove":"mousemove",this.onMouseMove),document.addEventListener(e?"touchend":"mouseup",this.onMouseUp)),this.conf.pauseOnHover&&!e&&this.conf.autoplay&&(this.$refs.vueperslides.addEventListener("mouseover",this.onMouseIn),this.$refs.vueperslides.addEventListener("mouseout",this.onMouseOut)),this.breakpointsList.length&&window.addEventListener("resize",this.onResize)},getDragPercentage:function(e){this.dragStartX="ontouchstart"in window?e.touches[0].clientX:e.clientX;var t=this.$refs.vueperslides.offsetParent;return(this.dragStartX-t.offsetLeft)/t.clientWidth},onResize:function(){var e=this.getCurrentBreakpoint();this.hasBreakpointChanged(e)&&this.setBreakpointConfig(e)},onMouseIn:function(){this.mouseOver=!0,this.conf.pauseOnHover&&this.conf.autoplay&&this.clearTimer()},onMouseOut:function(){this.mouseOver=!1,this.conf.pauseOnHover&&this.conf.autoplay&&this.setTimer()},onMouseDown:function(e){if(this.touchEnabled&&!this.disable){e.touches||e.preventDefault(),this.mouseDown=!0;var t=this.getDragPercentage(e);this.goNext=t>=.5,this.currentTranslation=-100*(this.currentSlide+(this.goNext?1:0)+(this.clones.length?1:0)-t)}},onMouseMove:function(e){if(this.mouseDown||this.dragging){this.mouseDown=!1,this.dragging=!0;var t=this.getDragPercentage(e);this.currentTranslation=-100*(this.currentSlide+(this.goNext?1:0)+(this.clones.length?1:0)-t)}},onMouseUp:function(){if(this.mouseDown||this.dragging){this.mouseDown=!1,this.dragging=!1;var e=-(Math.round(this.currentTranslation/100)+(this.clones.length?1:0)),t=this.getSlideInRange(e).nextSlide;this.arrowNextDisabled&&this.conf.autoplay&&0===t&&(t=this.slidesCount-1),t!==this.currentSlide?this.goToSlide(e):this.currentTranslation=100*-(this.currentSlide+(this.clones.length?1:0)),this.enableScroll()}},disableScroll:function(){document.ontouchmove=function(e){e.preventDefault()}},enableScroll:function(){document.ontouchmove=function(){return!0}},clearTimer:function(){clearTimeout(this.timer),this.timer=0},setTimer:function(){var e=this;this.timer=setTimeout(function(){e.goToSlide(e.currentSlide+1,!0,!0)},this.conf.speed)},onArrowClick:function(){var e=!(arguments.length>0&&void 0!==arguments[0])||arguments[0];this.goToSlide(this.currentSlide+(e?1:-1))},getSlideInRange:function(e){var t=null;return this.clones.length?e<0?(e=this.slidesCount-1,t=0):e>this.slidesCount-1&&(e=0,t=1):e<0?e=this.conf.disableArrowsOnEdges?0:this.slidesCount-1:e>this.slidesCount-1&&(e=this.conf.disableArrowsOnEdges?this.conf.autoplay?0:this.slidesCount-1:0),{nextSlide:e,clone:t}},goToSlide:function(e){var t=this,s=!(arguments.length>1&&void 0!==arguments[1])||arguments[1],i=arguments.length>2&&void 0!==arguments[2]&&arguments[2];if(this.slidesCount&&!this.disable){this.conf.autoplay&&this.clearTimer();var n=this.getSlideInRange(e),o=n.nextSlide,l=n.clone;this.isReady&&this.emit("before-slide",!0,o),this.conf.arrows&&this.conf.disableArrowsOnEdges&&(this.arrowPrevDisabled=0===o,this.arrowNextDisabled=o===this.slidesCount-1),this.$refs.track.classList[s?"remove":"add"]("vueperslides__track--no-animation"),null!==l&&setTimeout(function(){t.goToSlide(l?0:t.slidesCount-1,!1,i)},400),this.currentSlide=o,this.conf.fade||(this.currentTranslation=null!==l?-100*(l?this.slidesCount+1:0):-100*(this.currentSlide+(this.clones.length?1:0))),this.activeSlideUid=this.slides[this.currentSlide]._uid,this.conf.autoplay&&!this.mouseOver&&this.setTimer(),this.slidesCount&&(this.$slots.default[this.currentSlide]&&this.isReady&&this.emit("slide"),this.isReady&&!i&&this.$refs.bullet[this.currentSlide]&&this.$refs.bullet[this.currentSlide].focus())}},addSlide:function(e){var t=this,s=this.conf.infinite&&!this.conf.fade&&this.isReady&&!e.clone;null!==e.clone?this.clones[e.clone]=e:(this.slides.push(e),this.slidesCount=this.slides.length),this.slidesCount>1&&(this.touchEnabled=!0),s&&this.$nextTick(function(){return t.cloneSlides()})},removeSlide:function(e){var t=this,s=!1;this.slides.some(function(i,n){if(i._uid===e)return t.slides.splice(n,1),t.slidesCount=t.slides.length,e===t.activeSlideUid&&(t.activeSlideUid=null,t.goToSlide(n-1,!0,!0)),t.slidesCount<=1&&(t.touchEnabled=!1),t.clones.length&&t.isReady&&!i.clone&&(s=!0),!0}),this.slidesCount&&s&&this.cloneSlides()}}};"undefined"!=typeof window&&window.Vue&&(window.Vue.component("vueper-slides",i),window.Vue.component("vueper-slide",t)),e.VueperSlides=i,e.VueperSlide=t,Object.defineProperty(e,"__esModule",{value:!0})}); | ||
//# sourceMappingURL=vueperslides.min.js.map |
{ | ||
"name": "vueperslides", | ||
"version": "1.0.4", | ||
"version": "1.1.0", | ||
"description": "A touch ready & responsive slideshow for Vue JS.", | ||
@@ -14,3 +14,4 @@ "repository": "https://github.com/antoniandre/vueper-slides", | ||
"vue", | ||
"rollup" | ||
"vuejs", | ||
"ui" | ||
], | ||
@@ -17,0 +18,0 @@ "files": [ |
@@ -15,2 +15,7 @@ # Vueper Slides | ||
## Try it yourself | ||
> [https://codepen.io/anon/pen/wjgQQp](https://codepen.io/anon/pen/wjgQQp) | ||
> [https://codepen.io/anon/pen/wjgQQp](https://codepen.io/anon/pen/wjgQQp) | ||
## Browser Support | ||
![Chrome](https://raw.github.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png) | ![Firefox](https://raw.github.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png) | ![Safari](https://raw.github.com/alrra/browser-logos/master/src/safari/safari_48x48.png) | ![Opera](https://raw.github.com/alrra/browser-logos/master/src/opera/opera_48x48.png) | ![Edge](https://raw.github.com/alrra/browser-logos/master/src/edge/edge_48x48.png) | ![IE](https://raw.github.com/alrra/browser-logos/master/src/archive/internet-explorer_9-11/internet-explorer_9-11_48x48.png) | | ||
--- | --- | --- | --- | --- | --- | | ||
Latest ✔ | Latest ✔ | Latest ✔ | Latest ✔ | Latest ✔ | 10+ ✔ | |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
149083
622
21