Open Close
Teva VIsion
Font Face
Teva Sans Latin
Drafts & Templates
PBS Templates
Primitives & components context
Teva Global
Primitives & components: Teva Global

Slider

v0.0.0

Use the Slider component for cycling through elements. The Swiper library is used under the hood because this library is flexible and it reacts more reponsive on touch devices compared to other solutions.

For all available options, please see the options page.

Basic usage #

By default it shows a basic inline slider followed by pagination and navigation controls.

On touch devices, the slider can also be controlled by swiping.

alt text
© 2017 House of Clip Art
alt text
© 2017 House of Clip Art
alt text
Photo by Tracy Thomason 
<!-- Slider  -->
<div class="vi-slider">
  <div class="vi-slider__slides">
    <div class="vi-slider__wrapper">
      <!-- Add slides here. -->
      <div class="vi-slider__slide">
        <!-- Rectangular Image (mods: --custom) -->
        <div class="vi-rectangular-image vi-rectangular-image--custom" style="padding-top: 50.00000%">
          <img alt="alt text" draggable="false" loading="lazy" src="/assets/images/static/test-600x300.jpg" srcset="/assets/images/static/test-600x300.jpg, /assets/images/static/test-1200x600.jpg 2x">
          <div class="vi-rectangular-image__credit vi-rectangular-image__credit--bottom-end">
            © 2017 House of Clip Art
          </div>
        </div>
      </div>
      <div class="vi-slider__slide">
        <!-- Rectangular Image (mods: --custom) -->
        <div class="vi-rectangular-image vi-rectangular-image--custom" style="padding-top: 50.00000%">
          <img alt="alt text" draggable="false" loading="lazy" src="/assets/images/static/test-600x300.jpg" srcset="/assets/images/static/test-600x300.jpg, /assets/images/static/test-1200x600.jpg 2x">
          <div class="vi-rectangular-image__credit vi-rectangular-image__credit--bottom-end">
            © 2017 House of Clip Art
          </div>
        </div>
      </div>
      <div class="vi-slider__slide">
        <!-- Rectangular Image (mods: --custom) -->
        <div class="vi-rectangular-image vi-rectangular-image--custom" style="padding-top: 50.00000%">
          <img alt="alt text" draggable="false" loading="lazy" src="/assets/images/static/test-600x300.jpg" srcset="/assets/images/static/test-600x300.jpg, /assets/images/static/test-1200x600.jpg 2x">
          <div class="vi-rectangular-image__credit vi-rectangular-image__credit--bottom-end">
            Photo by Tracy Thomason
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="vi-slider__footer">
    <div class="vi-slider__pagination">
      <!-- paginatinon will be rendered here -->
    </div>
    <div class="vi-slider__controls">
      <div class="vi-slider__navigation vi-slider__navigation--prev">
        <!-- Button type: pagination  -->
        <button type="button" class="vi-btn-pagination vi-btn-pagination--prev vi-btn-pagination--inversed vi-btn"><span class="vi-btn-pagination__label vi-btn-pagination__label--prev vi-btn-pagination__label--inversed vi-btn__label">Previous</span></button>
      </div>
      <div class="vi-slider__navigation vi-slider__navigation--next">
        <!-- Button type: pagination  -->
        <button type="button" class="vi-btn-pagination vi-btn-pagination--next vi-btn-pagination--inversed vi-btn"><span class="vi-btn-pagination__label vi-btn-pagination__label--next vi-btn-pagination__label--inversed vi-btn__label">Next</span></button>
      </div>
    </div>
  </div>
</div>

Full width usage #

When not using the slider 'inline', the slider-part and the controls-part can be wrapped individually by Containers.

In this example the .vi-slider__slides is wrapped by a Container with modifier --column-visual. On smaller screens this container type is full width. This can be used as lead visual on article pages.

When not used 'inline', the .vi-slider__footer should always be wrapped by a Container with modifier --column.

Scale browser width to see the effect.

