rogisa: Bilder in Karussell abgerundet

SELF-Forum

Bilder in Karussell abgerundet

rogisa (Versionen)
– Informationen zu den Bewertungsregeln

Hallo Programmierer

Ich bin Laie und habe keine grosse Ahnung von html Befehlen. Vor einiger Zeit habe ich im Netz ein Bilderkarussell gefunden. Wie kann ich die Bilder an den Ecken abrunden? Wo muss ich was einfügen?

Für eure Hilfe bis ich sehr dankbar.

Freundliche Grüsse Roger


 <script>
 var slideIndex = 0;
carousel();

function carousel() {
    var i;
    var x = document.getElementsByClassName("bilder");
    for (i = 0; i < x.length; i++) {
      x[i].style.display = "none"; 
    }
    slideIndex++;
    if (slideIndex > x.length) {slideIndex = 1}
    x[slideIndex-1].style.display = "block";
    setTimeout(carousel, 10000); // Bild alle 10 Sekunden wechseln
}
 </script>
Beitrag melden
–
Informationen zu den Bewertungsregeln

akzeptierte Antworten

  1. Bilder in Karussell abgerundet

    Matthias Scharwies
    – Informationen zu den Bewertungsregeln

    Servus!

    Hallo Programmierer

    Ich bin Laie und habe keine grosse Ahnung von html Befehlen. Vor einiger Zeit habe ich im Netz ein Bilderkarussell gefunden. Wie kann ich die Bilder an den Ecken abrunden? Wo muss ich was einfügen?

    Nicht im JavaScript, sondern im CSS:

    img {
  border-radius: 10px;
}

    Für eure Hilfe bis ich sehr dankbar.

    Als Einstieg:

    Herzliche Grüße

    Matthias Scharwies

    --
    Eigentlich hatte ich heute viel vor - jetzt habe ich morgen viel vor!
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Bilder in Karussell abgerundet

      rogisa (Versionen)
      – Informationen zu den Bewertungsregeln

      Hallo Matthias Herzlichen Dank für die schnelle Antwort. Ich habe den Befehl im WP CSS vor und nach einem bestehenden Eintrag eingeben. Es aber nichts passiert.

      So habe ich es im Texteditor von WP eingefügt.

      <div>
 <img class="bilder" src="https://www.beispiel.com/webdaten/bilder/Bild1.jpg" style="width:50%">
</div>

 <script>
 var slideIndex = 0;
carousel();

function carousel() {
    var i;
    var x = document.getElementsByClassName("bilder");
    for (i = 0; i < x.length; i++) {
      x[i].style.display = "none";
    }
    slideIndex++;
    if (slideIndex > x.length) {slideIndex = 1}
    x[slideIndex-1].style.display = "block";
    setTimeout(carousel, 10000); // Bild alle 10 Sekunden wechseln
}
 </script>

      Muss ich es irgendwo dazwischen einfügen?

      Sorry, das ich deine wertvolle Zeit nochmals beanspruchen muss.

      LG Roger

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. Bilder in Karussell abgerundet

        Rolf B
        – Informationen zu den Bewertungsregeln

        Hallo Roger,

        Ich bin Laie

        Das können wir ändern 😉

        und habe keine grosse Ahnung von html Befehlen.

        HTML hat keine Befehle. Es ist keine Programmiersprache, sondern eine Beschreibungssprache, die Tags verwendet, um Elemente zu bilden. Und der Browser versucht sein Bestes, um deine Beschreibung darzustellen. Unser Wiki kann Dir etwas über die Begriffe erklären.

        Das, was Matthias Dir geschrieben hat, ist kein HTML, sondern eine CSS Regel. CSS Regeln notiert man in einem Stylesheet. Ein Stylesheet ist entweder im <head> Bereich des HTML Dokuments eingebaut, in Form eines <style>-Elements, oder es steht in einer eigenen Datei, die auf .css endet und vom HTML über ein <link rel="stylesheet"...> Element eingebunden wird. Eine HTML Seite kann mehrere Stylesheets haben - aber das steuert vermutlich Wordpress für Dich.

        Sicherlich gibt es die Möglichkeit, für einer Wordpress-Seite ein Stylesheet mit eigenen Regeln beizufügen. Ich weiß nur nicht wie, von WordPress habe ich keine Ahnung.

        Ich würde Matthias Vorschlag noch ein bisschen modifizieren:

        img.bilder {
   border-radius: 10px; 
}

        img.bilder ist ein CSS-Selektor. Er besagt, dass die in den geschweiften Klammern notierten Eigenschaften für alle img Elemente gelten, die die Klasse bilder haben. Matthias schlug den Selektor img vor - damit würde die border-radius Angabe für jedes Bild gelten und das könnte zu viele Bilder treffen.

        An dieser Stelle könntest Du auch die Breite von 50% notieren, statt dem img Element ein style-Attribut zu geben. Dann sähe das so aus:

        img.bilder {
   width: 50%;
   border-radius: 10px; 
}

        Wenn Du keine CSS hast oder kennst, kannst Du die Eigenschaften aus der CSS Regel auch direkt im style-Attribut der img-Elemente eintragen. Das musst Du dann aber für jedes Bild einzeln tun; der Vorteil von CSS ist, dass man über die Selektoren die Elemente herausfiltern kann, für die ein bestimmter Regelsatz gelten soll.

          <img class="bilder" 
       src="https://www.example.com/webdaten/bilder/Bild1.jpg"
       style="width:50%; border-radius: 10px;">

        Rolf

        --
        sumpsi - posui - obstruxi
        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

        1. Bilder in Karussell abgerundet

          Matthias Scharwies (Versionen)
          – Informationen zu den Bewertungsregeln

          Servus!

          Ich würde Matthias Vorschlag noch ein bisschen modifizieren:

          img.bilder {
   border-radius: 10px; 
}

          Wordpress vergibt ja eigene Klassen, da müsste man im Karussell-Script eine weitere Klasse vergeben - evtl.:

          .carousel img.bilder {
    border-radius: 10px; 
}

          Ist das Karussell denn bereits in deinem Theme integriert?

          Sicherlich gibt es die Möglichkeit, für einer Wordpress-Seite ein Stylesheet mit eigenen Regeln beizufügen. Ich weiß nur nicht wie, von WordPress habe ich keine Ahnung.

          Wir haben da mal was angefnangen:

          Interessant wären die Kapitel 4 und 5 - das würde aber einiges an Einarbeitungszeit erfordern.

          Herzliche Grüße

          Matthias Scharwies

          --
          Eigentlich hatte ich heute viel vor - jetzt habe ich morgen viel vor!
          Beitrag melden
          –
          Informationen zu den Bewertungsregeln

          1. Bilder in Karussell abgerundet

            rogisa
            – Informationen zu den Bewertungsregeln

            Herzlichen Dank für den neuen Code.

            Beitrag melden
            –
            Informationen zu den Bewertungsregeln

        2. Bilder in Karussell abgerundet

          rogisa
          – Informationen zu den Bewertungsregeln

          Hallo Rolf

          Herzlichen Dank für deine lehrreiche Hilfe. Es hat beides hervorragend funktioniert.

          Freundliche Grüsse Roger

          Beitrag melden
          –
          Informationen zu den Bewertungsregeln