Web Designer Wall

Snippets Animation

Bootstrap 5 Waterwheel Card Carousel

A cascading waterwheel carousel where the active card is enlarged at the centre and neighbouring cards fall away on both sides, with previous, next and autoplay controls. Built with Bootstrap 5 utilities and a short vanilla script, with keyboard support.

Bootstrap 5 No jQuery Jan 2020 3.7K views 

<section class="wdw-stage">
  <div class="container" style="max-width:1100px">
    <div class="text-center mb-4 mb-md-5">
      <span class="wdw-eyebrow">Workspace</span>
      <h1 class="wdw-heading display-6 mt-1 mb-0">Everything in one place</h1>
    </div>
    <div class="ww" role="region" aria-roledescription="carousel" aria-label="Workspace sections" tabindex="0">
      <div class="ww-stage">
        <article class="ww-item" data-i="0" role="group" aria-roledescription="slide" aria-label="1 of 7"><div class="ww-card wdw-card"><span class="ww-badge"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.85" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20V3H6.5A2.5 2.5 0 0 0 4 5.5ZM4 19.5V21h16"/></svg></span><h2 class="h5 fw-bold mb-1">Library</h2><p class="small wdw-muted mb-0">Browse every document and guide</p></div></article>
        <article class="ww-item" data-i="1" role="group" aria-roledescription="slide" aria-label="2 of 7"><div class="ww-card wdw-card"><span class="ww-badge"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.85" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9 18h6M10 22h4M12 2a7 7 0 0 0-4 12.7c.6.5 1 1.3 1 2.3h6c0-1 .4-1.8 1-2.3A7 7 0 0 0 12 2Z"/></svg></span><h2 class="h5 fw-bold mb-1">Know-how</h2><p class="small wdw-muted mb-0">Playbooks from the team</p></div></article>
        <article class="ww-item" data-i="2" role="group" aria-roledescription="slide" aria-label="3 of 7"><div class="ww-card wdw-card"><span class="ww-badge"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.85" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20.6 13.4 13.4 20.6a2 2 0 0 1-2.8 0L2 12V2h10l8.6 8.6a2 2 0 0 1 0 2.8ZM7 7h.01"/></svg></span><h2 class="h5 fw-bold mb-1">Add taxonomy</h2><p class="small wdw-muted mb-0">Organise content with tags</p></div></article>
        <article class="ww-item" data-i="3" role="group" aria-roledescription="slide" aria-label="4 of 7"><div class="ww-card wdw-card"><span class="ww-badge"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.85" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 8v13H3V8M1 3h22v5H1zM10 12h4"/></svg></span><h2 class="h5 fw-bold mb-1">Archive</h2><p class="small wdw-muted mb-0">Everything we retired</p></div></article>
        <article class="ww-item" data-i="4" role="group" aria-roledescription="slide" aria-label="5 of 7"><div class="ww-card wdw-card"><span class="ww-badge"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.85" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2M9 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8ZM23 21v-2a4 4 0 0 0-3-3.9M16 3.1a4 4 0 0 1 0 7.8"/></svg></span><h2 class="h5 fw-bold mb-1">Community</h2><p class="small wdw-muted mb-0">Ask, answer, share</p></div></article>
        <article class="ww-item" data-i="5" role="group" aria-roledescription="slide" aria-label="6 of 7"><div class="ww-card wdw-card"><span class="ww-badge"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.85" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 3v18h18M7 15l4-4 3 3 5-6"/></svg></span><h2 class="h5 fw-bold mb-1">Reports</h2><p class="small wdw-muted mb-0">Weekly numbers at a glance</p></div></article>
        <article class="ww-item" data-i="6" role="group" aria-roledescription="slide" aria-label="7 of 7"><div class="ww-card wdw-card"><span class="ww-badge"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.85" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6ZM19.4 15a1.7 1.7 0 0 0 .3 1.8l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.7 1.7 0 0 0-1.8-.3 1.7 1.7 0 0 0-1 1.5V21a2 2 0 1 1-4 0v-.1a1.7 1.7 0 0 0-1.1-1.5 1.7 1.7 0 0 0-1.8.3l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1a1.7 1.7 0 0 0 .3-1.8 1.7 1.7 0 0 0-1.5-1H3a2 2 0 1 1 0-4h.1a1.7 1.7 0 0 0 1.5-1.1 1.7 1.7 0 0 0-.3-1.8l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1a1.7 1.7 0 0 0 1.8.3H9a1.7 1.7 0 0 0 1-1.5V3a2 2 0 1 1 4 0v.1a1.7 1.7 0 0 0 1 1.5 1.7 1.7 0 0 0 1.8-.3l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1.7 1.7 0 0 0-.3 1.8V9a1.7 1.7 0 0 0 1.5 1H21a2 2 0 1 1 0 4h-.1a1.7 1.7 0 0 0-1.5 1Z"/></svg></span><h2 class="h5 fw-bold mb-1">Settings</h2><p class="small wdw-muted mb-0">Tune the workspace</p></div></article>
      </div>
      <div class="d-flex justify-content-center align-items-center gap-3 mt-4">
        <button type="button" class="btn btn-outline-primary rounded-circle p-0" style="width:44px" data-dir="-1" aria-label="Previous"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.25" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m15 18-6-6 6-6"/></svg></button>
        <button type="button" class="btn btn-primary rounded-pill px-4" data-play aria-pressed="false">Play</button>
        <button type="button" class="btn btn-outline-primary rounded-circle p-0" style="width:44px" data-dir="1" aria-label="Next"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.25" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m9 18 6-6-6-6"/></svg></button>
      </div>
    </div>
  </div>
</section>

Built on Bootstrap 5.3.8 with plain JavaScript — no jQuery. Supports light and dark mode via data-bs-theme.

Related snippets

More animation snippets