Karussell

Mit einem Karussell können Sie mehrere Cards in einer Reihe anbieten.
In der Desktop-Ansicht zeigen Pfeile an, in welche Richtung Sie weiterdrehen können.
Mobil ist sliden ist auch on touch/per swipe möglich.
Unter dem Karussell zeigen Indikatoren (Punkte) an, wie viele Cards das Karussell enthält.
Autoplay ist zuschaltbar, jedoch nicht barrierefrei und nur in seltenen Fällen gerechtfertigt.
SEO-relevante Inhalte sollten nicht in einem Karussell versteckt werden.

Varianten

Karussell mit mittleren Cards

Vorschau

Aktuelles

Alsergrunder Kultursommer 2024

Der 4. Alsergrunder Kultursommer bietet von 28. Juni bis 1. September 2024 ein abwechslungsreiches und buntes Veranstaltungsprogramm.

Die Musiker*innen, 4 Männer und eine Frau, posieren vor einem Rollbalken

Umgestaltung Frankhplatz

Im Mai und Juni laden Bezirksvertretung und Gebietsbetreuung ein, sich über die Veränderungen zu informieren und Ideen einzubringen.

Stadtplanausschnitt rund um den Frankhplatz im 9. Bezirk

Urbanes Experiment Galileigasse

Die Galileigasse wird temporär umgestaltet und ist ab 7. Juni autofrei. Ein lebendiger Treffpunkt zeigt ab 14. Juni, wie eine langfristige Veränderung aussehen könnte.

Lichtentalerpark wird vergrößert

Der Lichtentalerpark wird erweitert, um Anwohner*innen mehr Grünflächen zum Spielen und Erholen zu bieten.

3 neue Bezirke fürs Klimateam

2024 startet das Wiener Klimateam im 9., 12. und 15. Bezirk. Ab September können Sie Ihre Ideen und Vorschläge einbringen.

Bezirksvorsteher Wilfried Zankl, Klimastadtrat Jürgen Czernohorszky, Bezirksvorsteherin Saya Ahmad und Bezirksvorsteher Dietmar Baurecht

Mehr Neuigkeiten

Code

<div>
  <h2>Aktuelles</h2>
  <wm-carousel dots>
    <wm-card size="m" blocklink="">
      <h3 slot="heading">
        <a href="#">Alsergrunder Kultursommer 2024</a>
      </h3>
      <div slot="content">
        Der 4. Alsergrunder Kultursommer bietet von 28. Juni bis 1. September 2024 ein abwechslungsreiches und buntes Veranstaltungsprogramm.
      </div>
      <img slot="media" src="/images/pattern/carousel/alsergrunder-kultursommer.webp" title="copyright: Dusha Connection" alt="Die Musiker*innen, 4 Männer und eine Frau, posieren vor einem Rollbalken"/>
    </wm-card>
    <wm-card size="m" blocklink="">
      <h3 slot="heading">
        <a href="#">Umgestaltung Frankhplatz</a>
      </h3>
      <div slot="content">
        Im Mai und Juni laden Bezirksvertretung und Gebietsbetreuung ein, sich über die Veränderungen zu informieren und Ideen einzubringen.
      </div>
      <img slot="media" src="/images/pattern/carousel/planausschnitt-frankhplatz.webp" title="copyright: BV 9 - Gebietsbetreuung Stadterneuerung" alt="Stadtplanausschnitt rund um den Frankhplatz im 9. Bezirk"/>
    </wm-card>
    <wm-card size="m" blocklink="">
      <h3 slot="heading">
        <a href="#">Urbanes Experiment Galileigasse</a>
      </h3>
      <div slot="content">
        Die Galileigasse wird temporär umgestaltet und ist ab 7. Juni autofrei. Ein lebendiger Treffpunkt zeigt ab 14. Juni, wie eine langfristige Veränderung aussehen könnte.
      </div>
      <img slot="media" src="/images/pattern/carousel/galileigasse.webp" title="copyright: Tim Dornaus epilogy.photography" alt="Grätzloase mit Holzzaun und Sitzmöbeln"/>
    </wm-card>
    <wm-card size="m" blocklink="">
      <h3 slot="heading">
        <a href="#">Lichtentalerpark wird vergrößert</a>
      </h3>
      <div slot="content">
        Der Lichtentalerpark wird erweitert, um Anwohner*innen mehr Grünflächen zum Spielen und Erholen zu bieten.
      </div>
      <img slot="media" src="/images/pattern/carousel/lichtentalerpark.webp" title="copyright: Wiener Stadtgärten" alt="Spielplatz in einem Park"/>
    </wm-card>
    <wm-card size="m" blocklink="">
      <h3 slot="heading">
        <a href="#">3 neue Bezirke fürs Klimateam</a>
      </h3>
      <div slot="content">
        2024 startet das Wiener Klimateam im 9., 12. und 15. Bezirk. Ab September können Sie Ihre Ideen und Vorschläge einbringen.
      </div>
      <img slot="media" src="/images/pattern/carousel/klimateam-neue-bezirke.webp" title="copyright: Stadt Wien/Martin VOTAVA" alt="Bezirksvorsteher Wilfried Zankl, Klimastadtrat Jürgen Czernohorszky, Bezirksvorsteherin Saya Ahmad und Bezirksvorsteher Dietmar Baurecht"/>
    </wm-card>
  </wm-carousel>
  <div style="text-align: right;">
    <wm-cta>
      <a href="#">Mehr Neuigkeiten</a>
    </wm-cta>
  </div>
