Guide - Custom Carousel Widget for Custom Pages

pmo
Docebian

This guide walks you through building a 5-slide, click-to-navigate image carousel for a Docebo widget page — pure HTML + CSS, no JavaScript. It uses hidden radio inputs and CSS :checked selectors to drive the visible slide state so learners control the pacing (no autoplay). This pattern was last verified in August 2026 against the current Docebo navigation experience.

Click here to see the widget live

👉 Before you start: this is community-contributed guidance, not an official Docebo support article. If a future platform update strips input elements or disallows :checked/sibling CSS, the arrows may stop working — please flag that in the comments if it happens so we can update this guide.

Quick overview - What this widget guide gives you

A centered "hero" slide with title, subtitle and CTA button.
Two dimmed slides visible on each side (near/far), with smooth transitions.
Prev/Next arrows that loop both directions (5 → 1 and 1 → 5).
Fully responsive CSS and class scoping so the widget won't clash with your site styles.

Known limitations (please read)

Does not work inside Docebo mobile apps (Go.Learn or branded mobile app). This is browser-only HTML/CSS output.
No keyboard navigation — pure CSS radios + labels don’t meet Docebo’s keyboard-accessibility guideline. If learners rely on keyboard-only access, do not use this as the sole access path. See Docebo's accessibility guidance for custom code for alternatives.
Built for exactly 5 slides. Changing slide count requires recalculating the CSS position/state blocks (see Edge Cases).
No autoplay and no dot jump navigation in this version — only sequential prev/next clicks

Prerequisites

Comfortable adding a Custom HTML/WYSIWYG widget to a page in the Composer and switching the widget to HTML mode. Basic familiarity with editing HTML attributes and image URLs will help with customization.

Useful references:

Main instructions (copy/paste)

1. Open the Composer, add a Custom HTML/WYSIWYG widget and switch it to HTML mode.
2. Paste the full HTML block below into the widget's HTML field.
3. Paste the full CSS block (further down) into the widget's CSS field (or into your theme CSS area if you prefer).
4. Save and preview in wide and narrow browser widths; click the arrows to confirm navigation and looping.

HTML (paste into the widget HTML)

<div class="carousel-widget-dw47k">

  <!-- Seed state: slide 3 is centered by default -->
  <label class="carousel-state-seed-dw47k">
    <input type="radio" name="carousel-state-dw47k" class="carousel-radio-dw47k carousel-state-3-dw47k" checked="checked" value="" />
  </label>

  <div class="gallery-dw47k">

    <div class="gallery-header-dw47k">
      <h1 class="gallery-header-title-dw47k">Never Stop Learning</h1>
      <p class="gallery-header-subtitle-dw47k">
        Learn, Empower and reach the next level of your career.
      </p>
    </div>

    <div class="gallery-container-dw47k">

      <div class="gallery-item-dw47k gallery-item-1-dw47k" style="background-image:url(&quot;https://cdn1.dcbstatic.com/files/p/i/pierreandignac_docebosaas_com/userfiles/13053/rectangle_23891.png&quot;);background-repeat:no-repeat;background-size:cover;">
        <div class="gallery-item-content-dw47k">
          <div class="gallery-item-title-dw47k">Onboarding Program</div>
          <div class="gallery-item-subtitle-dw47k">
            Begin your journey with us!
          </div>
          <a class="button-start-dw47k" href="https://pierreandignac.docebosaas.com/learn/course/16/negotiating-with-impact">
            Go to course
          </a>
        </div>
        <div class="gallery-item-overlay-dw47k"></div>
      </div>

      <div class="gallery-item-dw47k gallery-item-2-dw47k" style="background-image:url(&quot;https://cdn1.dcbstatic.com/files/p/i/pierreandignac_docebosaas_com/userfiles/13053/Slider4.png&quot;);background-repeat:no-repeat;background-size:cover;">
        <div class="gallery-item-content-dw47k">
          <div class="gallery-item-title-dw47k">AI in 2050</div>
          <div class="gallery-item-subtitle-dw47k">
            Are you ready for the future?
          </div>
          <a class="button-start-dw47k" href="https://pierreandignac.docebosaas.com/learn/course/16/negotiating-with-impact">
            Go to course
          </a>
        </div>
        <div class="gallery-item-overlay-dw47k"></div>
      </div>

      <div class="gallery-item-dw47k gallery-item-3-dw47k" style="background-image:url(&quot;https://cdn1.dcbstatic.com/files/p/i/pierreandignac_docebosaas_com/userfiles/13053/Slider1.png&quot;);background-repeat:no-repeat;background-size:cover;">
        <div class="gallery-item-content-dw47k">
          <div class="gallery-item-title-dw47k">
            Shifting your organization to Sustainable strategies
          </div>
          <div class="gallery-item-subtitle-dw47k">
            Discover our sustainability playbook and much more
          </div>
          <a class="button-start-dw47k" href="https://pierreandignac.docebosaas.com/learn/course/16/negotiating-with-impact">
            Go to course
          </a>
        </div>
        <div class="gallery-item-overlay-dw47k"></div>
      </div>

      <div class="gallery-item-dw47k gallery-item-4-dw47k" style="background-image:url(&quot;https://cdn1.dcbstatic.com/files/p/i/pierreandignac_docebosaas_com/userfiles/13053/Slider2c.png&quot;);background-repeat:no-repeat;background-size:cover;">
        <div class="gallery-item-content-dw47k">
          <div class="gallery-item-title-dw47k">Leadership Program</div>
          <div class="gallery-item-subtitle-dw47k">
            Limited sessions, book now!
          </div>
          <a class="button-start-dw47k" href="https://pierreandignac.docebosaas.com/learn/course/15/people-management">
            Go to course
          </a>
        </div>
        <div class="gallery-item-overlay-dw47k"></div>
      </div>

      <div class="gallery-item-dw47k gallery-item-5-dw47k" style="background-image:url(&quot;https://cdn1.dcbstatic.com/files/p/i/pierreandignac_docebosaas_com/userfiles/13053/Slider5.png&quot;);background-repeat:no-repeat;background-size:cover;">
        <div class="gallery-item-content-dw47k">
          <div class="gallery-item-title-dw47k">
            Optimising Processes &amp; tools
          </div>
          <div class="gallery-item-subtitle-dw47k">
            Discover how to build your own Portfolio 2.0
          </div>
          <a class="button-start-dw47k" href="https://pierreandignac.docebosaas.com/learn/course/16/negotiating-with-impact">
            Go to course
          </a>
        </div>
        <div class="gallery-item-overlay-dw47k"></div>
      </div>


      <!-- STATE 1 CONTROLS -->
      <div class="gallery-center-dw47k gallery-controls-1-dw47k">

        <label class="gallery-arrow-dw47k gallery-arrow-prev-dw47k">
          ‹
          <input type="radio" name="carousel-state-dw47k" class="carousel-radio-dw47k carousel-state-5-dw47k" value="" />
        </label>

        <label class="gallery-arrow-dw47k gallery-arrow-next-dw47k">
          ›
          <input type="radio" name="carousel-state-dw47k" class="carousel-radio-dw47k carousel-state-2-dw47k" value="" />
        </label>

      </div>


      <!-- STATE 2 CONTROLS -->
      <div class="gallery-center-dw47k gallery-controls-2-dw47k">

        <label class="gallery-arrow-dw47k gallery-arrow-prev-dw47k">
          ‹
          <input type="radio" name="carousel-state-dw47k" class="carousel-radio-dw47k carousel-state-1-dw47k" value="" />
        </label>

        <label class="gallery-arrow-dw47k gallery-arrow-next-dw47k">
          ›
          <input type="radio" name="carousel-state-dw47k" class="carousel-radio-dw47k carousel-state-3-dw47k" value="" />
        </label>

      </div>


      <!-- STATE 3 CONTROLS -->
      <div class="gallery-center-dw47k gallery-controls-3-dw47k">

        <label class="gallery-arrow-dw47k gallery-arrow-prev-dw47k">
          ‹
          <input type="radio" name="carousel-state-dw47k" class="carousel-radio-dw47k carousel-state-2-dw47k" value="" />
        </label>

        <label class="gallery-arrow-dw47k gallery-arrow-next-dw47k">
          ›
          <input type="radio" name="carousel-state-dw47k" class="carousel-radio-dw47k carousel-state-4-dw47k" value="" />
        </label>

      </div>


      <!-- STATE 4 CONTROLS -->
      <div class="gallery-center-dw47k gallery-controls-4-dw47k">

        <label class="gallery-arrow-dw47k gallery-arrow-prev-dw47k">
          ‹
          <input type="radio" name="carousel-state-dw47k" class="carousel-radio-dw47k carousel-state-3-dw47k" value="" />
        </label>

        <label class="gallery-arrow-dw47k gallery-arrow-next-dw47k">
          ›
          <input type="radio" name="carousel-state-dw47k" class="carousel-radio-dw47k carousel-state-5-dw47k" value="" />
        </label>

      </div>


      <!-- STATE 5 CONTROLS -->
      <div class="gallery-center-dw47k gallery-controls-5-dw47k">

        <label class="gallery-arrow-dw47k gallery-arrow-prev-dw47k">
          ‹
          <input type="radio" name="carousel-state-dw47k" class="carousel-radio-dw47k carousel-state-4-dw47k" value="" />
        </label>

        <label class="gallery-arrow-dw47k gallery-arrow-next-dw47k">
          ›
          <input type="radio" name="carousel-state-dw47k" class="carousel-radio-dw47k carousel-state-1-dw47k" value="" />
        </label>

      </div>

    </div>
  </div>
