Skip to content

Previous slides block the current slides when you use wallop--fade.css #54

@Gilberto06

Description

@Gilberto06

Hello, I love this library but I think improving this tiny detail could make it even better.

If the current slide have buttons or a div with scroll they won't work unless you send the previous slides back (z-index: 0) at the end of the animation.

You'll probably find a better solution but changing this in the wallop--fade.css fixed the issue for me:

/*
.Wallop--fade .Wallop-item--hidePrevious,
.Wallop--fade .Wallop-item--hideNext { z-index: 2; }*/
.Wallop--fade .Wallop-item--showPrevious,
.Wallop--fade .Wallop-item--showNext { z-index: 1; }

/========== FADE ANIMATIONS ==========/
@-webkit-keyframes fadeOut {
0% {
opacity: 1;
z-index: 2;
}
99% {
opacity: 0;
z-index: 2;
}
100% {
opacity: 0;
z-index: 0;
}
}
@-moz-keyframes fadeOut {
0% {
opacity: 1;
z-index: 2;
}
99% {
opacity: 0;
z-index: 2;
}
100% {
opacity: 0;
z-index: 0;
}
}
@-ms-keyframes fadeOut {
0% {
opacity: 1;
z-index: 2;
}
99% {
opacity: 0;
z-index: 2;
}
100% {
opacity: 0;
z-index: 0;
}
}
@Keyframes fadeOut {
0% {
opacity: 1;
z-index: 2;
}
99% {
opacity: 0;
z-index: 2;
}
100% {
opacity: 0;
z-index: 0;
}
}

Metadata

Metadata

Assignees

No one assigned

    Labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions