Nach kurzem Blick in die Browser-Entwicklertools (CSS-Klassen, geladene Skripte) scheint das mit „Elementor Pro“ erstellt worden zu sein, davon speziell diese Funktion:
https://elementor.com/help/media-carousel-widget-pro/
„Elementor Pro“ ist allerdings ein Bezahl-Plugin, und weitere Fragen dazu fallen demnach aus dem Themenbereich dieses Forums, siehe FAQ Punkt B-6 (Keine Fragen zu Bezahl-Plugins)
Hallo Cyrfer, hab vielen Dank dafür! Ich nutze wiederum kein auf Elementor basiertes System, sondern Avada. Wenn jemand eine Möglichkeit sieht, das unabhängig von Elementor zu lösen würde ich mich super freuen!
Zur Frage nach „welche Art von Plugin“: allgemein wird diese Funktion Karussel (engl.: carousel) genannt, als Suchbegriff für das Plugin-Verzeichnis.
Ansonsten bieten viele namhafte Slider-Plugins auch die Darstellung als Karussel, also mehr als ein Bild gleichzeitig. Auch das von Dir verwendete Theme Avada enthält ein „Image Carousel“, mit einer ausführlichen Anleitung online.
Auf der von dir genannten Seite stehen einfach mehrere solcher Karussels untereinander, mit unterschiedlichen Geschwindigkeiten. Oder was genau meinst Du mit „spezielle Karussell-Effekte“?
Für so einen durchlaufenden Effekt die Pausezeit pro Bild auf 0 setzen, und die Übergangsdauer bzw. Slide-Geschwindigkeit nach Wunsch anpassen. Autoplay und Loop aktivieren. Die Bezeichnungen dieser Optionen können je nach Plugin variieren.
Im Prinzip geht das bei Verwendung des Block-Editor sogar ohne Plugin:
- Du fügst in einer Seite einen Zeilen-Block ein, weist ihm volle Bildschirmbreite zu und gibst im in der Sidebar unter Erweitert eine CSS-Klasse
horizontal-sidebar.
- Die Zeile füllst du mit beliebig vielen Bilder, die du in gleicher Reihenfolge zweimal einfügst.
- In Design > Website-Editor > Stil bearbeiten > Zusätzliches CSS (rechte Sidebar) fügst du eigene CSS-Regeln hinzu. Sinngemäß …
.horizontal-slider{
animation: scrolling 10s linear infinite;
}
@keyframes scrolling{
0% { transform: translateX(0); }
100% { transform: translatex(-100%); }
}
.horizontal-slider .wp-block-image img {
max-width: 300px;
}
Die Werte kannst du nach Belieben variieren.
Um meherere Bildstreifen untereinander laufen zu lassen, legst du neue Zeilen-Blöcke an, denen du ggf. noch eine andere CSS-Klasse (horizontal-slider-2, horizontal-slider-3 usw) zuweist. Die musst du dann in deinen zusätzlichen CSS-Regeln berücksichtigen:
.horizontal-slider-2{
animation: scrolling 8s linear infinite;
animation-direction: reverse;
}
.horizontal-slider-3{
animation: scrolling 12s linear infinite;
}
Irgendwo in meinen rasch aufgesetzten CSS-Regeln ist noch ein Fehler, der zu einem Sprung in der Darstellung führt. Ein funktionierendes Code-Beispiel findest du in diesem Code-Pen:
https://codepen.io/hanihsdd/pen/KKaQxdX
Eine auführliche Anleitung findest du unter How to create a CSS-only infinite scroll animation.
Bei dieser Darstellung solltest du allerdings berücksichtigen, dass sie nicht barrierefrei ist, von Suchmaschinen nicht ausgelesen werden kann und auch die Usability der Website nicht verbessert. Webseitenbesucher könnten das auch als störend empfinden. (vgl. Should I Use a Carousel?)
Bei Fragen zu gekauften Themes (hier: Avada) können wir dir nicht weiterhelfen, weil sie uns für einen kostenlosen Support nicht zur Verfügung stehen. Bitte wende dich bei Fragen zu diesem Theme an die Entwickler.