</div>

CSS (paste into the widget CSS field)

/* ==========================================================
   FIVE-SLIDE DOCEBO-SAFE CAROUSEL
   Nested radio controls + :has()
   ========================================================== */

.carousel-widget-dw47k {
  --header-title-size: 56px;
  --header-padding: 40px;
  --carousel-slide-width: 824px;
  --carousel-slide-height: 464px;
  --carousel-slide-maxwidth: 85%;
  --carousel-control-size: 50px;
  --carousel-slide-radius: 15px;
  --carousel-bg-height: 407px;
  --carousel-title-size: 36px;
  --carousel-subtitle-size: 16px;
  --carousel-slide-padding: 20px;

  max-width: 1390px;
  margin: 0 auto;
  overflow-x: hidden;
  position: relative;
}


/* Hidden radio controls */

.carousel-widget-dw47k .carousel-radio-dw47k {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

.carousel-widget-dw47k .carousel-state-seed-dw47k {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
}


/* Gallery */

.carousel-widget-dw47k .gallery-dw47k {
  position: relative;
  width: 100%;
  margin-bottom: 40px;
  isolation: isolate;
  z-index: 2;
}

.carousel-widget-dw47k .gallery-dw47k::before {
  content: "";
  display: block;
  height: var(--carousel-bg-height);
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  background-color: transparent;
  border-radius: var(--carousel-slide-radius);
  pointer-events: none;
}


/* Header */

.carousel-widget-dw47k .gallery-header-dw47k {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;

  max-width: 740px;
  width: 100%;

  padding: var(--header-padding) 20px;
  margin: 0 auto;

  color: #000;
  text-align: center;

  box-sizing: border-box;
  z-index: 1;
}

.carousel-widget-dw47k .gallery-header-title-dw47k {
  font-size: var(--header-title-size);
  line-height: 1.2;
  font-weight: 700;
  margin: 0;
  color: #000;
}

.carousel-widget-dw47k .gallery-header-subtitle-dw47k {
  font-size: 16px;
  margin: 0;
  padding: 0;
  color: #000;
}


/* Carousel area */

.carousel-widget-dw47k .gallery-container-dw47k {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;

  height: var(--carousel-slide-height);
  width: 100%;

  z-index: 1;
}


/* Slides */

.carousel-widget-dw47k .gallery-item-dw47k {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;

  position: absolute;

  width: var(--carousel-slide-width);
  max-width: var(--carousel-slide-maxwidth);
  height: var(--carousel-slide-height);

  border-radius: var(--carousel-slide-radius);

  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;

  user-select: none;
  overflow: hidden;

  transition:
    transform 0.5s cubic-bezier(.2,.8,.2,1),
    opacity 0.35s ease,
    z-index 0.5s;

  pointer-events: none;
}


/* Overlay */

.carousel-widget-dw47k .gallery-item-overlay-dw47k::before,
.carousel-widget-dw47k .gallery-item-overlay-dw47k::after {
  content: "";
  position: absolute;
  inset: 0;

  border-radius: var(--carousel-slide-radius);

  pointer-events: none;

  transition: opacity 0.3s ease-in-out;
}

.carousel-widget-dw47k .gallery-item-overlay-dw47k::before {
  opacity: 0.5;
  background: #14161F;
}

.carousel-widget-dw47k .gallery-item-overlay-dw47k::after {
  opacity: 0;
}


/* Content */

.carousel-widget-dw47k .gallery-item-content-dw47k {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  gap: 12px;

  width: 100%;
  max-width: 700px;

  padding:
    0
    var(--carousel-slide-padding)
    30px
    var(--carousel-slide-padding);

  color: #fff;
  text-align: center;

  box-sizing: border-box;

  opacity: 0;

  transition: opacity 0.3s ease-in-out;

  z-index: 1;

  pointer-events: auto;
}

.carousel-widget-dw47k .gallery-item-title-dw47k {
  line-height: 1;
  font-size: var(--carousel-title-size);
  font-weight: 700;
}

.carousel-widget-dw47k .gallery-item-subtitle-dw47k {
  font-size: var(--carousel-subtitle-size);
}


/* CTA */

.carousel-widget-dw47k .button-start-dw47k {
  display: inline-flex;
  justify-content: center;
  align-items: center;

  width: auto;
  height: 50px;

  padding: 0 32px;
  margin-top: 12px;

  border-radius: 4px;

  background-color: #fff;
  border: 0;

  color: #000;

  font-size: 16px;
  font-weight: 700;
  text-transform: uppercase;

  text-decoration: none;

  transition:
    background 0.3s ease,
    color 0.3s ease;

  cursor: pointer;
  pointer-events: auto;
}

.carousel-widget-dw47k .button-start-dw47k:hover {
  background: #000;
  color: #fff;
}


/* Controls */

.carousel-widget-dw47k .gallery-center-dw47k {
  display: none;

  justify-content: space-between;
  align-items: center;

  position: absolute;

  top: calc(50% - (var(--carousel-control-size) / 2));
  left: 0;

  width: 100%;
  height: var(--carousel-control-size);

  padding: 0 12px;

  box-sizing: border-box;

  z-index: 9999;

  pointer-events: none;
}

.carousel-widget-dw47k .gallery-arrow-dw47k {
  display: flex;
  align-items: center;
  justify-content: center;

  width: var(--carousel-control-size);
  height: var(--carousel-control-size);

  flex: 0 0 var(--carousel-control-size);

  border-radius: 50%;

  background: rgba(255,255,255,0.88);

  color: #14161F;

  font-size: 38px;
  font-family: Arial, sans-serif;
  line-height: 1;

  cursor: pointer;
  pointer-events: auto;
  user-select: none;

  box-sizing: border-box;

  transition:
    background 0.2s ease,
    transform 0.2s ease;
}

.carousel-widget-dw47k .gallery-arrow-dw47k:hover {
  background: #fff;
  transform: scale(1.06);
}


/* ==========================================================
   BASE / DEFAULT STATE = SLIDE 3
   ========================================================== */

.carousel-widget-dw47k .gallery-item-1-dw47k {
  transform: scale(0.5) translateX(-50vw);
  opacity: 0.35;
  z-index: 0;
}

.carousel-widget-dw47k .gallery-item-2-dw47k {
  transform: scale(0.7) translateX(-20vw);
  opacity: 0.6;
  z-index: 1;
}

.carousel-widget-dw47k .gallery-item-3-dw47k {
  transform: none;
  opacity: 1;
  z-index: 2;
}

.carousel-widget-dw47k .gallery-item-4-dw47k {
  transform: scale(0.7) translateX(20vw);
  opacity: 0.6;
  z-index: 1;
}

.carousel-widget-dw47k .gallery-item-5-dw47k {
  transform: scale(0.5) translateX(50vw);
  opacity: 0.35;
  z-index: 0;
}

.carousel-widget-dw47k .gallery-item-3-dw47k
.gallery-item-content-dw47k {
  opacity: 1;
}

.carousel-widget-dw47k .gallery-item-3-dw47k
.gallery-item-overlay-dw47k::before {
  opacity: 0;
}

.carousel-widget-dw47k .gallery-item-3-dw47k
.gallery-item-overlay-dw47k::after {
  opacity: 0.3;
}

.carousel-widget-dw47k .gallery-controls-3-dw47k {
  display: flex;
}


/* ==========================================================
   COMMON ACTIVE STATE RESET
   ========================================================== */

.carousel-widget-dw47k:has(.carousel-state-1-dw47k:checked)
  .gallery-item-content-dw47k,
.carousel-widget-dw47k:has(.carousel-state-2-dw47k:checked)
  .gallery-item-content-dw47k,
.carousel-widget-dw47k:has(.carousel-state-3-dw47k:checked)
  .gallery-item-content-dw47k,
.carousel-widget-dw47k:has(.carousel-state-4-dw47k:checked)
  .gallery-item-content-dw47k,
.carousel-widget-dw47k:has(.carousel-state-5-dw47k:checked)
  .gallery-item-content-dw47k {
  opacity: 0;
}

.carousel-widget-dw47k:has(.carousel-state-1-dw47k:checked)
  .gallery-item-overlay-dw47k::before,
.carousel-widget-dw47k:has(.carousel-state-2-dw47k:checked)
  .gallery-item-overlay-dw47k::before,
.carousel-widget-dw47k:has(.carousel-state-3-dw47k:checked)
  .gallery-item-overlay-dw47k::before,
.carousel-widget-dw47k:has(.carousel-state-4-dw47k:checked)
  .gallery-item-overlay-dw47k::before,
.carousel-widget-dw47k:has(.carousel-state-5-dw47k:checked)
  .gallery-item-overlay-dw47k::before {
  opacity: 0.5;
}

.carousel-widget-dw47k:has(.carousel-state-1-dw47k:checked)
  .gallery-item-overlay-dw47k::after,
.carousel-widget-dw47k:has(.carousel-state-2-dw47k:checked)
  .gallery-item-overlay-dw47k::after,
.carousel-widget-dw47k:has(.carousel-state-3-dw47k:checked)
  .gallery-item-overlay-dw47k::after,
.carousel-widget-dw47k:has(.carousel-state-4-dw47k:checked)
  .gallery-item-overlay-dw47k::after,
.carousel-widget-dw47k:has(.carousel-state-5-dw47k:checked)
  .gallery-item-overlay-dw47k::after {
  opacity: 0;
}

.carousel-widget-dw47k:has(.carousel-state-1-dw47k:checked)
  .gallery-center-dw47k,
.carousel-widget-dw47k:has(.carousel-state-2-dw47k:checked)
  .gallery-center-dw47k,
.carousel-widget-dw47k:has(.carousel-state-3-dw47k:checked)
  .gallery-center-dw47k,
.carousel-widget-dw47k:has(.carousel-state-4-dw47k:checked)
  .gallery-center-dw47k,
.carousel-widget-dw47k:has(.carousel-state-5-dw47k:checked)
  .gallery-center-dw47k {
  display: none;
}


/* ==========================================================
   STATE 1
   ========================================================== */

.carousel-widget-dw47k:has(.carousel-state-1-dw47k:checked)
  .gallery-item-1-dw47k {
  transform: none;
  opacity: 1;
  z-index: 2;
}

.carousel-widget-dw47k:has(.carousel-state-1-dw47k:checked)
  .gallery-item-2-dw47k {
  transform: scale(0.7) translateX(20vw);
  opacity: 0.6;
  z-index: 1;
}

.carousel-widget-dw47k:has(.carousel-state-1-dw47k:checked)
  .gallery-item-3-dw47k {
  transform: scale(0.5) translateX(50vw);
  opacity: 0.35;
  z-index: 0;
}

.carousel-widget-dw47k:has(.carousel-state-1-dw47k:checked)
  .gallery-item-4-dw47k {
  transform: scale(0.5) translateX(-50vw);
  opacity: 0.35;
  z-index: 0;
}

.carousel-widget-dw47k:has(.carousel-state-1-dw47k:checked)
  .gallery-item-5-dw47k {
  transform: scale(0.7) translateX(-20vw);
  opacity: 0.6;
  z-index: 1;
}

.carousel-widget-dw47k:has(.carousel-state-1-dw47k:checked)
  .gallery-item-1-dw47k .gallery-item-content-dw47k {
  opacity: 1;
}

.carousel-widget-dw47k:has(.carousel-state-1-dw47k:checked)
  .gallery-item-1-dw47k .gallery-item-overlay-dw47k::before {
  opacity: 0;
}

.carousel-widget-dw47k:has(.carousel-state-1-dw47k:checked)
  .gallery-item-1-dw47k .gallery-item-overlay-dw47k::after {
  opacity: 0.3;
}

.carousel-widget-dw47k:has(.carousel-state-1-dw47k:checked)
  .gallery-controls-1-dw47k {
  display: flex;
}


/* ==========================================================
   STATE 2
   ========================================================== */

.carousel-widget-dw47k:has(.carousel-state-2-dw47k:checked)
  .gallery-item-1-dw47k {
  transform: scale(0.7) translateX(-20vw);
  opacity: 0.6;
  z-index: 1;
}

.carousel-widget-dw47k:has(.carousel-state-2-dw47k:checked)
  .gallery-item-2-dw47k {
  transform: none;
  opacity: 1;
  z-index: 2;
}

.carousel-widget-dw47k:has(.carousel-state-2-dw47k:checked)
  .gallery-item-3-dw47k {
  transform: scale(0.7) translateX(20vw);
  opacity: 0.6;
  z-index: 1;
}

.carousel-widget-dw47k:has(.carousel-state-2-dw47k:checked)
  .gallery-item-4-dw47k {
  transform: scale(0.5) translateX(50vw);
  opacity: 0.35;
  z-index: 0;
}

.carousel-widget-dw47k:has(.carousel-state-2-dw47k:checked)
  .gallery-item-5-dw47k {
  transform: scale(0.5) translateX(-50vw);
  opacity: 0.35;
  z-index: 0;
}

.carousel-widget-dw47k:has(.carousel-state-2-dw47k:checked)
  .gallery-item-2-dw47k .gallery-item-content-dw47k {
  opacity: 1;
}

.carousel-widget-dw47k:has(.carousel-state-2-dw47k:checked)
  .gallery-item-2-dw47k .gallery-item-overlay-dw47k::before {
  opacity: 0;
}

.carousel-widget-dw47k:has(.carousel-state-2-dw47k:checked)
  .gallery-item-2-dw47k .gallery-item-overlay-dw47k::after {
  opacity: 0.3;
}

.carousel-widget-dw47k:has(.carousel-state-2-dw47k:checked)
  .gallery-controls-2-dw47k {
  display: flex;
}


/* ==========================================================
   STATE 3
   ========================================================== */

.carousel-widget-dw47k:has(.carousel-state-3-dw47k:checked)
  .gallery-item-1-dw47k {
  transform: scale(0.5) translateX(-50vw);
  opacity: 0.35;
  z-index: 0;
}

.carousel-widget-dw47k:has(.carousel-state-3-dw47k:checked)
  .gallery-item-2-dw47k {
  transform: scale(0.7) translateX(-20vw);
  opacity: 0.6;
  z-index: 1;
}

.carousel-widget-dw47k:has(.carousel-state-3-dw47k:checked)
  .gallery-item-3-dw47k {
  transform: none;
  opacity: 1;
  z-index: 2;
}

.carousel-widget-dw47k:has(.carousel-state-3-dw47k:checked)
  .gallery-item-4-dw47k {
  transform: scale(0.7) translateX(20vw);
  opacity: 0.6;
  z-index: 1;
}

.carousel-widget-dw47k:has(.carousel-state-3-dw47k:checked)
  .gallery-item-5-dw47k {
  transform: scale(0.5) translateX(50vw);
  opacity: 0.35;
  z-index: 0;
}

.carousel-widget-dw47k:has(.carousel-state-3-dw47k:checked)
  .gallery-item-3-dw47k .gallery-item-content-dw47k {
  opacity: 1;
}

.carousel-widget-dw47k:has(.carousel-state-3-dw47k:checked)
  .gallery-item-3-dw47k .gallery-item-overlay-dw47k::before {
  opacity: 0;
}

.carousel-widget-dw47k:has(.carousel-state-3-dw47k:checked)
  .gallery-item-3-dw47k .gallery-item-overlay-dw47k::after {
  opacity: 0.3;
}

.carousel-widget-dw47k:has(.carousel-state-3-dw47k:checked)
  .gallery-controls-3-dw47k {
  display: flex;
}


/* ==========================================================
   STATE 4
   ========================================================== */

.carousel-widget-dw47k:has(.carousel-state-4-dw47k:checked)
  .gallery-item-1-dw47k {
  transform: scale(0.5) translateX(50vw);
  opacity: 0.35;
  z-index: 0;
}

.carousel-widget-dw47k:has(.carousel-state-4-dw47k:checked)
  .gallery-item-2-dw47k {
  transform: scale(0.5) translateX(-50vw);
  opacity: 0.35;
  z-index: 0;
}

.carousel-widget-dw47k:has(.carousel-state-4-dw47k:checked)
  .gallery-item-3-dw47k {
  transform: scale(0.7) translateX(-20vw);
  opacity: 0.6;
  z-index: 1;
}

.carousel-widget-dw47k:has(.carousel-state-4-dw47k:checked)
  .gallery-item-4-dw47k {
  transform: none;
  opacity: 1;
  z-index: 2;
}

.carousel-widget-dw47k:has(.carousel-state-4-dw47k:checked)
  .gallery-item-5-dw47k {
  transform: scale(0.7) translateX(20vw);
  opacity: 0.6;
  z-index: 1;
}

.carousel-widget-dw47k:has(.carousel-state-4-dw47k:checked)
  .gallery-item-4-dw47k .gallery-item-content-dw47k {
  opacity: 1;
}

.carousel-widget-dw47k:has(.carousel-state-4-dw47k:checked)
  .gallery-item-4-dw47k .gallery-item-overlay-dw47k::before {
  opacity: 0;
}

.carousel-widget-dw47k:has(.carousel-state-4-dw47k:checked)
  .gallery-item-4-dw47k .gallery-item-overlay-dw47k::after {
  opacity: 0.3;
}

.carousel-widget-dw47k:has(.carousel-state-4-dw47k:checked)
  .gallery-controls-4-dw47k {
  display: flex;
}


/* ==========================================================
   STATE 5
   ========================================================== */

.carousel-widget-dw47k:has(.carousel-state-5-dw47k:checked)
  .gallery-item-1-dw47k {
  transform: scale(0.7) translateX(20vw);
  opacity: 0.6;
  z-index: 1;
}

.carousel-widget-dw47k:has(.carousel-state-5-dw47k:checked)
  .gallery-item-2-dw47k {
  transform: scale(0.5) translateX(50vw);
  opacity: 0.35;
  z-index: 0;
}

.carousel-widget-dw47k:has(.carousel-state-5-dw47k:checked)
  .gallery-item-3-dw47k {
  transform: scale(0.5) translateX(-50vw);
  opacity: 0.35;
  z-index: 0;
}

.carousel-widget-dw47k:has(.carousel-state-5-dw47k:checked)
  .gallery-item-4-dw47k {
  transform: scale(0.7) translateX(-20vw);
  opacity: 0.6;
  z-index: 1;
}

.carousel-widget-dw47k:has(.carousel-state-5-dw47k:checked)
  .gallery-item-5-dw47k {
  transform: none;
  opacity: 1;
  z-index: 2;
}

.carousel-widget-dw47k:has(.carousel-state-5-dw47k:checked)
  .gallery-item-5-dw47k .gallery-item-content-dw47k {
  opacity: 1;
}

.carousel-widget-dw47k:has(.carousel-state-5-dw47k:checked)
  .gallery-item-5-dw47k .gallery-item-overlay-dw47k::before {
  opacity: 0;
}

.carousel-widget-dw47k:has(.carousel-state-5-dw47k:checked)
  .gallery-item-5-dw47k .gallery-item-overlay-dw47k::after {
  opacity: 0.3;
}

.carousel-widget-dw47k:has(.carousel-state-5-dw47k:checked)
  .gallery-controls-5-dw47k {
  display: flex;
}


/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media screen and (max-width: 1600px) {
  .carousel-widget-dw47k {
    --header-title-size: 44px;
    --header-padding: 30px;

    --carousel-slide-width: 577px;
    --carousel-slide-height: 325px;

    --carousel-bg-height: 314px;

    --carousel-title-size: 28px;
    --carousel-slide-padding: 45px;
  }
}

@media screen and (max-width: 1300px) {
  .carousel-widget-dw47k {
    --carousel-slide-width: 495px;
    --carousel-slide-height: 279px;

    --carousel-control-size: 40px;

    --carousel-bg-height: 295px;

    --carousel-title-size: 22px;
    --carousel-slide-padding: 40px;
  }

  .carousel-widget-dw47k .button-start-dw47k {
    height: 40px;
    font-size: 14px;
    padding: 0 22px;
  }

  .carousel-widget-dw47k .gallery-arrow-dw47k {
    font-size: 30px;
  }
}
/* =========================================================
   DOCEBO FIVE-CARD CAROUSEL

   UNIQUE PREFIX:
   d4c7f9-

   No JavaScript
   No label[for]
   No radio IDs
   No body selectors
   No display:none on radios

   Maximum width:
   1390px
   ========================================================= */


/* =========================================================
   OUTER CAROUSEL
   ========================================================= */

.d4c7f9-carousel {

  position: relative;

  width: 100%;
  max-width: 1390px;

  margin: 0 auto;

  padding: 40px 0 60px;

  box-sizing: border-box;

  /*
     IMPORTANT:

     Do NOT use overflow:hidden here.

     The arrow controls and outer cards need to be able
     to extend beyond the immediate card area.
  */

  overflow: visible;
}


/* =========================================================
   CARD STAGE
   ========================================================= */

.d4c7f9-stage {

  position: relative;

  width: 100%;

  height: 560px;

  perspective: 1200px;
}


/* =========================================================
   RADIO INPUTS

   IMPORTANT:

   The radios remain real controls.

   They are visually hidden without display:none.
   ========================================================= */

.d4c7f9-carousel input[type="radio"] {

  position: absolute;

  width: 1px;
  height: 1px;

  margin: -1px;
  padding: 0;

  opacity: 0;

  border: 0;

  overflow: hidden;

  clip: rect(0, 0, 0, 0);

  clip-path: inset(50%);

  white-space: nowrap;
}


/* =========================================================
   INITIAL STATE

   The starting radio is invisible.
   ========================================================= */

.d4c7f9-initial-state {

  position: absolute;

  width: 1px;
  height: 1px;

  overflow: hidden;

  opacity: 0;

  pointer-events: none;
}


/* =========================================================
   CARDS — BASE
   ========================================================= */

.d4c7f9-card {

  position: absolute;

  top: 20px;
  left: 50%;

  width: 360px;
  height: 500px;

  display: flex;

  flex-direction: column;

  overflow: hidden;

  box-sizing: border-box;

  background: #ffffff;

  border-radius: 18px;

  box-shadow:
    0 18px 45px rgba(0, 0, 0, 0.18);

  transform-origin: center center;

  transition:
    transform 0.55s ease,
    opacity 0.55s ease;

  will-change: transform, opacity;
}


/* =========================================================
   CARD IMAGE
   ========================================================= */

.d4c7f9-card-image {

  position: relative;

  width: 100%;
  height: 210px;

  flex-shrink: 0;

  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}


.d4c7f9-card-image::after {

  content: "";

  position: absolute;

  inset: 0;

  background:
    linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.02),
      rgba(0, 0, 0, 0.20)
    );
}


