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;
}
}
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;
}
}