</div>

Karussell mit großen Cards

Vorschau

Alsergrunder Kultursommer 2024

Der 4. Alsergrunder Kultursommer bietet von 28. Juni bis 1. September 2024 ein abwechslungsreiches und buntes Veranstaltungsprogramm.

Umgestaltung Frankhplatz

Im Mai und Juni laden Bezirksvertretung und Gebietsbetreuung ein, sich über die Veränderungen zu informieren und Ideen einzubringen.

Urbanes Experiment Galileigasse

Die Galileigasse wird temporär umgestaltet und ist ab 7. Juni autofrei. Ein lebendiger Treffpunkt zeigt ab 14. Juni, wie eine langfristige Veränderung aussehen könnte.

Lichtentalerpark wird vergrößert

Der Lichtentalerpark wird erweitert, um Anwohner*innen mehr Grünflächen zum Spielen und Erholen zu bieten.

3 neue Bezirke fürs Klimateam

2024 startet das Wiener Klimateam im 9., 12. und 15. Bezirk. Ab September können Sie Ihre Ideen und Vorschläge einbringen.

Code

<wm-carousel dots="">
  <wm-card size="l" blocklink="">
    <h3 slot="heading">
      <a href="#">Alsergrunder Kultursommer 2024</a>
    </h3>
    <div slot="content">
      Der 4. Alsergrunder Kultursommer bietet von 28. Juni bis 1. September 2024 ein abwechslungsreiches und buntes Veranstaltungsprogramm.
    </div>
    <img slot="media" src="/images/pattern/carousel/alsergrunder-kultursommer.webp" title="copyright: Dusha Connection" alt="Die Musiker*innen, 4 Männer und eine Frau, posieren vor einem Rollbalken"/>
  </wm-card>
  <wm-card size="l" blocklink="">
    <h3 slot="heading">
      <a href="#">Umgestaltung Frankhplatz</a>
    </h3>
    <div slot="content">
      Im Mai und Juni laden Bezirksvertretung und Gebietsbetreuung ein, sich über die Veränderungen zu informieren und Ideen einzubringen.
    </div>
    <img slot="media" src="/images/pattern/carousel/planausschnitt-frankhplatz.webp" title="copyright: BV 9 - Gebietsbetreuung Stadterneuerung" alt="Stadtplanausschnitt rund um den Frankhplatz im 9. Bezirk"/>
  </wm-card>
  <wm-card size="l" blocklink="">
    <h3 slot="heading">
      <a href="#">Urbanes Experiment Galileigasse</a>
    </h3>
    <div slot="content">
      Die Galileigasse wird temporär umgestaltet und ist ab 7. Juni autofrei. Ein lebendiger Treffpunkt zeigt ab 14. Juni, wie eine langfristige Veränderung aussehen könnte.
    </div>
    <img slot="media" src="/images/pattern/carousel/galileigasse.webp" title="copyright: Tim Dornaus epilogy.photography" alt="Grätzloase mit Holzzaun und Sitzmöbeln"/>
  </wm-card>
  <wm-card size="l" blocklink="">
    <h3 slot="heading">
      <a href="#">Lichtentalerpark wird vergrößert</a>
    </h3>
    <div slot="content">
      Der Lichtentalerpark wird erweitert, um Anwohner*innen mehr Grünflächen zum Spielen und Erholen zu bieten.
    </div>
    <img slot="media" src="/images/pattern/carousel/lichtentalerpark.webp" title="copyright: Wiener Stadtgärten" alt="Spielplatz in einem Park"/>
  </wm-card>
  <wm-card size="l" blocklink="">
    <h3 slot="heading">
      <a href="#">3 neue Bezirke fürs Klimateam</a>
    </h3>
    <div slot="content">
      2024 startet das Wiener Klimateam im 9., 12. und 15. Bezirk. Ab September können Sie Ihre Ideen und Vorschläge einbringen.
    </div>
    <img slot="media" src="/images/pattern/carousel/klimateam-neue-bezirke.webp" title="copyright: Stadt Wien/Martin VOTAVA" alt="Bezirksvorsteher Wilfried Zankl, Klimastadtrat Jürgen Czernohorszky, Bezirksvorsteherin Saya Ahmad und Bezirksvorsteher Dietmar Baurecht"/>
  </wm-card>