/* =========================================================
   CARD CONTENT
   ========================================================= */

.d4c7f9-card-content {

  display: flex;

  flex-direction: column;

  flex: 1;

  padding: 28px;

  box-sizing: border-box;
}


.d4c7f9-card-content h2 {

  margin: 0 0 14px;

  color: #20252b;

  font-size: 25px;

  line-height: 1.2;

  font-weight: 700;
}


.d4c7f9-card-content p {

  margin: 0;

  color: #66707c;

  font-size: 15px;

  line-height: 1.6;
}


/* =========================================================
   COURSE BUTTON
   ========================================================= */

.d4c7f9-course-button {

  display: flex;

  align-items: center;
  justify-content: center;

  width: 100%;

  min-height: 46px;

  margin-top: auto;

  padding: 10px 20px;

  box-sizing: border-box;

  border-radius: 7px;

  background: #1769aa;

  color: #ffffff !important;

  text-decoration: none !important;

  font-size: 15px;

  line-height: 1.2;

  font-weight: 700;

  transition:
    background 0.2s ease,
    transform 0.2s ease;
}


.d4c7f9-course-button:hover {

  background: #0f5489;

  color: #ffffff !important;

  transform: translateY(-2px);
}


/* =========================================================
   STATE 1
   =========================================================

   FAR LEFT    LEFT       CENTER      RIGHT     FAR RIGHT

   Card 4      Card 5     Card 1      Card 2     Card 3
   ========================================================= */

