Skip to content

Commit

Permalink
#32 , #29 , #17
Browse files Browse the repository at this point in the history
  • Loading branch information
@Wlada
Wlada committed Jun 5, 2017
1 parent 4e5943b commit 4fd33b0
Show file tree
Hide file tree
Showing 8 changed files with 52 additions and 37 deletions.
4 changes: 2 additions & 2 deletions dist/vue-carousel-3d.min.js
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion docs/db.json
View file

Large diffs are not rendered by default.

8 changes: 7 additions & 1 deletion docs/source/examples/index.md
View file
Expand Up @@ -12,7 +12,7 @@ Without any options configured and seven slides added to 3D Carousel

Added @after-slide-change, @before-slide-change and @last-slide callbacks

<script async src="//jsfiddle.net/Wlada/dtwg9kr9/embed/result,js,html,css/?accentColor=405671"></script>
<script async src="//jsfiddle.net/Wlada/dtwg9kr9/embed/result,js,html/?accentColor=405671"></script>

## Controls

Expand All @@ -25,6 +25,12 @@ Arrow controls visible, clicking on slide is disabled and seven slides with capt

Autoplay enabled, number of displayed configured and seven slides added to 3D Carousel

<script async src="//jsfiddle.net/Wlada/stsao0e1/embed/result,js,html/?accentColor=405671"></script>

## Dynamic Slides

Add / Remove slides from 3D Carousel

<script async src="//jsfiddle.net/Wlada/p2927k3p/embed/result,js,html,css/?accentColor=405671"></script>


Expand Down
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.