</wm-carousel>

Karussell mit kleinen Cards

Vorschau

Alsergrunder Kultursommer 2024

Umgestaltung Frankhplatz

Urbanes Experiment Galileigasse

Lichtentalerpark wird vergrößert

3 neue Bezirke fürs Klimateam

Code

<wm-carousel dots>
  <wm-card size="s" blocklink="">
    <h3 slot="heading">
      <a href="#">Alsergrunder Kultursommer 2024</a>
    </h3>
    <img slot="media" src="/images/pattern/carousel/alsergrunder-kultursommer.webp" title="copyright: Dusha Connection" alt="Die Musiker*innen, 4 Männer und eine Frau, posieren vor einem Rollbalken"/>
  </wm-card>
  <wm-card size="s" blocklink="">
    <h3 slot="heading">
      <a href="#">Umgestaltung Frankhplatz</a>
    </h3>
    <img slot="media" src="/images/pattern/carousel/planausschnitt-frankhplatz.webp" title="copyright: BV 9 - Gebietsbetreuung Stadterneuerung" alt="Stadtplanausschnitt rund um den Frankhplatz im 9. Bezirk"/>
  </wm-card>
  <wm-card size="s" blocklink="">
    <h3 slot="heading">
      <a href="#">Urbanes Experiment Galileigasse</a>
    </h3>
    <img slot="media" src="/images/pattern/carousel/galileigasse.webp" title="copyright: Tim Dornaus epilogy.photography" alt="Grätzloase mit Holzzaun und Sitzmöbeln"/>
  </wm-card>
  <wm-card size="s" blocklink="">
    <h3 slot="heading">
      <a href="#">Lichtentalerpark wird vergrößert</a>
    </h3>
    <img slot="media" src="/images/pattern/carousel/lichtentalerpark.webp" title="copyright: Wiener Stadtgärten" alt="Spielplatz in einem Park"/>
  </wm-card>
  <wm-card size="s" blocklink="">
    <h3 slot="heading">
      <a href="#">3 neue Bezirke fürs Klimateam</a>
    </h3>
    <img slot="media" src="/images/pattern/carousel/klimateam-neue-bezirke.webp" title="copyright: Stadt Wien/Martin VOTAVA" alt="Bezirksvorsteher Wilfried Zankl, Klimastadtrat Jürgen Czernohorszky, Bezirksvorsteherin Saya Ahmad und Bezirksvorsteher Dietmar Baurecht"/>
  </wm-card>
</wm-carousel>

Karussell in Stages

Das Karussell kann in der Stage mit Bild, Galerie oder Video befüllt werden.

Vorschau

1. #wienliebe Festival im Mai

Mehr erfahren

Neuer Gemeindebau für Simmering

Mehr erfahren

Wie geht’s den Kindern und Jugendlichen

Zum Interview

Arbeite auch du an Wien

Jetzt bewerben

Code

