CSS Card with Animated Carousel Design (Code)

<div class="carousel">
    <div class="carousel-inner">
        <div class="card" style="background-image: url('https://code2care.org/220x320.png?text=Card+1')">Card 1 Caption</div>
        <div class="card" style="background-image: url('https://code2care.org/220x320.png?text=Card+2')">Card 2 Caption</div>
        <div class="card" style="background-image: url('https://code2care.org/220x320.png?text=Card+3')">Card 3 Caption</div>
    </div>
    <div class="carousel-nav">
        <div class="carousel-dot active" onclick="showCard(0)"></div>
        <div class="carousel-dot" onclick="showCard(1)"></div>
        <div class="carousel-dot" onclick="showCard(2)"></div>
    </div>
    <div class="carousel-caption" id="carousel-caption">Card 1</div>
</div>
    

.carousel {
    width: 220px;
    height: 360px;
    position: relative;
    margin: 0 auto;
    overflow: hidden;
    border-radius: 15px;
}

.carousel-inner {
    display: flex;
    transition: transform 0.6s ease;
    width: 300%; /* 3 cards */
    height: 320px;
}

.card {
    width: 220px;
    height: 320px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    font-weight: bold;
    color: white;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
    background-size: cover;
    background-position: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    border-radius: 15px 15px 0 0;
}

.carousel-nav {
    position: absolute;
    bottom: 50px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
}

.carousel-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
}

.carousel-dot.active {
    background-color: white;
}

.carousel-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 10px;
    text-align: center;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
}
    

function showCard(index) {
    const carousel = document.querySelector('.carousel-inner');
    const dots = document.querySelectorAll('.carousel-dot');
    const caption = document.getElementById('carousel-caption');
    
    carousel.style.transform = `translateX(-${index * 33.33}%)`;
    
    dots.forEach((dot, i) => {
        dot.classList.toggle('active', i === index);
    });

    caption.textContent = `Card ${index + 1}`;
}

function showTab(tabId) {
    var tabs = document.querySelectorAll('.tab');
    var contents = document.querySelectorAll('.tab-content');
    
    tabs.forEach(function(tab) {
        tab.classList.remove('active');
    });
    
    contents.forEach(function(content) {
        content.classList.remove('active');
    });
    
    document.querySelector('.tab[onclick="showTab(\'' + tabId + '\')"]').classList.add('active');
    document.getElementById(tabId).classList.add('active');
}