2 changes: 1 addition & 1 deletion package.json
View file
@@ -1,6 +1,6 @@
{
"name": "vue-carousel-3d",
"version": "0.1.12",
"version": "0.1.13",
"description": "Beautiful, flexible and touch supported 3D Carousel for Vue.js",
"main": "dist/vue-carousel-3d.min.js",
"scripts": {
Expand Down
39 changes: 21 additions & 18 deletions src/Carousel3d.vue
View file
@@ -1,6 +1,6 @@
<template>
<div class="carousel-3d-container">
<div class="carousel-3d-slider">
<div class="carousel-3d-container" :style="{height: this.slideHeight + 'px'}">
<div class="carousel-3d-slider" :style="{width: this.slideWidth + 'px', height: this.slideHeight + 'px'}">
<slot></slot>
</div>
<controls v-if="controlsVisible"></controls>
Expand All @@ -12,7 +12,8 @@
import Controls from './Controls.vue'
import Slide from './Slide.vue'
const noop = () => {}
const noop = () => {
}
export default {
name: 'carousel3d',
Expand All @@ -26,43 +27,43 @@
default: false
},
perspective: {
type: Number,
type: [Number, String],
default: 35
},
display: {
type: Number,
type: [Number, String],
default: 5
},
loop: {
type: Boolean,
default: true
},
animationSpeed: {
type: Number,
type: [Number, String],
default: 500
},
dir: {
type: String,
default: 'rtl'
},
width: {
type: Number,
type: [Number, String],
default: 360
},
height: {
type: Number,
type: [Number, String],
default: 270
},
border: {
type: Number,
type: [Number, String],
default: 1
},
space: {
type: [Number, String],
default: 'auto'
},
startIndex: {
type: Number,
type: [Number, String],
default: 0
},
clickable: {
Expand All @@ -74,7 +75,7 @@
default: 10
},
inverseScaling: {
type: Number,
type: [Number, String],
default: 300
},
onLastSlide: {
Expand All @@ -94,7 +95,8 @@
lock: false,
dragOffset: 0,
dragStartX: 0,
mousedown: false
mousedown: false,
zIndex: 998
}
},
mixins: [
Expand All @@ -115,13 +117,13 @@
},
slideWidth () {
const vw = this.viewport
const sw = parseInt(this.width + (this.border * 2), 10)
const sw = parseInt(this.width) + (parseInt(this.border, 10) * 2)
return vw < sw ? vw : sw
},
slideHeight () {
const sw = parseInt(this.width + (this.border * 2), 10)
const sh = parseInt(this.height + (this.border * 2), 10)
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)
return this.slideWidth / ar
Expand Down Expand Up @@ -309,7 +311,8 @@
if (MutationObserver) {
const config = {
attributes: true,
data: true
childList: true,
characterData: true
}
this.mutationObserver = new MutationObserver(() => {
Expand Down Expand Up @@ -356,7 +359,7 @@
*/
computeData () {
this.total = this.getSlideCount()
this.currentIndex = this.startIndex > this.total - 1 ? this.total - 1 : this.startIndex
this.currentIndex = parseInt(this.startIndex) > this.total - 1 ? this.total - 1 : parseInt(this.startIndex)
this.viewport = this.$el.clientWidth
},
setSize () {
Expand All @@ -380,7 +383,6 @@
mounted () {
this.computeData()
this.attachMutationObserver()
this.setSize()
if (!this.$isServer) {
window.addEventListener('resize', this.setSize)
Expand All @@ -401,6 +403,7 @@

<style scoped>
.carousel-3d-container {
min-height: 1px;
width: 100%;
position: relative;
z-index: 0;
Expand Down
2 changes: 1 addition & 1 deletion src/Controls.vue
View file
Expand Up @@ -26,7 +26,7 @@
.carousel-3d-controls {
position: absolute;
top: 50%;
height: 60px;
height: 0;
margin-top: -30px;
left: 0;
width: 100%;
Expand Down
28 changes: 17 additions & 11 deletions src/Slide.vue
View file
Expand Up @@ -15,7 +15,8 @@
data () {
return {
parent: this.$parent,
styles: {}
styles: {},
zIndex: 999
}
},
computed: {
Expand All @@ -30,16 +31,16 @@
const lIndex = this.getSideIndex(this.parent.leftIndices)
if (rIndex >= 0 || lIndex >= 0) {
styles = rIndex >= 0 ? this.calculatePosition(rIndex, true) : this.calculatePosition(lIndex)
styles = rIndex >= 0 ? this.calculatePosition(rIndex, true, this.zIndex) : this.calculatePosition(lIndex, false, this.zIndex)
styles.opacity = 1
styles.visibility = 'visible'
}
if (this.parent.hasHiddenSlides) {
if (this.matchIndex(this.parent.leftOutIndex)) {
styles = this.calculatePosition(this.parent.leftIndices.length - 1)
styles = this.calculatePosition(this.parent.leftIndices.length - 1, false, this.zIndex)
} else if (this.matchIndex(this.parent.rightOutIndex)) {
styles = this.calculatePosition(this.parent.rightIndices.length - 1, true)
styles = this.calculatePosition(this.parent.rightIndices.length - 1, true, this.zIndex)
}
}
}
Expand Down Expand Up @@ -69,20 +70,21 @@
matchIndex (index) {
return (index >= 0) ? this.index === index : (this.parent.total + index) === this.index
},
calculatePosition (i, positive) {
calculatePosition (i, positive, zIndex) {
const leftRemain = (this.parent.space === 'auto')
? parseInt((i + 1) * (this.parent.width / 1.5), 10)
: parseInt((i + 1) * (this.parent.space), 10)
const transform = (positive)
? 'translateX(' + (leftRemain) + 'px) translateZ(-' + (this.parent.inverseScaling + ((i + 1) * 100)) + 'px) ' +
'rotateY(-' + this.parent.perspective + 'deg)'
: 'translateX(-' + (leftRemain) + 'px) translateZ(-' + (this.parent.inverseScaling + ((i + 1) * 100)) + 'px) ' +
'rotateY(' + this.parent.perspective + 'deg)'
? 'translateX(' + (leftRemain) + 'px) translateZ(-' + (parseInt(this.parent.inverseScaling) + ((i + 1) * 100)) + 'px) ' +
'rotateY(-' + parseInt(this.parent.perspective) + 'deg)'
: 'translateX(-' + (leftRemain) + 'px) translateZ(-' + (parseInt(this.parent.inverseScaling) + ((i + 1) * 100)) + 'px) ' +
'rotateY(' + parseInt(this.parent.perspective) + 'deg)'
const top = this.parent.space === 'auto' ? 0 : parseInt((i + 1) * (this.parent.space))
return {
transform: transform,
top: top
top: top,
zIndex: zIndex - (Math.abs(i) + 1)
}
},
goTo () {
Expand Down Expand Up @@ -112,6 +114,10 @@
box-sizing: border-box;
}
.carousel-3d-slide {
text-align: left;
}
.carousel-3d-slide img {
width: 100%;
}
Expand All @@ -120,7 +126,7 @@
opacity: 1 !important;
visibility: visible !important;
transform: none !important;
z-index: 99;
z-index: 999;
}
</style>

0 comments on commit 4fd33b0

Please sign in to comment.