.d4c7f9-card-1 {

  transform:
    translateX(-50%)
    translateX(0)
    scale(1);

  opacity: 1;

  z-index: 5;
}


.d4c7f9-card-2 {

  transform:
    translateX(-50%)
    translateX(440px)
    scale(0.86);

  opacity: 0.78;

  z-index: 4;
}


.d4c7f9-card-3 {

  transform:
    translateX(-50%)
    translateX(760px)
    scale(0.70);

  opacity: 0.42;

  z-index: 2;
}


.d4c7f9-card-4 {

  transform:
    translateX(-50%)
    translateX(-760px)
    scale(0.70);

  opacity: 0.42;

  z-index: 2;
}


.d4c7f9-card-5 {

  transform:
    translateX(-50%)
    translateX(-440px)
    scale(0.86);

  opacity: 0.78;

  z-index: 4;
}


/* =========================================================
   STATE 2
   =========================================================

   FAR LEFT    LEFT       CENTER      RIGHT     FAR RIGHT

   Card 5      Card 1     Card 2      Card 3     Card 4
   ========================================================= */

.d4c7f9-carousel:has(.d4c7f9-state-2:checked)
.d4c7f9-card-5 {

  transform:
    translateX(-50%)
    translateX(-760px)
    scale(0.70);

  opacity: 0.42;

  z-index: 2;
}


