How can I make these stacked cards automatically change or swipe and jump over next card without having to click on it?
HTML
<style>
.flipcard { position: absolute; height: 100%; width: 100%; z-index: 100; transform-style: preserve-3d; }
.innercard { position: absolute; height: 250px; width: 100%; border-radius: 15px; backdrop-filter: blur(25px); background: rgba(255, 255, 255, 0.1); box-shadow: 0 10px 40px rgba(255, 255, 255, 0.20); border: 1px solid rgba(255, 255, 255, 0.1); backface-visibility: hidden; text-align: center; font-size: 2rem; transform: translate(-50%, -50%); justify-content: center; align-content: center; }
.innercard:nth-last-child(n + 3) { --y: calc(-5% - 25px); transform: translate(-5%, var(--y)) scale(0.95); box-shadow: 0 0 1px 1px #00000003; }
.innercard:nth-last-child(2) { --y: calc(-5% - 10px); transform: translate(-5%, var(--y)) scale(1); }
.innercard:nth-last-child(1) { --y: calc(-5% + 10px); transform: translate(-5%, var(--y)) scale(1.05); }
@keyframes swap {
50% { transform: translate(-50%, calc(var(--y) -250px)) scale(0.85) rotate(-5deg); animation-timing-function: ease-in; }
100% { transform: translate(-50%, calc(var(--y) -15px)) scale(0.85); z-index: -1; }
}
</style>
<div class="subbottom" style="background-color: #011b33;">
<br />
<div class="col-sm-11" style="width: 100%; margin: 0 auto; padding: 5px; margin-top: 3%;">
<div class="row" style="margin: 0 auto; width: 100%; margin-top: 2%; margin-bottom: 0%;">
<div class="col-sm-9" style="margin: 0 auto; padding: 6px; color: #ffffff;">
<div style="margin: 0 auto; margin-top: 3%; font-family: 'Mulish', sans-serif; font-weight: 900; font-size: 7.1vmin; line-height: normal; vertical-align: baseline; letter-spacing: 0px; word-spacing: 0px; text-align: start;">
<span style="margin: 0 auto;">This is the second Div header</span>
</div>
</div>
<div class="col-sm-3" style="margin: 0 auto; padding: 6px;"></div>
</div>
<div class="row" style="width: 100%; margin: 0 auto;">
<div class="col-sm-5" style="margin: 0 auto; padding: 5px; margin-bottom: 0%;">
<div style="line-height: normal; vertical-align: baseline; letter-spacing: 0px; word-spacing: 0px; text-align: start;">
<h5 style="color: #1bb6f4;">Div Sub Header</h5>
<label style="color: #ffffff; font-size: 15.90px;">This section will contain detailed contents</label>
</div>
</div>
<div class="col-sm-1" style="margin: 0 auto;"></div>
<div class="col-sm-6" style="width: 100%; margin: 0 auto; padding: 5px; margin-bottom: 0%; text-align: center; position: relative;">
<div class="sect">
<div class="flipcard">
<div class="innercard font-face">FRONT CARD 1</div>
<div class="innercard font-face">FRONT CARD 2</div>
<div class="innercard font-face">FRONT CARD 3</div>
</div>
</div>
</div>
<br />
</div>
</div>
</div>
Javascript
<script>
let flipcard = document.querySelector(".flipcard");
[...flipcard.children].reverse().forEach(i => flipcard.append(i));
flipcard.addEventListener("click", swap);
function swap(e) {
let innercard = document.querySelector(".innercard:last-child");
if (e.target !== innercard) return;
innercard.style.animation = "swap 0ms forwards";
setTimeout(() => {
innercard.style.animation = "";
flipcard.prepend(innercard);
}, 300);
}
</script>
