Skip to main content

Card Carousel

Uses cards in a carousel format.

Links:

Confluence

A slideshow component for cycling through card elements like a carousel.

The carousel uses three pieces of data to successfully initialize. This data is stored the main .c-carousel element as data-attributes:

  1. Unique ID. Required - Entered in the id attribute and data-carousel-id.
  2. Slides Per View. Required - Either 3 or 4. Entered in data-slides-per-view.
  3. Full-bleed. Optional, empty by default - If true, the carousel will bleed to the edges of the browser. Entered in data-full-bleed.

Warnings:

  • We strongly recommend NOT using a 4-up card carousel on a page with left-rail navigation or left-rail headers.
  • DO NOT use the full-bleed option on a page with left-rail navigation or left-rail headers.

See Card Carousel demo page for more examples. 

<!-- Unique ID required -->
<div id="carousel-1" class="c-carousel" data-carousel-id="carousel-1" data-slides-per-view="3" data-full-bleed="">
  <div class="o-grid">
    <div class="c-carousel__header o-grid__item-12 o-grid__item-8@md">
      <!-- Eyebrow and Title are optional -->
      <p class="c-carousel__eyebrow nyp-type-eyebrow">Optional Eyebrow</p>
      <h2 class="c-carousel__title nyp-type-h2 u-m-b-0">3 cards Tincid augue interdum.</h2>
    </div>
    <div class="o-grid__item-12 o-grid__item-4@md u-d-none u-d-block@md">
      <div class="c-carousel__controls u-d-flex u-f-justify-end u-f-align-end u-h-100">
        <!-- Bullets are injected into 'swiper-pagination' -->
        <div class="swiper-pagination"></div>

        <div class="u-m-l-sm u-d-flex">
          <button class="swiper-button-prev" aria-label="Previous Slide" tabindex="-1">
            <span class="o-svg-icon">
              <svg focusable="false" role="presentation" viewBox="0 0 192 512" shape-rendering="geometricPrecision">
                <path d="M4.2 247.5L151 99.5c4.7-4.7 12.3-4.7 17 0l19.8 19.8c4.7 4.7 4.7 12.3 0 17L69.3 256l118.5 119.7c4.7 4.7 4.7 12.3 0 17L168 412.5c-4.7 4.7-12.3 4.7-17 0L4.2 264.5c-4.7-4.7-4.7-12.3 0-17z" fill="currentColor"/>
              </svg>
            </span>
          </button>

          <button class="swiper-button-next" aria-label="Next Slide" tabindex="-1">
            <span class="o-svg-icon">
              <svg focusable="false" role="presentation" viewBox="0 0 192 512" shape-rendering="geometricPrecision">
                <path d="M187.8 264.5L41 412.5c-4.7 4.7-12.3 4.7-17 0L4.2 392.7c-4.7-4.7-4.7-12.3 0-17L122.7 256 4.2 136.3c-4.7-4.7-4.7-12.3 0-17L24 99.5c4.7-4.7 12.3-4.7 17 0l146.8 148c4.7 4.7 4.7 12.3 0 17z" fill="currentColor" />
              </svg>
            </span>
          </button>
        </div>
      </div>
    </div>
  </div>

  <!-- Don't show divider if there is no Title -->
  <hr class="c-carousel__divider">

  <div class="u-m-t-md">
    <div class="swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide">
          <div class="c-card">
            <div class="c-card__img">
              <div class="o-ar o-ar--16:9">
                <img class="o-ar__item" src="/images/placeholder/hospital-16-9.jpg" alt="">
              </div>
              <div class="c-card__img--tag nyp-type-eyebrow--small u-c-white">
                INPATIENT &amp; OUTPATIENT
              </div>
            </div>
            <div class="c-card__header">
              <h3 class="c-card__title">Headline goes here</h3>
            </div>
            <div class="c-card__body">
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.</p>
            </div>
            <div class="c-card__footer">
              <a href="#" class=" c-button">Learn More 1</a>
            </div>
          </div>
        </div>
        <div class="swiper-slide">
          <div class="c-card">
            <div class="c-card__img">
              <div class="o-ar o-ar--16:9">
                <img class="o-ar__item" src="/images/placeholder/hospital-16-9.jpg" alt="">
              </div>
              <div class="c-card__img--tag nyp-type-eyebrow--small u-c-white">
                INPATIENT &amp; OUTPATIENT
              </div>
            </div>
            <div class="c-card__header">
              <h3 class="c-card__title">Headline goes here</h3>
            </div>
            <div class="c-card__body">
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.</p>
            </div>
            <div class="c-card__footer">
              <a href="#" class=" styled-link">Learn More 2</a>
            </div>
          </div>
        </div>
        ...
      </div>
    </div>
  </div>

  <!-- Mobile bullets -->
  <div class="swiper-pagination u-d-flex u-d-none@md u-f-justify-center u-f-align-center u-m-t"></div>

  <!-- Optional Footer -->
  <div class="c-card-grid__footer">
    <!-- Optional CTA -->
    <a href="#" class="c-button c-button c-button--mobile__100">
      Optional CTA
    </a>
  </div>
</div>