Text, Links etc. auf Teaser Slider

Thema wurde von bajdin, 5. März 2018 erstellt.

  1. bajdin

    bajdin Neues Mitglied

    Registriert seit:
    9. Februar 2018
    Beiträge:
    4
    Danke erhalten:
    1
    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?
     
  2. Wilken (Gambio)

    Wilken (Gambio) Administrator
    Mitarbeiter

    Registriert seit:
    7. November 2012
    Beiträge:
    17.383
    Danke erhalten:
    6.628
    Danke vergeben:
    2.005
    Du baust den Text in deine Grafiken ein. Im Teaser Slider kannst du dann Linkbereiche darum ziehen.
     
  3. Philip

    Philip Erfahrener Benutzer

    Registriert seit:
    28. Mai 2015
    Beiträge:
    163
    Danke erhalten:
    3
    Danke vergeben:
    19
    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.
     
  4. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    14. Juni 2018
    Beiträge:
    1.295
    Danke erhalten:
    151
    Danke vergeben:
    807
    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?
     
  5. Dominik Späte

    Dominik Späte Erfahrener Benutzer

    Registriert seit:
    16. Oktober 2018
    Beiträge:
    221
    Danke erhalten:
    157
    Danke vergeben:
    53
    slider-titel.png @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;
    }
     
  6. Anonymous

    Anonymous Aktives Mitglied

    Registriert seit:
    13. März 2021
    Beiträge:
    35
    Danke erhalten:
    2
    Danke vergeben:
    13
    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;
    }