User Interface / Komponenten / Slideshow

Slideshows werden eingesetzt, um mehrere Inhalte des gleichen Formats an einer Position verfügbar zu machen. Slidesshows werden vor allem für Mediengalerien eingesetzt und sollten keine wichtigen Informationen enthalten, die dem Nutzer nur durch aktive Interaktion zugänglich wären.

Slideshow

Eine Slideshow bildet beliebig viele Items ab. Dabei besteht jedes Item aus einem Hintergrundbild oder -video und kann optional um Elemente wie Text und Buttons erweitert werden. Werden Elemente auf dem Hintergrund platziert, kann er mit bis zu 30% Schwarz abgedunkelt werden. Die Inhalte der Slideshow werden linear durchlaufen. Eine Paginierung im unteren Bereich dient der Orientierung.

Der Nutzer kann die Slideshow mit Swipe-Gesten, Pfeilen oder mit der Mini-Paginierung steuern. Die weißen Pfeile werden erst bei Mouseover eingeblendet. Zur besseren Sichtbarkeit können sie mit einem dunklen Verlauf über dem Hintergrund hinterlegt werden. Auf Touch-Devices wird auf die Pfeilsteuerung verzichtet – die Mini-Paginierung weist auf weitere vorhandene Slides hin.

Beim Wechsel von einem Slide zum nächsten schiebt sich das neue Slide mit einer Push-Bewegung von rechts in den Slideshow-Canvas hinein. Enthält das Slide Text oder weitere Elemente, werden diese erst eingeblendet, wenn das Slide vollständig zu sehen ist.

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

HTML

<div class="abp-gallery abp-js-gallery abp-gallery--slider abp-gallery--autoplay is-animated">
	<div class="abp-gallery__container">
		<div class="abp-gallery__wrapper">
			<div class="abp-gallery__item">
				<a class="abp-gallery__action" href="https://www.audi.com/content/dam/ci/Fundamentals/Basics/Rings/02_Anwendungsbeispiele/04_Audi_Brandplattform_Ringe_Beispiele.jpg?downsize=1000px:*&imwidth=1000">
					<div class="abp-gallery__image-wrapper">
						<div class="abp-gallery__image-container">
							<img class="abp-gallery__image" src="https://www.audi.com/content/dam/ci/Fundamentals/Basics/Rings/02_Anwendungsbeispiele/04_Audi_Brandplattform_Ringe_Beispiele.jpg?downsize=1000px:*&imwidth=1000" />
						</div>
						<div class="abp-gallery__caption">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
					</div>
				</a>
			</div>
			<div class="abp-gallery__item">
				<a class="abp-gallery__action" href="https://www.audi.com/content/dam/ci/Fundamentals/Basics/Rings/02_Anwendungsbeispiele/02_Audi_Brandplattform_Ringe_Beispiele.jpg?downsize=1000px:*&imwidth=1000">
					<div class="abp-gallery__image-wrapper">
						<div class="abp-gallery__image-container">
							<img class="abp-gallery__image" src="https://www.audi.com/content/dam/ci/Fundamentals/Basics/Rings/02_Anwendungsbeispiele/02_Audi_Brandplattform_Ringe_Beispiele.jpg?downsize=1000px:*&imwidth=1000" />
						</div>
						<div class="abp-gallery__caption"></div>
					</div>
				</a>
			</div>
			<div class="abp-gallery__item">
				<a class="abp-gallery__action" href="https://www.audi.com/content/dam/ci/Fundamentals/Basics/Rings/02_Anwendungsbeispiele/03_Audi_Brandplattform_Ringe_Beispiele_.jpg?downsize=1000px:*&imwidth=1000">
					<div class="abp-gallery__image-wrapper">
						<div class="abp-gallery__image-container">
							<img class="abp-gallery__image" src="https://www.audi.com/content/dam/ci/Fundamentals/Basics/Rings/02_Anwendungsbeispiele/03_Audi_Brandplattform_Ringe_Beispiele_.jpg?downsize=1000px:*&imwidth=1000" />
						</div>
						<div class="abp-gallery__caption">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
					</div>
				</a>
			</div>
			<div class="abp-gallery__item">
				<a class="abp-gallery__action" href="https://www.audi.com/content/dam/ci/Fundamentals/Basics/Rings/02_Anwendungsbeispiele/01_Audi_Brandplattform_Ringe_Beispiele.jpg?downsize=1000px:*&imwidth=1000">
					<div class="abp-gallery__image-wrapper">
						<div class="abp-gallery__image-container">
							<img class="abp-gallery__image" src="https://www.audi.com/content/dam/ci/Fundamentals/Basics/Rings/02_Anwendungsbeispiele/01_Audi_Brandplattform_Ringe_Beispiele.jpg?downsize=1000px:*&imwidth=1000" />
						</div>
						<div class="abp-gallery__caption">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
					</div>
				</a>
			</div>
		</div>
	</div>
</div>
<style media="screen">
	body {
		background-color: #f2f2f2;
		padding: 50px 30%;
	}