.d4c7f9-carousel:has(.d4c7f9-state-2:checked)
.d4c7f9-card-1 {

  transform:
    translateX(-50%)
    translateX(-440px)
    scale(0.86);

  opacity: 0.78;

  z-index: 4;
}


.d4c7f9-carousel:has(.d4c7f9-state-2:checked)
.d4c7f9-card-2 {

  transform:
    translateX(-50%)
    translateX(0)
    scale(1);

  opacity: 1;

  z-index: 5;
}


.d4c7f9-carousel:has(.d4c7f9-state-2:checked)
.d4c7f9-card-3 {

  transform:
    translateX(-50%)
    translateX(440px)
    scale(0.86);

  opacity: 0.78;

  z-index: 4;
}


.d4c7f9-carousel:has(.d4c7f9-state-2:checked)
.d4c7f9-card-4 {

  transform:
    translateX(-50%)
    translateX(760px)
    scale(0.70);

  opacity: 0.42;

  z-index: 2;
}


/* =========================================================
   STATE 3
   =========================================================

   FAR LEFT    LEFT       CENTER      RIGHT     FAR RIGHT

   Card 1      Card 2     Card 3      Card 4     Card 5
   ========================================================= */

.d4c7f9-carousel:has(.d4c7f9-state-3:checked)
.d4c7f9-card-1 {

  transform:
    translateX(-50%)
    translateX(-760px)
    scale(0.70);

  opacity: 0.42;

  z-index: 2;
}


