Karussell - Handbuch wien.gv.at

Über das Pattern

Mit einem Karussell kann man mehrere Cards in einer Reihe anbieten
Pfeile zeigen an, in welche Richtung man weiterdrehen kann
Sliden ist auch on touch / swipe möglich

JavaScript

Anwendung

import { adaptControls, setTabIndex, setActiveSlide, initCarousels } from './carousel.js';
initCarousels()

Dependencies

vendor/tiny-slider.js

Parameter und Anwendung in Nunjucks

# Parameter carousel(heading, linktext, linkurl, tabletOnly, description, size)
  heading: "string" # (optional) Karussell Section bekommt eine Überschrift
  linktext: "string" # (optional) Weiterführender Link unterhalb des Karussells
  linkurl: "string" # (optional) URL auf die Link weiterleitet
  tabletOnly: "boolean" # (optional) (default: false) zulässige Werte: true -> Karussell wird erst ab >768px dargestellt
  description: "string" # (optional) Absatz unterhalb der Überschrift
  size: "string" # (optional) zulässige Werte: small, large

# Anwendung
## Die Javascript-Datei "carousel.js" muss eingebunden sein
## Die CSS-Datei "tiny-slider.css" muss eingebunden sein

{% from "components/carousel/carousel.njk" import carousel with context %}
{% from "components/card/card.njk" import card with context %}

{% call carousel(heading = "Überschrift") %}
  <li>
    {% call card() %}
      # Parameter und Anwendung "Cards" siehe /pattern-library/patterns/cards/
    {% endcall %}
  </li>
{% endcall %}