alt text
Photo by Tracy Thomason
alt text
Image courtesy of the Library of Congress
alt text
Photo by Tracy Thomason
[visual alignment test] 
<!-- Slider  -->
<div class="vi-slider">
  <!-- Container (mods: --column-visual) -->
  <div class="vi-container vi-container--column-visual">
    <div class="vi-slider__slides">
      <div class="vi-slider__wrapper">
        <!-- Add slides here. -->
        <div class="vi-slider__slide">
          <!-- Rectangular Image (mods: --custom) -->
          <div class="vi-rectangular-image vi-rectangular-image--custom" style="padding-top: 50.00000%">
            <img alt="alt text" draggable="false" loading="lazy" src="/assets/images/static/test-600x300.jpg" srcset="/assets/images/static/test-600x300.jpg, /assets/images/static/test-1200x600.jpg 2x">
            <div class="vi-rectangular-image__credit vi-rectangular-image__credit--bottom-end">
              Photo by Tracy Thomason
            </div>
          </div>
        </div>
        <div class="vi-slider__slide">
          <!-- Rectangular Image (mods: --custom) -->
          <div class="vi-rectangular-image vi-rectangular-image--custom" style="padding-top: 50.00000%">
            <img alt="alt text" draggable="false" loading="lazy" src="/assets/images/static/test-600x300.jpg" srcset="/assets/images/static/test-600x300.jpg, /assets/images/static/test-1200x600.jpg 2x">
            <div class="vi-rectangular-image__credit vi-rectangular-image__credit--bottom-end">
              Image courtesy of the Library of Congress
            </div>
          </div>
        </div>
        <div class="vi-slider__slide">
          <!-- Rectangular Image (mods: --custom) -->
          <div class="vi-rectangular-image vi-rectangular-image--custom" style="padding-top: 50.00000%">
            <img alt="alt text" draggable="false" loading="lazy" src="/assets/images/static/test-600x300.jpg" srcset="/assets/images/static/test-600x300.jpg, /assets/images/static/test-1200x600.jpg 2x">
            <div class="vi-rectangular-image__credit vi-rectangular-image__credit--bottom-end">
              Photo by Tracy Thomason
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- Container (mods: --column) -->
  <div class="vi-container vi-container--column">
    <div class="vi-slider__footer">
      <div class="vi-slider__pagination">
        <!-- paginatinon will be rendered here -->
      </div>
      <div class="vi-slider__controls">
        <div class="vi-slider__navigation vi-slider__navigation--prev">
          <!-- Button type: pagination  -->
          <button type="button" class="vi-btn-pagination vi-btn-pagination--prev vi-btn-pagination--inversed vi-btn"><span class="vi-btn-pagination__label vi-btn-pagination__label--prev vi-btn-pagination__label--inversed vi-btn__label">Previous</span></button>
        </div>
        <div class="vi-slider__navigation vi-slider__navigation--next">
          <!-- Button type: pagination  -->
          <button type="button" class="vi-btn-pagination vi-btn-pagination--next vi-btn-pagination--inversed vi-btn"><span class="vi-btn-pagination__label vi-btn-pagination__label--next vi-btn-pagination__label--inversed vi-btn__label">Next</span></button>
        </div>
      </div>
    </div>
  </div>
</div>

Following example has no restrictions on the slider width.