.d4c7f9-carousel:has(.d4c7f9-state-3:checked)
.d4c7f9-card-2 {

  transform:
    translateX(-50%)
    translateX(-440px)
    scale(0.86);

  opacity: 0.78;

  z-index: 4;
}


.d4c7f9-carousel:has(.d4c7f9-state-3:checked)
.d4c7f9-card-3 {

  transform:
    translateX(-50%)
    translateX(0)
    scale(1);

  opacity: 1;

  z-index: 5;
}


.d4c7f9-carousel:has(.d4c7f9-state-3:checked)
.d4c7f9-card-4 {

  transform:
    translateX(-50%)
    translateX(440px)
    scale(0.86);

  opacity: 0.78;

  z-index: 4;
}


.d4c7f9-carousel:has(.d4c7f9-state-3:checked)
.d4c7f9-card-5 {

  transform:
    translateX(-50%)
    translateX(760px)
    scale(0.70);

  opacity: 0.42;

  z-index: 2;
}


/* =========================================================
   STATE 4 — PROJECT MANAGEMENT
   =========================================================

   FAR LEFT    LEFT       CENTER      RIGHT     FAR RIGHT

   Card 2      Card 3     Card 4      Card 5     Card 1
   ========================================================= */

.d4c7f9-carousel:has(.d4c7f9-state-4:checked)
.d4c7f9-card-2 {

  transform:
    translateX(-50%)
    translateX(-760px)
    scale(0.70);

  opacity: 0.42;

  z-index: 2;
}


