Skip to content

Commit

Permalink
Merge 49f0dd0 into 43dbb60
Browse files Browse the repository at this point in the history
  • Loading branch information
@Adstokoe19
Adstokoe19 committed Jan 12, 2020
2 parents 43dbb60 + 49f0dd0 commit 6c8aeee
Show file tree
Hide file tree
Showing 5 changed files with 77 additions and 38 deletions.
4 changes: 2 additions & 2 deletions dist/vue-carousel-3d.min.js
View file

Large diffs are not rendered by default.

4 changes: 2 additions & 2 deletions docs/themes/vue/source/js/vue-carousel-3d.min.js
View file

Large diffs are not rendered by default.

96 changes: 65 additions & 31 deletions play/index.js
View file
Original file line number Diff line number Diff line change
@@ -1,47 +1,47 @@
/* eslint-disable */

import Vue from 'vue'
import { play } from 'vue-play'
import Carousel3d from '../src/Carousel3d.vue'
import Slide from '../src/Slide.vue'

play('Carousel3d', module)

const slides = [
{
title: 'Slide 1',
desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim, maxime.',
src: 'https://placehold.it/360x270'
desc: '',
src: 'https://picsum.photos/600/400'
},
{
title: 'Slide 2',
desc: 'Lorem ipsum dolor sit amet ',
src: 'https://placehold.it/360x270'
src: 'https://picsum.photos/600/400'
},
{
title: 'Slide 3',
desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. ',
src: 'https://placehold.it/360x270'
src: 'https://picsum.photos/600/400'
},
{
title: 'Slide 4',
desc: 'Lorem ipsum dolor sit amet, Enim, maxime.',
src: 'https://placehold.it/360x270'
src: 'https://picsum.photos/600/400'
},
{
title: 'Slide 5',
desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim, maxime.',
src: 'https://placehold.it/360x270'
src: 'https://picsum.photos/600/400'
},
{
title: 'Slide 6',
desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim, maxime.',
src: 'https://placehold.it/360x270'
src: 'https://picsum.photos/600/400'
},
{
title: 'Slide 7',
desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim, maxime.',
src: 'https://placehold.it/360x270'
src: 'https://picsum.photos/600/400'
},
{
title: 'Slide 8',
Expand All @@ -59,7 +59,7 @@ const slides = [
src: 'https://placehold.it/360x270'
}
]

play('Carousel3d', module)
.add('default', {
template: `<carousel-3d>
Expand All @@ -79,9 +79,11 @@ play('Carousel3d', module)
}
})
.add('images', {
template: `<carousel-3d>
<slide v-for="(slide, i) in slides" :index="i">
template: `<carousel-3d @before-slide-change="onBeforeSlideChange" :adaptiveHeight="true" :height="height">
<slide v-for="(slide, i) in slides" :index="i" ref="slide">
<img :src="slide.src">
<h1>{{slide.title}}</h1>
<p>{{slide.desc}}</p>
</slide>
</carousel-3d>`,
components: {
Expand All @@ -90,11 +92,42 @@ play('Carousel3d', module)
},
data () {
return {
slides: slides
slides: slides,
index: 0,
height: 0
}
}
},
mounted() {
let timeout = false, // holder for timeout id
delay = 250; // delay after event is "complete" to run callback
// window.addEventListener("resize", this.updateHeight);
// window.resize event listener
window.addEventListener('resize', () => {
// clear the timeout
clearTimeout(timeout);
// start timing for event "completion"
timeout = setTimeout(this.updateHeight, delay);
});
// allow DOM content to load
setTimeout(this.updateHeight, 400);
},
destroyed() {
window.removeEventListener("resize", this.updateHeight);
},
methods: {
updateHeight() {
// calculate slide height and set this to the data object
this.height = this.$refs.slide[this.index].$el.clientHeight;
},
onBeforeSlideChange(index) {
// update the data object index
this.index = index;
// get height of next slide
this.updateHeight();
},
},
})

.add('autoplay enabled', {
template: `<carousel-3d :autoplay="true">
<slide v-for="(slide, i) in slides" :index="i">
Expand All @@ -111,7 +144,7 @@ play('Carousel3d', module)
}
}
})

.add('num of displayed', {
template: `<carousel-3d :display="3">
<slide v-for="(slide, i) in slides" :index="i">
Expand All @@ -128,7 +161,7 @@ play('Carousel3d', module)
}
}
})