</style>

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

HTML

<div class="abp-gallery abp-js-gallery abp-gallery--slider abp-gallery--autoplay is-animated">
	<div class="abp-gallery__container">
		<div class="abp-gallery__wrapper">
			<div class="abp-gallery__item">
				<a class="abp-gallery__action" href="https://www.audi.com/content/dam/ci/Fundamentals/Basics/Rings/02_Anwendungsbeispiele/04_Audi_Brandplattform_Ringe_Beispiele.jpg?downsize=1000px:*&imwidth=1000">
					<div class="abp-gallery__image-wrapper">
						<div class="abp-gallery__image-container">
							<img class="abp-gallery__image" src="https://www.audi.com/content/dam/ci/Fundamentals/Basics/Rings/02_Anwendungsbeispiele/04_Audi_Brandplattform_Ringe_Beispiele.jpg?downsize=1000px:*&imwidth=1000" />
						</div>
						<div class="abp-gallery__caption">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
					</div>
				</a>
			</div>
			<div class="abp-gallery__item">
				<a class="abp-gallery__action" href="https://www.audi.com/content/dam/ci/Fundamentals/Basics/Rings/02_Anwendungsbeispiele/02_Audi_Brandplattform_Ringe_Beispiele.jpg?downsize=1000px:*&imwidth=1000">
					<div class="abp-gallery__image-wrapper">
						<div class="abp-gallery__image-container">
							<img class="abp-gallery__image" src="https://www.audi.com/content/dam/ci/Fundamentals/Basics/Rings/02_Anwendungsbeispiele/02_Audi_Brandplattform_Ringe_Beispiele.jpg?downsize=1000px:*&imwidth=1000" />
						</div>
						<div class="abp-gallery__caption"></div>
					</div>
				</a>
			</div>
			<div class="abp-gallery__item">
				<a class="abp-gallery__action" href="https://www.audi.com/content/dam/ci/Fundamentals/Basics/Rings/02_Anwendungsbeispiele/03_Audi_Brandplattform_Ringe_Beispiele_.jpg?downsize=1000px:*&imwidth=1000">
					<div class="abp-gallery__image-wrapper">
						<div class="abp-gallery__image-container">
							<img class="abp-gallery__image" src="https://www.audi.com/content/dam/ci/Fundamentals/Basics/Rings/02_Anwendungsbeispiele/03_Audi_Brandplattform_Ringe_Beispiele_.jpg?downsize=1000px:*&imwidth=1000" />
						</div>
						<div class="abp-gallery__caption">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
					</div>
				</a>
			</div>
			<div class="abp-gallery__item">
				<a class="abp-gallery__action" href="https://www.audi.com/content/dam/ci/Fundamentals/Basics/Rings/02_Anwendungsbeispiele/01_Audi_Brandplattform_Ringe_Beispiele.jpg?downsize=1000px:*&imwidth=1000">
					<div class="abp-gallery__image-wrapper">
						<div class="abp-gallery__image-container">
							<img class="abp-gallery__image" src="https://www.audi.com/content/dam/ci/Fundamentals/Basics/Rings/02_Anwendungsbeispiele/01_Audi_Brandplattform_Ringe_Beispiele.jpg?downsize=1000px:*&imwidth=1000" />
						</div>
						<div class="abp-gallery__caption">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
					</div>
				</a>
			</div>
		</div>
	</div>
</div>
<style media="screen">
	body {
		background-color: #f2f2f2;
		padding: 50px 30%;
	}
</style>

Enthält eine Slideshow ausschließlich freigestellte Bilder, können Pfeil und Paginierung je nach Hintergrundfarbe dunkel oder hell eingesetzt werden. Auf eine Hinterlegung durch einen subtilen Verlauf hinter dem Pfeil sowie einen Schatten hinter der Paginierung wird dann verzichtet.

Subtiler Verlauf hinter Pfeil, subtiler Schatten hinter Paginierung für bessere Sichtbarkeit bei vollflächigen Bildern.

Helle Komponenten ohne hinterlegten Verlauf und ohne Schatten bei Freistellern auf dunklem Hintergrund.

Dunkle Komponenten ohne hinterlegten Verlauf und ohne Schatten bei Freistellern auf hellem Hintergrund.

Bei einer größeren Anzahl von Elementen wird als Paginierung statt dem Step Indicator der Pager with Pagination eingesetzt.

Bei sehr kleiner Abbildungsgröße kann die Paginierung auch unter dem Bild platziert werden.

Audi UI Kit Sketch

ZIP

76.3 MB

Anwendungsbeispiele

Don’ts

Die Slideshow ist für visuellen Inhalt gedacht. Sie sollte nicht für Textinhalte genutzt werden.

Die Slideshow sollte keine komplexen Diagramme enthalten.

Paginierung bei einer Slideshow nicht auf Rot platzieren.

Slideshow

Slideshow

Anwendungsbeispiele

Don’ts

Als Nächstes lesen

User Interface / Komponenten / Table

Ihr CI-Support

Können wir Ihnen helfen?