.d4c7f9-carousel:has(.d4c7f9-state-4:checked)
.d4c7f9-card-3 {

  transform:
    translateX(-50%)
    translateX(-440px)
    scale(0.86);

  opacity: 0.78;

  z-index: 4;
}


.d4c7f9-carousel:has(.d4c7f9-state-4:checked)
.d4c7f9-card-4 {

  transform:
    translateX(-50%)
    translateX(0)
    scale(1);

  opacity: 1;

  z-index: 5;
}


.d4c7f9-carousel:has(.d4c7f9-state-4:checked)
.d4c7f9-card-5 {

  transform:
    translateX(-50%)
    translateX(440px)
    scale(0.86);

  opacity: 0.78;

  z-index: 4;
}


.d4c7f9-carousel:has(.d4c7f9-state-4:checked)
.d4c7f9-card-1 {

  transform:
    translateX(-50%)
    translateX(760px)
    scale(0.70);

  opacity: 0.42;

  z-index: 2;
}


/* =========================================================
   STATE 5 — PROFESSIONAL GROWTH
   =========================================================

   FAR LEFT    LEFT       CENTER      RIGHT     FAR RIGHT

   Card 3      Card 4     Card 5      Card 1     Card 2
   ========================================================= */

.d4c7f9-carousel:has(.d4c7f9-state-5:checked)
.d4c7f9-card-3 {

  transform:
    translateX(-50%)
    translateX(-760px)
    scale(0.70);

  opacity: 0.42;

  z-index: 2;
}


.d4c7f9-carousel:has(.d4c7f9-state-5:checked)
.d4c7f9-card-4 {

  transform:
    translateX(-50%)
    translateX(-440px)
    scale(0.86);

  opacity: 0.78;

  z-index: 4;
}


.d4c7f9-carousel:has(.d4c7f9-state-5:checked)
.d4c7f9-card-5 {

  transform:
    translateX(-50%)
    translateX(0)
    scale(1);

  opacity: 1;

  z-index: 5;
}


.d4c7f9-carousel:has(.d4c7f9-state-5:checked)
.d4c7f9-card-1 {

  transform:
    translateX(-50%)
    translateX(440px)
    scale(0.86);

  opacity: 0.78;

  z-index: 4;
}


.d4c7f9-carousel:has(.d4c7f9-state-5:checked)
.d4c7f9-card-2 {

  transform:
    translateX(-50%)
    translateX(760px)
    scale(0.70);

  opacity: 0.42;

  z-index: 2;
}


/* =========================================================
   NAVIGATION LAYER
   ========================================================= */

.d4c7f9-navigation {

  position: absolute;

  top: 0;
  left: 0;

  width: 100%;
  height: 560px;

  pointer-events: none;

  z-index: 100;
}


/* =========================================================
   STATE CONTROL ROWS
   ========================================================= */

.d4c7f9-state-controls {

  position: absolute;

  top: 250px;
  left: 0;

  width: 100%;

  display: none;

  align-items: center;
  justify-content: space-between;

  padding: 0 24px;

  box-sizing: border-box;

  pointer-events: none;
}


/* =========================================================
   SHOW THE CORRECT ARROW PAIR
   ========================================================= */

.d4c7f9-carousel:has(.d4c7f9-state-1:checked)
.d4c7f9-state-controls-1 {

  display: flex;
}


.d4c7f9-carousel:has(.d4c7f9-state-2:checked)
.d4c7f9-state-controls-2 {

  display: flex;
}


.d4c7f9-carousel:has(.d4c7f9-state-3:checked)
.d4c7f9-state-controls-3 {

  display: flex;
}


.d4c7f9-carousel:has(.d4c7f9-state-4:checked)
.d4c7f9-state-controls-4 {

  display: flex;
}


.d4c7f9-carousel:has(.d4c7f9-state-5:checked)
.d4c7f9-state-controls-5 {

  display: flex;
}