.add('even number displayed', {
template: `<carousel-3d :display="6" :bias="'right'">
<slide v-for="(slide, i) in slides" :index="i">
Expand All @@ -145,7 +178,7 @@ play('Carousel3d', module)
}
}
})

.add('slides clickable', {
template: `<carousel-3d :clickable="true">
<slide v-for="(slide, i) in slides" :index="i">
Expand All @@ -162,7 +195,7 @@ play('Carousel3d', module)
}
}
})

.add('loop disabled', {
template: `<carousel-3d :loop="false">
<slide v-for="(slide, i) in slides" :index="i">
Expand All @@ -179,7 +212,7 @@ play('Carousel3d', module)
}
}
})

.add('controls visible', {
template: `<carousel-3d :controls-visible="true">
<slide v-for="(slide, i) in slides" :index="i">
Expand All @@ -196,9 +229,9 @@ play('Carousel3d', module)
}
}
})

.add('custom controls', {
template: `<carousel-3d :controls-visible="true" :controls-prev-html="'&#10092;'" :controls-next-html="'&#10093;'"
template: `<carousel-3d :controls-visible="true" :controls-prev-html="'&#10092;'" :controls-next-html="'&#10093;'"
:controls-width="30" :controls-height="60">
<slide v-for="(slide, i) in slides" :index="i">
<img :src="slide.src">
Expand All @@ -214,7 +247,7 @@ play('Carousel3d', module)
}
}
})

.add('ltr direction', {
template: `<carousel-3d :dir="'ltr'">
<slide v-for="(slide, i) in slides" :index="i">
Expand All @@ -231,7 +264,7 @@ play('Carousel3d', module)
}
}
})

.add('callbacks', {
template: `<carousel-3d :on-slide-change="onSlideChanged" :on-last-slide="onLastSlide" :on-main-slide-click="onMainSlideClick">
<slide v-for="(slide, i) in slides" :index="i" >
Expand Down Expand Up @@ -259,7 +292,7 @@ play('Carousel3d', module)
}
}
})

.add('add/remove slides', {
template: `<div>
<carousel-3d :count="slideCount">
Expand Down Expand Up @@ -290,7 +323,7 @@ play('Carousel3d', module)
}
}
})

.add('callbacks through emit', {
template: `<carousel-3d
@before-slide-change="onSlideChange"
Expand Down Expand Up @@ -321,7 +354,7 @@ play('Carousel3d', module)
}
}
})

.add('3d Disabled', {
template: `<carousel-3d :disable3d="true" :space="370" :clickable="false" :controls-visible="true">
<slide v-for="(slide, i) in slides" :index="i">
Expand Down Expand Up @@ -355,8 +388,8 @@ play('Carousel3d', module)
<template slot-scope="{ index, isCurrent, leftIndex, rightIndex }">
<div :style="{ textAlign: leftIndex >= 0 ? 'right' : 'left' }">
right {{ rightIndex }} <br>
left {{ leftIndex }}
</div>
left {{ leftIndex }}
</div>
<img :data-index="index" :data-is-current="isCurrent" :src="slide.src">
</template>
</slide>
Expand All @@ -371,3 +404,4 @@ play('Carousel3d', module)
}
}
})

9 changes: 7 additions & 2 deletions src/Carousel3d.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,10 @@
Slide
},
props: {
adaptiveHeight: {
type: Boolean,
default: false
},
count: {
type: [Number, String],
default: 0
Expand Down Expand Up @@ -162,8 +166,9 @@
const sw = parseInt(this.width, 10) + (parseInt(this.border, 10) * 2)
const sh = parseInt(parseInt(this.height) + (this.border * 2), 10)
const ar = this.calculateAspectRatio(sw, sh)
const h = this.adaptiveHeight ? sh : this.slideWidth / ar
return this.slideWidth / ar
return h
},
visible () {
const v = (this.display > this.total) ? this.total : this.display
Expand Down Expand Up @@ -456,7 +461,7 @@
width: 100%;
position: relative;
z-index: 0;
overflow: hidden;
overflow: hidden;
margin: 20px auto;
box-sizing: border-box;
}
Expand Down
2 changes: 1 addition & 1 deletion src/Slide.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,7 @@
return Object.assign(styles, {
'border-width': this.parent.border + 'px',
'width': this.parent.slideWidth + 'px',
'height': this.parent.slideHeight + 'px',
'height': this.parent.adaptiveHeight ? 'auto' : this.parent.slideHeight + 'px',
'transition': ' transform ' + this.parent.animationSpeed + 'ms, ' +
' opacity ' + this.parent.animationSpeed + 'ms, ' +
' visibility ' + this.parent.animationSpeed + 'ms'
Expand Down

0 comments on commit 6c8aeee

Please sign in to comment.