--- title: Slider Element url: "https://www.toujou.de/service/elementbibliothek/media-elements/slider-element/" date: 2019-01-11 modified: 2022-09-27 --- # Slider Element 1. [Home](https://www.toujou.de/) 2. [Service](https://www.toujou.de/service/) 3. [Elementbibliothek](https://www.toujou.de/service/elementbibliothek/) 4. [Media Elements](https://www.toujou.de/service/elementbibliothek/media-elements/) 5. [Slider Element](https://www.toujou.de/service/elementbibliothek/media-elements/slider-element/) Slider Element ============== Ein Slider mit mehreren Bildern, zentriert auf der Seite. Item-ID: 05-002 [Beispielansicht](#c1003326) [Anleitung](#c1003324) [Verhalten](#c1003322) ![](https://www.toujou.de/_assets/processed/fFM4bo7u1K86jniQa0JgNTmPzO-cejG8U_z6s0JpOgQ/q:85/w:433/h:54/fn:Y3NtXzA1XzAwMi1TbGlkZXJfRWxlbWVudF8yMDAwXzI1MF8zMDc0ZDFkOTE0:t/cb:bb67f4c90c878e11dfb74eb7fca705fe4f736b59/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvZGVtby9JY29ucy9Gb3JtYXRlL0JpYl8yMDAwXzI1MC8wNV9NZWRpYV9FbGVtZW50c18yMDAwXzI1MC8wNV8wMDItU2xpZGVyX0VsZW1lbnRfMjAwMF8yNTAucG5n) --- Beispielansicht ----------------- - ![](https://www.toujou.de/_assets/processed/Wsl0D0xdS9rItfUgbKsQCuQTerbQo_NBg5e-sq7RUfk/q:85/c:1922.4:1080:fp:0.5:0.5/rt:force/w:433/h:243/fn:Y3NtX25hdHVyZV8wMV82NmQ5YTMxOWQ3:t/cb:cb634793507b1ed08c3736bfdedcda03741907fa/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvZGVtby9uYXR1cmVfMDEuanBn) - ![](https://www.toujou.de/_assets/processed/swvsgiqSQZ2SfJnaJ0asImemFMjym2kCqhCCRyi2wHk/q:85/c:1922.4:1080:fp:0.5:0.5/rt:force/w:433/h:243/fn:Y3NtX25hdHVyZV8wMl9lYWQxZGMxMjk4:t/cb:c280ff572f1a66b5eb140eea932e106cb4525732/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvZGVtby9uYXR1cmVfMDIuanBn) - [ ![](https://www.toujou.de/_assets/processed/k1QwoY45WUf9BdseFHJmr_P1ipIkNG-KnGql1R7IMyw/q:85/c:1626:913.48314606742:fp:0.5:0.5/rt:force/w:433/h:243/fn:Y3NtX25hdHVyZV8wM18yMWFlMmMxZDQ5:t/cb:522284e836adb80a786f8b170be6a9981034caf3/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvZGVtby9uYXR1cmVfMDMuanBn) ](https://www.toujou.de/blog/typo3-update-v9-lts-fuer-redakteure/) von --- Anleitung ----------- [ ![](https://www.toujou.de/_assets/processed/A0dNPseNWwTZDU_buRHHw_6pMl7yc8RJ2syb7xd3cIY/q:85/c:2560:1440:fp:0.5:0.5/rt:force/w:432/h:243/fn:Y3NtXzA1LTAwMi0xLWJpbGRlcl9hbmxlZ2VuXzFkYjE2NmYxY2Y:t/cb:891b95cd0cbc2f59363d44a3fba7a7a74cf7bbcf/bG9jYWw6L2ZpbGVhZG1pbi9NYW51YWwvMDVfTWVkaWFfRWxlbWVudHMvMDUtMDAyX3NsaWRlcl9lbGVtZW50LzA1LTAwMi0xLWJpbGRlcl9hbmxlZ2VuLnBuZw) ](https://www.toujou.de/fileadmin/Manual/05_Media_Elements/05-002_slider_element/05-002-1-bilder_anlegen.png) ### Bilder anlegen - Klicken Sie auf den Button **Inhalt** und wählen unter dem Reiter *Media* das Element **Slider Element** aus. - Klicken Sie nun im Reiter *Content* **Bild hinzufügen/Add media file**. - Wählen Sie eine/mehrere Bilddateien aus Ihrer Fileliste aus oder laden Sie die gewünschten Dateien in den entsprechenden Ordner hoch. [ ![](https://www.toujou.de/_assets/processed/7CyMrsSi_Te-wq_qZ6ejSJ8uI1XJcVe5oa25MIhnQa0/q:85/c:2560:1440:fp:0.5:0.5/rt:force/w:432/h:243/fn:Y3NtXzA1LTAwMi0yLWJpbGRfYmVhcmJlaXRlbl9mZmRjY2U2NTNi:t/cb:88af288a30aae176a4c4bf3eea492c80a727bfc8/bG9jYWw6L2ZpbGVhZG1pbi9NYW51YWwvMDVfTWVkaWFfRWxlbWVudHMvMDUtMDAyX3NsaWRlcl9lbGVtZW50LzA1LTAwMi0yLWJpbGRfYmVhcmJlaXRlbi5wbmc) ](https://www.toujou.de/fileadmin/Manual/05_Media_Elements/05-002_slider_element/05-002-2-bild_bearbeiten.png) ### Bilder bearbeiten - Unter jedem nun hochgeladenen Bild öffnet sich ein Menü zur Bearbeitung der **Bild-Metadaten**. [ ![](https://www.toujou.de/_assets/processed/B0Lp8W7sCi7Pmcm5NYQy_L6B9MHbn6dABqI3FRCOgDk/q:85/c:2560:1440:fp:0.5:0.5/rt:force/w:432/h:243/fn:Y3NtXzA1LTAwMi0zLWJpbGRfZm9ybWF0aWVyZW5fMTA4Yzg5NmM4Yg:t/cb:9253c2c5d0a40435a27d4248be41fb241fa58304/bG9jYWw6L2ZpbGVhZG1pbi9NYW51YWwvMDVfTWVkaWFfRWxlbWVudHMvMDUtMDAyX3NsaWRlcl9lbGVtZW50LzA1LTAwMi0zLWJpbGRfZm9ybWF0aWVyZW4ucG5n) ](https://www.toujou.de/fileadmin/Manual/05_Media_Elements/05-002_slider_element/05-002-3-bild_formatieren.png) ### Bilder formatieren - Unter dem Button **Editor öffnen können Sie das Seitenverhältnis für Mobile, Tablet-, Desktop- oder Widescreen-Ansicht anpassen. - Setzen Sie den Bildfokus für das Responsive-Verhalten jeweils auf die gewünschte Bildfläche. --- ### Element Design für das Element In diesem Element können Sie das Erscheinungsbild ganz leicht mit dem *Element Design* via einem Klick individualisieren. Mit der Auswahl von Standard, Primary, Secondary sowie Schriftfarbe wechseln Sie die Farbe der **Pfeile** am rechten und linken Rand des Slides sowie der **Bullets in der Progress Bar** entsprechend der in den [Theme-Settings definierten Farbe](https://www.toujou.de/service/toujou-setup/farben-festlegen/). [ ![](https://www.toujou.de/_assets/processed/i7cIXZV4vfVmSDXWXpk7bplBsmFOgNXR7GDDmNvUT2U/q:85/w:432/h:41/fn:Y3NtX1NsaWRlcl9jb2xvcl9zZXR0aW5nc19jYTM1NWYzOGVj:t/cb:c9f1557429d213271dd437211e9268d38163f75f/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvZWxlbWVudF9saWJyYXJ5LzA1X01lZGlhX2VsZW1lbnRzLzA1XzAyX3NsaWRlcl9nYWxsZXJ5L1NsaWRlcl9jb2xvcl9zZXR0aW5ncy5wbmc) ](https://www.toujou.de/fileadmin/toujou/element_library/05_Media_elements/05_02_slider_gallery/Slider_color_settings.png) - Mit Klick auf das Dropdown-Menü unter **Farbe** im Reiter Allgemein erhalten Sie die Auswahl für eine individuelle Designfarbe. - Wählen Sie aus Standard, Primary, Secondary sowie Schriftfarbe die gewünschte Option aus. - Speichern Sie die Änderungen im Element, damit sie sichtbar werden. --- Verhalten ----------- Das *Slider Element* bietet Ihnen die Möglichkeit, mehrere Bilder in Form einer Galerieschleife darzustellen. Achten Sie auf ein ähnliches Seitenverhältnis der Bilder und meiden die Mischung von Hoch- und Querformaten. **Responsive:** Das Slider-Element wird bei jeder verfügbaren Bildschirmgröße in einem festen Verhältnis vollständig angezeigt. --- Verknüpfte Themen ----------------- Erläuterungen aus dem [toujou](https://www.toujou.de/service/toujou-setup/)- & [TYPO3-Setup](https://www.toujou.de/tutorials/), die mit dieser Elementanleitung in Verbindung stehen. [Bildbearbeitung](https://www.toujou.de/tutorials/seiteninhalte/bildbearbeitung/) [Dateiliste](https://www.toujou.de/tutorials/dateiliste/)