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

Slider Video

v0.0.0

This page shows an example of the basic slider with videos in slides.

Some videos show default posters, some show custom posters provided by a Rectangular Image with a video aspect ratio.

alt text
alt text
<!-- Slider  -->
<div class="vi-slider" data-slider-autoplay="5000" data-slider-direction="ltr">
  <div class="vi-slider__slides">
    <div class="vi-slider__wrapper">
      <!-- Add slides here. -->
      <div class="vi-slider__slide">
        <!-- Video  -->
        <div class="vi-video" data-video-id="179713937" data-video-lazy="true" data-video-provider="vimeo">
          <!-- Rectangular Image (mods: --video) -->
          <div class="vi-rectangular-image vi-rectangular-image--video">
            <div class="vi-video__poster"></div>
          </div>
        </div>
      </div>
      <div class="vi-slider__slide">
        <!-- Video  -->
        <div class="vi-video" data-google-key="AIzaSyCCT69wewvdxKePFXN40xeJmy5MQusd9uc" data-video-id="ZiGE3-L4vyg" data-video-lazy="true" data-video-provider="youtube">
          <!-- Rectangular Image (mods: --video) -->
          <div class="vi-rectangular-image vi-rectangular-image--video"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/static/test-1038x584.jpg"></div>
        </div>
      </div>
      <div class="vi-slider__slide">
        <!-- Video  -->
        <div class="vi-video" data-google-key="AIzaSyCCT69wewvdxKePFXN40xeJmy5MQusd9uc" data-video-id="IGiBSCqAH7E" data-video-provider="youtube">
          <!-- Rectangular Image (mods: --video) -->
          <div class="vi-rectangular-image vi-rectangular-image--video">
            <div class="vi-video__poster"></div>
          </div>
        </div>
      </div>
      <div class="vi-slider__slide">
        <!-- Video  -->
        <div class="vi-video" data-video-id="334092219" data-video-provider="vimeo">
          <!-- Rectangular Image (mods: --video) -->
          <div class="vi-rectangular-image vi-rectangular-image--video"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/static/test-1038x584.jpg"></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>

Stylesheets #

The following stylesheets are required to display this component.

The following additional stylesheets are used to display the example(s).

JavaScript #

The following javascript is required to display this component.

The following additional javascripts are 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