alt text
Image courtesy of the Library of Congress
alt text
© 2017 House of Clip Art
alt text
Image courtesy of the Library of Congress
[visual alignment test] 
<!-- Container  -->
<div class="vi-container">
  <!-- Wrapped in container for this example -->
  <!-- Slider  -->
  <div class="vi-slider">
    <div class="vi-slider__slides">
      <div class="vi-slider__wrapper">
        <!-- Add slides here. -->
        <div class="vi-slider__slide">
          <!-- Rectangular Image (mods: --hero-image) -->
          <div class="vi-rectangular-image vi-rectangular-image--hero-image">
            <picture>
              <source media="(max-width:767px)" srcset="/assets/images/static/test-360x230.jpg, /assets/images/static/test-720x460.jpg 2x">
              <img alt="alt text" draggable="false" loading="lazy" src="/assets/images/static/test-1026x430.jpg" srcset="/assets/images/static/test-1026x430.jpg, /assets/images/static/test-2052x860.jpg 2x">
            </picture>
            <div class="vi-rectangular-image__credit vi-rectangular-image__credit--bottom-end">
              Image courtesy of the Library of Congress
            </div>
          </div>
        </div>
        <div class="vi-slider__slide">
          <!-- Rectangular Image (mods: --hero-image) -->
          <div class="vi-rectangular-image vi-rectangular-image--hero-image">
            <picture>
              <source media="(max-width:767px)" srcset="/assets/images/static/test-360x230.jpg, /assets/images/static/test-720x460.jpg 2x">
              <img alt="alt text" draggable="false" loading="lazy" src="/assets/images/static/test-1026x430.jpg" srcset="/assets/images/static/test-1026x430.jpg, /assets/images/static/test-2052x860.jpg 2x">
            </picture>
            <div class="vi-rectangular-image__credit vi-rectangular-image__credit--bottom-end">
              © 2017 House of Clip Art
            </div>
          </div>
        </div>
        <div class="vi-slider__slide">
          <!-- Rectangular Image (mods: --hero-image) -->
          <div class="vi-rectangular-image vi-rectangular-image--hero-image">
            <picture>
              <source media="(max-width:767px)" srcset="/assets/images/static/test-360x230.jpg, /assets/images/static/test-720x460.jpg 2x">
              <img alt="alt text" draggable="false" loading="lazy" src="/assets/images/static/test-1026x430.jpg" srcset="/assets/images/static/test-1026x430.jpg, /assets/images/static/test-2052x860.jpg 2x">
            </picture>
            <div class="vi-rectangular-image__credit vi-rectangular-image__credit--bottom-end">
              Image courtesy of the Library of Congress
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- Container (mods: --column) -->
    <div class="vi-container vi-container--column">
      <div class="vi-slider__footer">
        <div class="vi-slider__pagination">
          <!-- paginatinon will be rendered here -->
        </div>
        <div class="vi-slider__controls">
          <div class="vi-slider__navigation vi-slider__navigation--prev">
            <!-- Button type: pagination  -->
            <button type="button" class="vi-btn-pagination vi-btn-pagination--prev vi-btn-pagination--inversed vi-btn"><span class="vi-btn-pagination__label vi-btn-pagination__label--prev vi-btn-pagination__label--inversed vi-btn__label">Previous</span></button>
          </div>
          <div class="vi-slider__navigation vi-slider__navigation--next">
            <!-- Button type: pagination  -->
            <button type="button" class="vi-btn-pagination vi-btn-pagination--next vi-btn-pagination--inversed vi-btn"><span class="vi-btn-pagination__label vi-btn-pagination__label--next vi-btn-pagination__label--inversed vi-btn__label">Next</span></button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Stylesheets #

The following stylesheets are required to display this component.

The following additional stylesheet is used to display the example(s).

JavaScript #

The following javascript is required to display this component.

The following additional javascript is used to display the example(s).

Usage documentation #

Usage documentation can be found here.

Changelog #

Changelog

Fix

  • 26 Mar 2025 - feat(slider): add data-slider-loop to card preset.
  • 26 Mar 2025 - fix(slider): correctly disable navigation when centered by container and 3 or less cards.
  • 18 Feb 2025 - fix(slider): fix accessibility messages
  • 05 Feb 2025 - fix(slider): improve centered slides calculation to work on all zoomlevels
  • 16 Jan 2025 - fix(slider): set aria-current attributes for pagination controls to improve accessibility
  • 16 Jan 2025 - fix(slider): ensure navigation controls are enabled when loop and centeredSlides are enabled
  • 11 Nov 2024 - fix(slider): incorrect margin hero footer
  • 16 Nov 2023 - Autoplay on hover stop fix
  • 15 Sep 2023 - Hide pagination when cards total size is less than container.
  • 01 Mar 2023 - Glitch in crossfade when controlled via pagination.
  • hero footer position.
  • Workaround browser pixel rounding issues.
  • Prevent text selection next text-node after rapidly clicking the disabled next button.
  • Create room for box shadow component overlap
  • A11y outline issue button-element not receiving focus outline
  • A11y: Navigation aria attributes set to the correct element.
  • Pause/Play buttons not reflecting pause state. (js only)
  • Positioning Controls Slider with video buttons.
  • A11y slide containing element with keyboard focus scrolled into view.
  • Hero preset documentation.

Changed

  • Small change to allow usages outside .vi-container on Full Width Page Layout
  • Disabled forced load of images.
  • A11y: Optimised tab-behaviour card preset.
  • A11y: Navigation buttons are buttons now.
  • Ability to detect video mode. (js only)
  • Add ‘next slide’ as argument to slide ‘change’ event.
  • Pause autoplay when playing video in slider.
  • Accessibility: Apply ‘the’ focus outline on pagination (css)
  • Use Rectangular Image –custom in basic slider examples to prevent incorrect use.
  • Added .vi-slider__slides element as root of slider. Not using this element will be frowned upon.
  • Deprecated .vi-slider__navigation-card, .vi-slider__navigation-card--prev and .vi-slider__navigation-card--next. Use .vi-slider__navigation, .vi-slider__navigation--prev and .vi-slider__navigation--next instead.

Added