diff --git a/css/carousel.css b/css/carousel.css
index d756c5f..ce7b4f0 100644
--- a/css/carousel.css
+++ b/css/carousel.css
@@ -2,7 +2,6 @@
position: relative;
display: flex;
padding-right: 30px;
- cursor: pointer;
}
#features .row:nth-child(odd) .stack {
@@ -62,17 +61,20 @@
}
}
+
+/*
+Commented lines make the animation more flexible
+with different numbers of slides
+*/
@keyframes fade-out {
0% {
- /* z-index: 3; */
- bottom: 0;
+ /* bottom: 0; */
opacity: 1;
}
100% {
- /* z-index: 0; */
opacity: 0;
- left: calc(-200% - 10px);
- bottom: -30px;
+ /* left: calc(-200% - 10px); */
+ /* bottom: -30px; */
scale: 1.05;
}
}
diff --git a/index.html b/index.html
index dc402c7..cdb3d48 100644
--- a/index.html
+++ b/index.html
@@ -238,8 +238,6 @@
alt="The RetroDECK and ES-DE logos on a black screen" />
-
diff --git a/scripts/carousel.js b/scripts/carousel.js
index 68abe59..50e3ab5 100644
--- a/scripts/carousel.js
+++ b/scripts/carousel.js
@@ -1,9 +1,12 @@
-let timing = 400;
+let timing = 250;
let stacks = document.getElementsByClassName('stack');
for (let i = 0; i < stacks.length; i++) {
[...stacks[i].children].reverse().forEach(j => stacks[i].append(j));
- stacks[i].addEventListener("click", swap);
+ if (stacks[i].children.length > 1) {
+ stacks[i].addEventListener('click', swap);
+ stacks[i].style.cursor = 'pointer';
+ }
}
function swap(e) {
@@ -14,11 +17,10 @@ function swap(e) {
setTimeout(() => {
thisTarget.style.animation = `fade-in ${timing}ms ease-out forwards`;
this.prepend(thisTarget);
- // thisTarget.style = '';
-
}, timing);
setTimeout(() => {
+ // this.prepend(thisTarget);
thisTarget.style = '';
}, 2*timing);
}
\ No newline at end of file