Slideshow

Slideshow

Slideshows are used to make several content items available of the same format in one position. Slideshows are mainly used for media galleries and should not contain any important information that would only be accessible to the user through active interaction.

Slideshow

A slideshow presents any number of items. Each item consists of a background visual or video and can be optionally expanded to include elements such as text and buttons. If elements are placed against the background, the latter can be darkened with up to 30% black. The content items of the slideshow are presented in linear fashion. Pagination in the lower area provides orientation.

The user can control the slideshow by means of swipe gestures, arrows or mini-pagination. The white arrows only appear on mouseover. For improved visibility, a dark gradient can be added on top of the background. Arrow control is not used on touch devices – mini-pagination indicates the other slides available.

When changing from one slide to the next, the new slide moves into the slideshow canvas with a push movement from the right. If the slide contains text or other elements, these do not appear until the slide is fully visible.

If a slideshow contains only cut-out images, the arrow and pagination can be dark or light, depending on the background colour. In this case there is no need for a a subtle gradient background behind the arrow or a shadow behind the pagination.

Subtle gradient behind arrow, subtle arrow behind pagination for better visibility on full-coverage images.
Light components without background gradient and without shadow on cut-out images against a dark background.
Dark components without background gradient and without shadow on cut-out images against a light background.
If there is a larger number of elements, the pager with pagination is used instead of the step indicator.
In the case of a very small display size, the pagination can also be positioned under the image.
Audi UI Kit Sketch
Version 1.4 (Releases: <a href="https://github.com/audi/audi-templates/releases" target="_blank">https://github.com/audi/audi-templates/releases</a>)
ZIP
76.3 MB

Examples

Don’ts

Slideshows are intended for visual content. They should not be used for text.
Slideshows should not contain complex diagrams.
Don’t place the pagination for a slideshow against a red background.
Your CI-Support
May we help you?