Slider Component Breakdown

Overview

The dd-slider component provides a responsive carousel for images and copy with previous and next buttons as wells and dot navigation.

This component is ideal for when space is limited but there are several items to be displayed. Mostly used for images with possible copy block for descriptions or CTA functionality.

Basic Usage

Wrap slide items in a div with class dd-slider.

Preview

Code

<div class="dd-slider">
  <div class="dd-slider__title">
    <h2>Slider title</h2>
  </div>
  <ul class="dd-slider__items -nostyle">
    <!-- start slide item -->
    <li class="dd-slider__item" data-id="uid_0001">
      <div class="dd-slider__content">
        <div class="dd-g">
          <!-- Start body -->
          <div class="dd-slider__body dd-u-1-1 dd-u-sm-1-1 dd-u-md-1-1 dd-u-lg-12-24 l-box">
            <div class="dd-slider__title">
              Slide item title
            </div>
            <div class="dd-slider__copy">
              Slide item copy block
              <div class="dd-slider__links">
                <div class="dd-slider__link">
                  <a href="#" class="dd-button -primary">slider Link 1</a>
                </div>
                <div class="dd-slider__link">
                  <a href="#" class="dd-button -ghost">slider Link 2</a>
                </div>
              </div>
            </div>
          </div>
          <!-- End body -->
          <!-- Start image or video -->
          <div class="dd-slider__image dd-u-1-1 dd-u-sm-1-1 dd-u-md-1-1 dd-u-lg-12-24">
            <img
              src="https://dummyimage.com/600x400/000/fff"
              alt="slider alt tag for image"
            />
          </div>
          <!-- End image or video -->
        </div>
      </div>
    </li>
    <!-- end slide item -->
    <!-- start slide item -->
    <li class="dd-slider__item" data-id="uid_0001">
      <div class="dd-slider__content">
        <div class="dd-g">
          <!-- Start body -->
          <div class="dd-slider__body dd-u-1-1 dd-u-sm-1-1 dd-u-md-1-1 dd-u-lg-12-24 l-box">
            <div class="dd-slider__title">
              Slide item title
            </div>
            <div class="dd-slider__copy">
              Slide item copy block
              <div class="dd-slider__links">
                <div class="dd-slider__link">
                  <a href="#" class="dd-button -primary">slider Link 1</a>
                </div>
                <div class="dd-slider__link">
                  <a href="#" class="dd-button -ghost">slider Link 2</a>
                </div>
              </div>
            </div>
          </div>
          <!-- End body -->
          <!-- Start image or video -->
          <div class="dd-slider__image dd-u-1-1 dd-u-sm-1-1 dd-u-md-1-1 dd-u-lg-12-24">
            <img
              src="https://dummyimage.com/600x400/000/fff"
              alt="slider alt tag for image"
            />
          </div>
          <!-- End image or video -->
        </div>
      </div>
    </li>
    <!-- end slide item -->
    <!-- start slide item -->
    <li class="dd-slider__item" data-id="uid_0001">
      <div class="dd-slider__content">
        <div class="dd-g">
          <!-- Start body -->
          <div class="dd-slider__body dd-u-1-1 dd-u-sm-1-1 dd-u-md-1-1 dd-u-lg-12-24 l-box">
            <div class="dd-slider__title">
              Slide item title
            </div>
            <div class="dd-slider__copy">
              Slide item copy block
              <div class="dd-slider__links">
                <div class="dd-slider__link">
                  <a href="#" class="dd-button -primary">slider Link 1</a>
                </div>
                <div class="dd-slider__link">
                  <a href="#" class="dd-button -ghost">slider Link 2</a>
                </div>
              </div>
            </div>
          </div>
          <!-- End body -->
          <!-- Start image or video -->
          <div class="dd-slider__image dd-u-1-1 dd-u-sm-1-1 dd-u-md-1-1 dd-u-lg-12-24">
            <img
              src="https://dummyimage.com/600x400/000/fff"
              alt="slider alt tag for image"
            />
          </div>
          <!-- End image or video -->
        </div>
      </div>
    </li>
    <!-- end slide item -->
  </ul>
  <div class="dd-slider__navigation">
    <button id="dd-slider__previous" class="dd-slider__previous"><span class="-scrn-reader-only">Previous slide</span> < </button>
    <ul class="dd-slider__tabs -nostyle"></ul>
    <button id="dd-slider__next" class="dd-slider__next"><span class="-scrn-reader-only">Next slide</span> > </button>
  </div>
</div>

Framework files

• source/js/components/_dd_slider.js (styles)
• source/scss/components/_dd_slider.scss (styles)

For ACF/Paragraphs integration, use conditional fields to apply modifiers dynamically.

Accessibility and Best Practices

Ensure backgrounds provide sufficient contrast. Nest semantic elements inside. Test landmark navigation with screen readers. In CMS, make titles optional but encouraged.