/* =========================================================
   ARROW BUTTON
   ========================================================= */

.d4c7f9-arrow {

  position: relative;

  width: 52px;
  height: 52px;

  display: flex;

  align-items: center;
  justify-content: center;

  box-sizing: border-box;

  border-radius: 50%;

  background: #ffffff;

  color: #26313b;

  border: 1px solid rgba(0, 0, 0, 0.08);

  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.20);

  font-size: 27px;

  line-height: 1;

  cursor: pointer;

  pointer-events: auto;

  user-select: none;

  transition:
    background 0.2s ease,
    color 0.2s ease,
    transform 0.2s ease,
    box-shadow 0.2s ease;
}


.d4c7f9-arrow:hover {

  background: #1769aa;

  color: #ffffff;

  transform: scale(1.08);

  box-shadow:
    0 10px 28px rgba(0, 0, 0, 0.24);
}


/* =========================================================
   KEEP ARROW ICON ABOVE THE RADIO
   ========================================================= */

.d4c7f9-arrow span {

  position: relative;

  z-index: 2;

  pointer-events: none;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {

  .d4c7f9-carousel {

    padding-top: 25px;
  }


  .d4c7f9-card {

    width: 320px;

    height: 480px;
  }


  .d4c7f9-stage,
  .d4c7f9-navigation {

    height: 540px;
  }


  .d4c7f9-state-controls {

    top: 245px;

    padding: 0 14px;
  }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 650px) {

  .d4c7f9-carousel {

    padding:
      20px
      10px
      45px;
  }


  .d4c7f9-stage {

    height: 520px;
  }


  .d4c7f9-navigation {

    height: 520px;
  }


  .d4c7f9-card {

    width: min(
      300px,
      calc(100vw - 80px)
    );

    height: 460px;
  }


  /*
     On small screens we only show the centered card.
  */

  .d4c7f9-card-1,
  .d4c7f9-card-2,
  .d4c7f9-card-3,
  .d4c7f9-card-4,
  .d4c7f9-card-5 {

    transform:
      translateX(-50%)
      scale(0.80);

    opacity: 0;

    pointer-events: none;
  }


  .d4c7f9-carousel:has(.d4c7f9-state-1:checked)
  .d4c7f9-card-1,

  .d4c7f9-carousel:has(.d4c7f9-state-2:checked)
  .d4c7f9-card-2,

  .d4c7f9-carousel:has(.d4c7f9-state-3:checked)
  .d4c7f9-card-3,

  .d4c7f9-carousel:has(.d4c7f9-state-4:checked)
  .d4c7f9-card-4,

  .d4c7f9-carousel:has(.d4c7f9-state-5:checked)
  .d4c7f9-card-5 {

    transform:
      translateX(-50%)
      scale(1);

    opacity: 1;

    pointer-events: auto;

    z-index: 5;
  }


  .d4c7f9-card-image {

    height: 185px;
  }


  .d4c7f9-card-content {

    padding: 23px;
  }


  .d4c7f9-card-content h2 {

    font-size: 22px;
  }


  .d4c7f9-state-controls {

    top: 240px;

    padding: 0 2px;
  }


  .d4c7f9-arrow {

    width: 46px;
    height: 46px;

    font-size: 23px;
  }

}

Fields to customize

Replace the header text, slide images, titles, subtitles, link URLs and button labels directly in the HTML. The guide includes a complete list of all fields and sample values (header, slide 1–5 content, scoping suffix).

Common customizations

Change default centered slide: move the checked attribute — e.g., put checked on the slide-1 radio to open slide 1 by default.
Duplicate widget on same page: copy the entire HTML/CSS and replace every instance of the scoping suffix (dw47k) with a newly generated random suffix. Also give the radio group a distinct name attribute for the second instance.
Change overlay tint: edit .gallery-item-overlay-dw47k::before background color in the CSS.
Adjust arrow size: edit --carousel-control-size at the top of the CSS.

Edge cases & gotchas

Exactly one radio input must have the checked attribute. Having none or multiple causes unpredictable behavior.
Changing the number of slides is non-trivial — each checked state maps all slides to positions using explicit CSS rules. If you need a different slide count, paste this HTML/CSS into an LLM and ask it to recalc position rules for your desired count, or reach out in the comments for help.
Long titles/subtitles can wrap awkwardly; keep text concise or add CSS for overflow constraints.

Accessibility reminder (important)

This pattern does not provide keyboard operability for the prev/next controls. Docebo requires interactive elements added via custom code to be fully operable from keyboard alone for accessibility compliance. If you need an accessible carousel, consider implementing a JavaScript-based accessible widget (not covered here) or provide an alternative path to the same content for keyboard users. See Docebo's accessibility articles for guidance.

+13

dklinger
Hero III
25 days ago
October 1, 2026

Nice Pat. Thanks for this.

pmo
Author
Docebian
25 days ago
October 1, 2026

I’ll be dropping a few swan songs on my way out. After almost 7 wonderful years I’m taking a sabbatical.

I’ll be dropping a few swan songs on my way out. After almost 7 wonderful years I’m going on a professional sabbatical.

Keep droppin - we will keep on reading.

+10

JeanetteMcVeigh
Hero II
25 days ago
October 1, 2026

So cool! Thanks!

ana.sorensen
Docebian
25 days ago
October 1, 2026

So excited to have this tool! If anyone wants to see a version in a Docebo platform, we just added one of these carousels in Docebo University to the newly updated AI at DU page. 🚀

gus
Helper I
25 days ago
October 1, 2026

That’s brilliant. Thank you.

pmo
Author
Docebian
13 hours ago
October 26, 2026

No Problem! Hope it helps.

Click here to see the widget live

Quick overview - What this widget guide gives you

Known limitations (please read)

Prerequisites

Main instructions (copy/paste)

HTML (paste into the widget HTML)

CSS (paste into the widget CSS field)

Fields to customize

Common customizations

Edge cases & gotchas

Accessibility reminder (important)

Still haven't found what you're looking for?

Sign up for Docebo Community

Log in to Docebo Community