Hallo liebe Community, ist es irgendwie möglich Text auf den Teaser Slider zu platzieren? Also heutzutage ist es ja üblich das im Slider zusammen mit dem Bild Texte hinterlegt werden um z.B. Aktionen oder sonstiges zu bewerben. Ist dies mit dem Teaser Slider irgendwie möglich? Wenn nicht, gibt es eine Alternative zum Teaser Slider? Danke für eure Antworten! Uppss.... Bin leider in der falschen Kategorie gelandet. Ich nutze GX3. Kann jemand das Thema verschieben?
Hallo, gibt es hier ein Update? Ich finde die Lösung, Text in die Grafik einzubauen eher ungünstig. Die Kombination aus geringer Datei-Größe der Slider-Bilder (für bessere Ladezeiten) und einer optisch scharfen Text-Darstellung funktioniert kaum. Da wäre es tatsächlich super, wenn man Text über die Grafik legen könnte.
Hallo, Oha! Das hatte ich ja gar nicht gesehen. Sehr schön... Da werd ich mal mit basteln! Frage dazu: Wird das dann für alle Slider (Desktop, Tablet Portait, Tablet Landscape usw.) übernommen oder muss ich das nochmal für jedes Anzeigegerät individuell machen?
@Philip & für wen's noch aktuell ist: Einen Titel kann man ja schon angeben. Um diesen über's Bild zu legen, kann man Nachfolgendes im eigenen CSS verwenden. Sollte dann standardmäßig so aussehen wie auf dem Screenshot anbei. Code: .swiper-slide-active[data-thumb-text]::before{ content:attr(data-thumb-text); background:#eee; opacity:.8; position:absolute; right:5px; top:5px; padding:3px; border-radius:2px; }
Ich möche erst mal Danke an Dominik sagen, das CSS hat super geklappt. Eines ist jedoch hinzu zu fügen. Es mus für die Funktion bei jedem Slider ein "Vorschaubild" eingefügt werden. Sonst geht das CSS nicht. Warum ist mir noch ein Rätzel. Vieleicht gibt es noch eine möglichkeit dieses zu umgehen. (Vorschaubilder passen sich nicht in der größe an und spätestens auf der Mobilen Ansicht passt es nicht mehr) PS: Habe den CSS noch etwas angepasst. Für die Anfänger, wie ich, wo Interesse haben. Code: .swiper-slide-active[data-thumb-text]::before{ content:attr(data-thumb-text); color:#FFFFFF; font-family: "OPEN Sana", regular,italic; font-size: calc(10px + (28 - 10) * ((100vw - 320px) / (1600 - 320))); background:rgba(37, 78, 46, 0.75); opacity:.8; position:absolute; right:50%; top:60%; transform: translate(50%,-50%); padding:8px; border-radius:0px; }
Lassen sich auf die Thumbnails auch Links legen sodass mit einem Klick auf das Thumbnail sowohl das Slider-Bild als auch eine Content-Seite aufgerufen wird?