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.
© 2017 House of Clip Art
Image courtesy of the Library of Congress
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">
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 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.
© 2017 House of Clip Art
Photo by Tracy Thomason
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">
© 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 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.
Photo by Tracy Thomason
Image courtesy of the Library of Congress
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">
Photo by Tracy Thomason
</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 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
- 23 Nov 2023 - Added inactivity start for slider when used does not interact with it.
- 09 Nov 2022 - `.vi-slider__footer–centered modifier. (awaiting use case for documentation)
- 25 Oct 2022 - Example of Centered Card Preset
- PBS support
- Optional Pause/Play button. Also example of Hero with Pause/Play button.
- RTL support
- Hero preset.
- Basic Slider video example
- Basic Slider and documentation
- Initial draft