<wm-carousel single="1200" dots autoplay style="max-width: 1200px;">
  <wm-stage style="--stage-margin-large: 0 !important;" class="current first active">
    <div slot="content">
      <h1>1. #wienliebe Festival im Mai</h1>
      <wm-cta>
        <a href="#">Mehr erfahren</a>
      </wm-cta>
    </div>
    <img src="/images/pattern/carousel/wienliebe_alt.jpg" slot="media" alt="" width="1200" height="450" title="copyright: APA"/>
  </wm-stage>
  <wm-stage style="--stage-margin-large: 0 !important;" inert="">
    <div slot="content">
      <h1>Neuer Gemeindebau für Simmering</h1>
      <wm-cta>
        <a href="#">Mehr erfahren</a>
      </wm-cta>
    </div>
    <img src="/images/pattern/carousel/Gemeindebau_Simmering.jpg" slot="media" alt="" width="1200" height="450" title="copyright: APA"/>
  </wm-stage>
  <wm-stage style="--stage-margin-large: 0 !important;" inert="">
    <div slot="content">
      <h1>Wie geht’s den Kindern und Jugendlichen</h1>
      <wm-cta>
        <a href="#">Zum Interview</a>
      </wm-cta>
    </div>
    <img src="/images/pattern/carousel/Faire_Chancen.jpg" slot="media" alt="" width="1200" height="450" title="copyright: APA"/>
  </wm-stage>
  <wm-stage style="--stage-margin-large: 0 !important;" class="last" inert="">
    <div slot="content">
      <h1>Arbeite auch du an Wien</h1>
      <wm-cta>
        <a href="#">Jetzt bewerben</a>
      </wm-cta>
    </div>
    <img src="/images/pattern/carousel/StW_MA44.jpg" slot="media" alt="" width="1200" height="450" title="copyright: APA"/>
  </wm-stage>
</wm-carousel>

Dev

Interaktive Demo

label muss angegeben werden

nextLabel

prevLabel

autoplayInterval muss in Kombination mit dots und autoplay verwendet werden

dots

autoplay

Vorschau

<wm-carousel data-demo-pattern="wm-carousel-preview" >
    <wm-card size="m" blocklink>
      <h3 slot="heading">
        <a href="#">Alsergrunder Kultursommer 2024</a>
      </h3>
      <div slot="content">
        Der 4. Alsergrunder Kultursommer bietet von 28. Juni bis 1. September 2024 ein abwechslungsreiches und buntes Veranstaltungsprogramm.
      </div>
      <img slot="media" src="/images/pattern/carousel/alsergrunder-kultursommer.webp" title="copyright: Dusha Connection" alt="Die Musiker*innen, 4 Männer und eine Frau, posieren vor einem Rollbalken">
    </wm-card>
    <wm-card size="m" blocklink>
      <h3 slot="heading">
        <a href="#">Umgestaltung Frankhplatz</a>
      </h3>
      <div slot="content">
        Im Mai und Juni laden Bezirksvertretung und Gebietsbetreuung ein, sich über die Veränderungen zu informieren und Ideen einzubringen.
      </div>
      <img slot="media" src="/images/pattern/carousel/planausschnitt-frankhplatz.webp" title="copyright: BV 9 - Gebietsbetreuung Stadterneuerung" alt="Stadtplanausschnitt rund um den Frankhplatz im 9. Bezirk">
    </wm-card>
    <wm-card size="m" blocklink>
      <h3 slot="heading">
        <a href="#">Urbanes Experiment Galileigasse</a>
      </h3>
      <div slot="content">
        Die Galileigasse wird temporär umgestaltet und ist ab 7. Juni autofrei. Ein lebendiger Treffpunkt zeigt ab 14. Juni, wie eine langfristige Veränderung aussehen könnte.
      </div>
      <img slot="media" src="/images/pattern/carousel/galileigasse.webp" title="copyright: Tim Dornaus epilogy.photography" alt="Grätzloase mit Holzzaun und Sitzmöbeln">
    </wm-card>
    <wm-card size="m" blocklink>
      <h3 slot="heading">
        <a href="#">Lichtentalerpark wird vergrößert</a>
      </h3>
      <div slot="content">
        Der Lichtentalerpark wird erweitert, um Anwohner*innen mehr Grünflächen zum Spielen und Erholen zu bieten.
      </div>
      <img slot="media" src="/images/pattern/carousel/lichtentalerpark.webp" title="copyright: Wiener Stadtgärten" alt="Spielplatz in einem Park">
    </wm-card>
    <wm-card size="m" blocklink>
      <h3 slot="heading">
        <a href="#">3 neue Bezirke fürs Klimateam</a>
      </h3>
      <div slot="content">
        2024 startet das Wiener Klimateam im 9., 12. und 15. Bezirk. Ab September können Sie Ihre Ideen und Vorschläge einbringen.
      </div>
      <img slot="media" src="/images/pattern/carousel/klimateam-neue-bezirke.webp" title="copyright: Stadt Wien/Martin VOTAVA" alt="Bezirksvorsteher Wilfried Zankl, Klimastadtrat Jürgen Czernohorszky, Bezirksvorsteherin Saya Ahmad und Bezirksvorsteher Dietmar Baurecht">
    </wm-card>
  </wm-carousel>

