Allow fade transition with multiple visible slides & cleanup. :simple_smile:

Author: antoniandre

README.md

@@ -16,7 +16,7 @@ npm install vueperslides --save-dev
 > [https://antoniandre.github.io/vueper-slides](https://antoniandre.github.io/vueper-slides)
 
 ## Try it yourself
-> [https://codepen.io/antoniandre/pen/djMpxa](https://codepen.io/antoniandre/pen/djMpxa)
+> [https://codepen.io/antoniandre/pen/jevjoQ](https://codepen.io/antoniandre/pen/jevjoQ)
 
 ## 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) |
@@ -29,6 +29,7 @@ ___
 
 ## Release Notes
 
+- __Version 1.14.0__ Allow fade transition with multiple items per slide
 - __Version 1.13.0__ Allow multiple items per slide
 - __Version 1.12.0__ Add a 'no-shadow' class to remove default inner shadow
 - __Version 1.11.0__ Allow slide background inside slide container
@@ -42,9 +43,7 @@ ___
 - __Version 1.5.0__ Add transition speed param & slide content outside above or under slideshow
 - __Version 1.4.0__ Allow complex slide title & content
 - __Version 1.3.2__ Add option to place arrows outside. The config is now VueJS-reactive
-- __Version 1.3.1__ More options & improvements of parallax feature
 - __Version 1.3.0__ Add parallax feature
-- __Version 1.2.1__ Code cleanup, improvements & minor HTML structure change
 - __Version 1.2.0__ Add dragging distance feature
 - __Version 1.1.0__ Add breakpoints feature
 - __Version 1.0.0__ First public release

dist/vueperslides.js

@@ -1,6 +1,6 @@
 {
   "name": "vueperslides",
-  "version": "1.13.8",
+  "version": "1.14.0",
   "description": "A touch ready and responsive slideshow for Vue JS.",
   "repository": "https://github.com/antoniandre/vueper-slides",
   "author": "Antoni Andre <[email protected]>",

dist/vueperslides.min.js

@@ -1,12 +1,12 @@
 <template lang="pug">
-div(:class="{ 'vueperslide': true, 'vueperslide--active': $parent.slides.activeUid === _uid }" :style="wrapperStyles" :aria-hidden="$parent.slides.activeUid === _uid ? 'false' : 'true'")
-  div.vueperslide__image(v-if="image && $parent.conf.slideImageInside" :style="imageStyles")
-  div.vueperslide__content-wrapper(v-show="!$parent.conf.slideContentOutside && (title || hasTitleSlotData || content || hasContentSlotData)")
-    div.vueperslide__title(v-show="title || hasTitleSlotData")
+div(:class="{ 'vueperslide': true, 'vueperslide--active': $parent.slides.activeUid === _uid, 'vueperslide--visible': isSlideVisible }" :style="wrapperStyles" :aria-hidden="$parent.slides.activeUid === _uid ? 'false' : 'true'")
+  .vueperslide__image(v-if="image && $parent.conf.slideImageInside" :style="imageStyles")
+  .vueperslide__content-wrapper(v-show="!$parent.conf.slideContentOutside && (title || hasTitleSlotData || content || hasContentSlotData)")
+    .vueperslide__title(v-show="title || hasTitleSlotData")
       div(v-show="!$parent.conf.slideContentOutside && !title")
         slot(name="slideTitle")
       div(v-if="title" v-html="title")
-    div.vueperslide__content(v-if="content || hasContentSlotData")
+    .vueperslide__content(v-if="content || hasContentSlotData")
       div(v-show="!$parent.conf.slideContentOutside && !content")
         slot(name="slideContent")
       div(v-if="content" v-html="content")
@@ -46,19 +46,33 @@ export default {
     wrapperStyles () {
       return {
         ...(!this.$parent.conf.slideImageInside && this.image && { backgroundImage: `url(http://github.com/%3Cspan%20class=%22pl-s1%22%3E%3Cspan%20class=%22pl-pse%22%3E$%7B%3C/span%3E%3Cspan%20class=%22pl-c1%22%3Ethis%3C/span%3E.%3Cspan%20class=%22pl-smi%22%3Eimage%3C/span%3E%3Cspan%20class=%22pl-pse%22%3E%7D%3C/span%3E%3C/span%3E)` }),
-        ...(this.$parent.conf.visibleSlides && { width: 100 / this.$parent.conf.visibleSlides + '%' })
+        ...(this.$parent.conf.visibleSlides && { width: 100 / this.$parent.conf.visibleSlides + '%' }),
+        ...(this.$parent.conf.visibleSlides > 1 && this.$parent.conf.fade && { left: ((this.slideIndex % this.$parent.conf.visibleSlides) / this.$parent.conf.visibleSlides) * 100 + '%' })
       }
     },
     imageStyles () {
       return { ...(this.$parent.conf.slideImageInside && this.image && { backgroundImage: `url(http://github.com/%3Cspan%20class=%22pl-s1%22%3E%3Cspan%20class=%22pl-pse%22%3E$%7B%3C/span%3E%3Cspan%20class=%22pl-c1%22%3Ethis%3C/span%3E.%3Cspan%20class=%22pl-smi%22%3Eimage%3C/span%3E%3Cspan%20class=%22pl-pse%22%3E%7D%3C/span%3E%3C/span%3E)` }) }
     },
-  	hasTitleSlotData () {
-      let { slideTitle } = this.$slots
+    hasTitleSlotData () {
+      const { slideTitle } = this.$slots
       return slideTitle !== undefined
     },
-  	hasContentSlotData () {
-      let { slideContent } = this.$slots
+    hasContentSlotData () {
+      const { slideContent } = this.$slots
       return slideContent !== undefined
+    },
+    isSlideVisible () {
+      const activeSlideUid = this.$parent.slides.activeUid
+      const activeSlideIndex = this.slidesList.indexOf(activeSlideUid)
+      const visibleSlidesCount = this.$parent.conf.visibleSlides
+
+      return this.slideIndex >= activeSlideIndex && this.slideIndex < activeSlideIndex + visibleSlidesCount
+    },
+    slidesList () {
+      return this.$parent.slides.list.map(slide => slide._uid)
+    },
+    slideIndex () {
+      return this.slidesList.indexOf(this._uid)
     }
   }
 }
@@ -96,7 +110,7 @@ export default {
   opacity: 0;
   transition: .8s ease-in-out opacity;
 
-  &--active {
+  &--active, &--visible {
     z-index: 1;
     opacity: 1;
   }

dist/vueperslides.min.js.map

@@ -1,13 +1,13 @@
 <template lang="pug">
-div.vueperslides(:class="{ 'vueperslides--ready': isReady, 'vueperslides--fade': conf.fade, 'vueperslides--parallax': conf.parallax, 'vueperslides--touchable': touch.enabled && !disable, 'vueperslides--fixed-height': conf.fixedHeight, 'vueperslides--animated': transition.animated }" ref="vueperslides" aria-label="Slideshow" :style="vueperStyles")
-  div.vueperslide__content-wrapper.vueperslide__content-wrapper--outside-top(:class="conf.slideContentOutsideClass" v-if="conf.slideContentOutside === 'top'")
-    div.vueperslide__title(v-if="slides.count" v-html="getCurrentSlideData('title')")
-    div.vueperslide__content(v-if="slides.count" v-html="getCurrentSlideData('content')")
-
-  div.vueperslides__inner
-    div.vueperslides__parallax-wrapper(:style="'padding-bottom:' + (conf.slideRatio * 100) + '%'" aria-live="polite")
-      div.vueperslides__track(:class="{ 'vueperslides__track--dragging': touch.dragging, 'vueperslides__track--mousedown': mouseDown }" :style="trackStyles" ref="track")
-        div.vueperslides__track-inner(:style="trackInnerStyles")
+.vueperslides(:class="{ 'vueperslides--ready': isReady, 'vueperslides--fade': conf.fade, 'vueperslides--parallax': conf.parallax, 'vueperslides--touchable': touch.enabled && !disable, 'vueperslides--fixed-height': conf.fixedHeight, 'vueperslides--animated': transition.animated }" ref="vueperslides" aria-label="Slideshow" :style="vueperStyles")
+  .vueperslide__content-wrapper.vueperslide__content-wrapper--outside-top(:class="conf.slideContentOutsideClass" v-if="conf.slideContentOutside === 'top'")
+    .vueperslide__title(v-if="slides.count" v-html="getCurrentSlideData('title')")
+    .vueperslide__content(v-if="slides.count" v-html="getCurrentSlideData('content')")
+
+  .vueperslides__inner
+    .vueperslides__parallax-wrapper(:style="'padding-bottom:' + (conf.slideRatio * 100) + '%'" aria-live="polite")
+      .vueperslides__track(:class="{ 'vueperslides__track--dragging': touch.dragging, 'vueperslides__track--mousedown': mouseDown }" :style="trackStyles" ref="track")
+        .vueperslides__track-inner(:style="trackInnerStyles")
           vueper-slide.vueperslide--clone(v-if="slides.count && clones[0]" :clone="0" :title="clones[0].title" :content="clones[0].content" :image="clones[0].image" :style="clones[0].style" aria-hidden="true")
             div(v-if="clones[0].titleSlot" slot="slideTitle" v-html="clones[0].titleSlot")
             div(v-if="clones[0].contentSlot" slot="slideContent" v-html="clones[0].contentSlot")
@@ -16,9 +16,9 @@ div.vueperslides(:class="{ 'vueperslides--ready': isReady, 'vueperslides--fade':
             div(v-if="clones[1].titleSlot" slot="slideTitle" v-html="clones[1].titleSlot")
             div(v-if="clones[1].contentSlot" slot="slideContent" v-html="clones[1].contentSlot")
 
-    div.vueperslides__paused(v-if="$slots.pausedIcon")
+    .vueperslides__paused(v-if="$slots.pausedIcon")
       slot(name="pausedIcon")
-    div.vueperslides__arrows(:class="{ 'vueperslides__arrows--outside': conf.arrowsOutside }" v-if="conf.arrows && slides.count > 1 && !disable")
+    .vueperslides__arrows(:class="{ 'vueperslides__arrows--outside': conf.arrowsOutside }" v-if="conf.arrows && slides.count > 1 && !disable")
       button.vueperslides__arrow.vueperslides__arrow--prev(@click="previous()" v-show="!arrowPrevDisabled" aria-label="Previous" @keyup.left="previous()" @keyup.right="next()")
         slot(name="arrowLeft")
           svg(viewBox="0 0 24 24")
@@ -27,15 +27,15 @@ div.vueperslides(:class="{ 'vueperslides--ready': isReady, 'vueperslides--fade':
         slot(name="arrowRight")
           svg(viewBox="0 0 24 24")
             path(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")
-    div.vueperslides__bullets(v-if="conf.bullets && slides.count > 1 && !disable && !conf.bulletsOutside" role="tablist" aria-label="Slideshow navigation")
+    .vueperslides__bullets(v-if="conf.bullets && slides.count > 1 && !disable && !conf.bulletsOutside" role="tablist" aria-label="Slideshow navigation")
       button.vueperslides__bullet(:class="{ 'vueperslides__bullet--active': slides.current === i * conf.slideMultiple }" v-for="(item, i) in Math.ceil(slides.count / conf.slideMultiple)" :key="i" @click="goToSlide(i * conf.slideMultiple)" @keyup.left="previous()" @keyup.right="next()" ref="bullet")
         span {{ i + 1 }}
 
-  div.vueperslides__bullets.vueperslides__bullets--outside(v-if="conf.bullets && slides.count > 1 && !disable && conf.bulletsOutside")
+  .vueperslides__bullets.vueperslides__bullets--outside(v-if="conf.bullets && slides.count > 1 && !disable && conf.bulletsOutside")
     button.vueperslides__bullet(:class="{ 'vueperslides__bullet--active': slides.current === i * conf.slideMultiple }" v-for="(item, i) in Math.ceil(slides.count / conf.slideMultiple)" :key="i" @click="goToSlide(i * conf.slideMultiple)" @keyup.left="previous()" @keyup.right="next()" ref="bullet")
       span {{ i + 1 }}
 
-  div.vueperslide__content-wrapper.vueperslide__content-wrapper--outside-bottom(:class="conf.slideContentOutsideClass" v-if="conf.slideContentOutside === 'bottom'")
+  .vueperslide__content-wrapper.vueperslide__content-wrapper--outside-bottom(:class="conf.slideContentOutsideClass" v-if="conf.slideContentOutside === 'bottom'")
     div.vueperslide__title(v-if="slides.count" v-html="getCurrentSlideData('title')")
     div.vueperslide__content(v-if="slides.count" v-html="getCurrentSlideData('content')")
 </template>
@@ -805,13 +805,13 @@ export default {
       return conf
     },
     vueperStyles () {
-      return /^-?\d/.test(this.conf.fixedHeight) ? 'height: ' + this.conf.fixedHeight : null
+      return /^-?\d/.test(this.conf.fixedHeight) ? `height: ${this.conf.fixedHeight}` : null
     },
     trackStyles () {
       let styles = {}
 
       if (this.conf.parallax) {
-        styles.transform = 'translate3d(0, ' + this.parallaxData.translation + '%, 0)'
+        styles.transform = `translate3d(0, ${this.parallaxData.translation}%, 0)`
 
         // Increase browser optimizations by allocating more machine resource.
         // ! \\ To be used wisely so deactivate when not needed.
@@ -826,7 +826,7 @@ export default {
       styles.transitionDuration = this.transition.speed + 'ms'
 
       if (!this.conf.fade) {
-        styles.transform = 'translate3d(' + this.transition.currentTranslation + '%, 0, 0)'
+        styles.transform = `translate3d(${this.transition.currentTranslation}%, 0, 0)`
 
         // Increase browser optimizations by allocating more machine resource.
         // ! \\ To be used wisely so deactivate when not needed.