github
/
element
mirror of https://github.com/ElemeFE/element
1
0
Fork 0
Code Issues Releases Wiki Activity

Carousel: apply infinite sliding in non-card mode (#2622)

pull/2672/head
杨奕 2017-02-04 18:35:09 +08:00 committed by baiyaaaaa
parent 58195fc69d
commit 7628fc0e41
3 changed files with 8 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
packages/carousel/src/item.vue
View File

@ -70,11 +70,10 @@
translateItem(index, activeIndex) { translateItem(index, activeIndex) {
const parentWidth = this.$parent.$el.offsetWidth; const parentWidth = this.$parent.$el.offsetWidth;
const length = this.$parent.items.length; const length = this.$parent.items.length;
if (index !== activeIndex && length > 2) {
index = this.processIndex(index, activeIndex, length);
}
if (this.$parent.type === 'card') { if (this.$parent.type === 'card') {
if (index !== activeIndex && length > 2) {
index = this.processIndex(index, activeIndex, length);
}
this.inStage = Math.round(Math.abs(index - activeIndex)) <= 1; this.inStage = Math.round(Math.abs(index - activeIndex)) <= 1;
this.active = index === activeIndex; this.active = index === activeIndex;
this.translate = this.calculateTranslate(index, activeIndex, parentWidth); this.translate = this.calculateTranslate(index, activeIndex, parentWidth);

5
packages/theme-default/src/carousel-item.css
View File

@ -13,10 +13,13 @@
display: inline-block; display: inline-block;
transition: .4s ease-in-out; transition: .4s ease-in-out;
overflow: hidden; overflow: hidden;
z-index: calc(var(--index-normal) - 1);
@when active {
z-index: calc(var(--index-normal) + 1);
}
@modifier card { @modifier card {
width: 50%; width: 50%;
z-index: calc(var(--index-normal) - 1);
&.is-in-stage { &.is-in-stage {
cursor: pointer; cursor: pointer;
z-index: var(--index-normal); z-index: var(--index-normal);

1
packages/theme-default/src/carousel.css
View File

@ -55,6 +55,7 @@
transform: translateX(-50%); transform: translateX(-50%);
margin: 0; margin: 0;
padding: 0; padding: 0;
z-index: calc(var(--index-normal) + 1);
@modifier outside { @modifier outside {
bottom: calc(var(--carousel-indicator-height) + var(--carousel-indicator-padding-vertical) * 2); bottom: calc(var(--carousel-indicator-height) + var(--carousel-indicator-padding-vertical) * 2);