1. Herzlich willkommen bei WPDE.org, dem grössten und ältesten deutschsprachigen Community-Forum rund um das Thema WordPress. Du musst angemeldet oder registriert sein, um Beiträge verfassen zu können.
    Information ausblenden

Carousel: dynamische Bildgröße?

Dieses Thema im Forum "Plugins und Widgets" wurde erstellt von edf, 7. April 2024.

  1. edf

    edf New Member

    Registriert seit:
    7. April 2024
    Beiträge:
    4
    Zustimmungen:
    0
    Hi, ich möchte ein Carousel mit drei festen Bildern (das mittlere größer hervorgehoben) realisieren, dass sich bei veränderter Bildschirmgröße / -auflösung immer auf die volle Bildschirmbreite anpasst, indem die Bilder größer bzw. kleiner skaliert werden.
    Ist das überhaupt möglich?
    Ich habe schon einige freie Slider und Gallerie PlugIns ausprobiert. (z.B. Foo Gallery, aber da scheint die Bildschirmanpassung nur über die Anzahl der sichtbaren Bilder zu laufen ...)
    Hat hier jemand Erfahrung mit welchem PlugIn oder zusätzlichem CSS-Code die Größenskalierung geht?
    Ich habe auch kein Problem auch einmal paar € dafür auszugeben, aber nicht jährlich wiederkehrend.
    LG, Hendrik
     
  2. r23

    r23 Well-Known Member

    Registriert seit:
    9. Dezember 2006
    Beiträge:
    7.420
    Zustimmungen:
    605
    Um ein responsives Carousel mit drei Bildern zu erstellen, bei dem das mittlere Bild hervorgehoben und größer dargestellt wird, kannst du CSS Media Queries und Flexbox oder Grid verwenden. Hier ist ein einfaches Beispiel, wie du dies mit HTML und CSS umsetzen kannst:

    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    In diesem Code wird Flexbox verwendet, um die Bilder nebeneinander anzuordnen. Das mittlere Bild wird durch eine größere Breitenangabe hervorgehoben. Die :hover Pseudoklasse sorgt dafür, dass Bilder beim Überfahren mit der Maus leicht vergrößert werden. Die Media Query passt die Größe der Bilder an, wenn die Bildschirmbreite 768px oder weniger beträgt, sodass sie auf kleineren Bildschirmen besser dargestellt werden.

    Passe den Code entsprechend deiner spezifischen Bildern und Designanforderungen an.
     
  3. edf

    edf New Member

    Registriert seit:
    7. April 2024
    Beiträge:
    4
    Zustimmungen:
    0
    Danke !!!, das sieht schon mal sehr toll aus.
    Nun suche ich noch, dass bei :hover auch ein kurzer Text "Klick" angezeigt wird und bei einem Mausklick (egal wo auf dem Bild) eine URL im selben Fenstertab aufgerufen wird. Das soll also eine Navigationsfunktion haben.
    Alternative ein Plugin mit solchen Funktionen in eine Flexbox zu stecken, ginge das auch?
    (Muss jetzt leider was anderes machen - Hilfe willkommen - wenn ich später selbst was dazu finde stecke ich es hier rein...)
     
  4. edf

    edf New Member

    Registriert seit:
    7. April 2024
    Beiträge:
    4
    Zustimmungen:
    0
    Tja, stundenlang probiert - aber ich bekomme keinen spezifischen Text auf den einzelnen Bildern hin.
    Auch ein einfaches title="Bild 1" erscheint nicht auf dem Bild.
    Texte hatte ich immer nur neben den Bildern, unter dem ersten Bild oder alle nur in der mitte auf dem mittleren Bild...
     
  5. edf

    edf New Member

    Registriert seit:
    7. April 2024
    Beiträge:
    4
    Zustimmungen:
    0
    Nun habe ich folgende Lösung für mich gefunden:
    Das Plugin "Robo Gallery" erfüllt die Anforderung volle Screenbreite (automatische Bildscalierung), Text-, URL-Funktionalität. Den oben im Code gezeigten Hover-Scale-Effekt habe ich mit folgendem Custom-CSS code hinzugefügt.

    .rbs-img-container:hover{
    transform: scale(1.1);
    }

    --> Endlich geschafft - Vielen Dank für die Hilfe oben !!
     
  1. Diese Seite verwendet Cookies, um Inhalte zu personalisieren, diese deiner Erfahrung anzupassen und dich nach der Registrierung angemeldet zu halten.
    Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies.
    Information ausblenden
  1. Diese Seite verwendet Cookies, um Inhalte zu personalisieren, diese deiner Erfahrung anzupassen und dich nach der Registrierung angemeldet zu halten.
    Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies.
    Information ausblenden