API

Abhängigkeiten

HTML

<script src="https://assets.wien.gv.at/theme/latest/js/components/Carousel/Carousel.js" type="module"></script>
<script src="https://assets.wien.gv.at/theme/latest/js/components/Button/Button.js" type="module"></script>
<script src="https://assets.wien.gv.at/theme/latest/js/components/Icon/Icon

* Mit einem Karussell kann man mehrere Cards in einer Reihe anbieten
* Pfeile zeigen an.js" type="module"></script>
<script src="https://assets.wien.gv.at/theme/latest/js/components/in welche Richtung man weiterdrehen kann
* Sliden ist auch on touch / swipe möglich.js" type="module"></script>

JavaScript

import { Carousel } from './wienermelange/assets/js/components/Carousel/Carousel.js';
    import { Button } from './wienermelange/assets/js/components/Button/Button.js';
    import { Icon

* Mit einem Karussell kann man mehrere Cards in einer Reihe anbieten
* Pfeile zeigen an } from './wienermelange/assets/js/components/Icon/Icon

* Mit einem Karussell kann man mehrere Cards in einer Reihe anbieten
* Pfeile zeigen an.js';
    import {  swipe möglich } from './wienermelange/assets/js/components/in welche Richtung man weiterdrehen kann
* Sliden ist auch on touch / swipe möglich.js';

Eigenschaften

Eigenschaften
Eigenschaft	Beschreibung	Werte	Default
`dots`	Indikatoren unter dem Karussell anzeigen.	`Boolean`	`false`
`autoplay`	Indikatoren und Play/Pause Button unter dem Karussell anzeigen (nur in Kombination).	`Boolean`	`false`
`autoplayInterval`	Intervall für die automatische Wiedergabe in Millisekunden.	`Number`	`5000`
`label`	Semantische Bezeichnung des Karussells (Pflichtfeld).	`String`	leer
`single`	Wenn nur ein Element angezeigt werden soll, Breite in Pixel übergeben.	`Number`	leer
`nextLabel`	Label für den Button rechts	`String`	`"Nächstes Element"`
`prevLabel`	Label für den Button links	`String`	`"Vorheriges Element"`
`position`	Index beginnend bei 1 oder Keyword	`String\|last`	`1`

Slots

Name	Beschreibung
`default`	Cards oder Bilder

Methoden

Eigenschaft	Optionen	Argumente
`prev`	Zum nächsten Slide springen	/
`next`	Zum vorherigen Slide springen	/
`slide`	Zu einem bestimmten Slide springen	0-basierter Index (`Number`) Slidewechsel animieren (`Boolean`)
`toggleAutoplay`	Toggles the autoplay state	/

Events

Event	Beschreibung	Rückgabewert
`wm-slide-changed`	Slide wurde gewechselt

CSS API

Property	Beschreibung
`--carousel-ratio`	Seitenverhältnis der einzelnen Slides
`--carousel-item-inner-padding`	Innenabstand in einzelnen Slides
`--carousel-shadow-offset`	Platz um das Karussell für Schatten
`--carousel-gap`	Abstand zwischen Elementen
`--carousel-control-background-color`	Hintergrundfarbe der Controls
`--carousel-control-background-image-start`	Hintergrundbild des ersten Buttons
`--carousel-control-background-image-end`	Hintergrundbild des zweiten Buttons
`--carousel-dots-color`	Hintergrundfarbe der Indikatoren
`--carousel-dots-border-color`	Rahmenfarbe der Indikatoren
`--carousel-dots-color--active`	Hintergrundfarbe des aktiven Indikatoren
`--carousel-dots-gap`	Abstand der Indikatoren zueinander
`--carousel-dots-gap-s`	Kleiner Abstand der Indikatoren zueinander
`--carousel-strip-spacing`	Abstand nach dem Strip
`--carousel-navigation-spacing`	Abstand in der Navigation

Kontakt

Haben Sie noch Fragen, Feedback oder brauchen Sie ein Element, das die Pattern Library noch nicht bietet?

handbuch@ma53.wien.gv.at