Slideshow Abstände ändern - Javascript

  • Hallo ihr,

    ich habe ein Problem mit einer Änderung an einem Javascriptcode. Da ich JS eigentlich überhaupt nicht kann, bin ich etwas ratlos.

    Ich habe eine Slideshow nach dem Prinzip auf folgender Website erstellt:

    https://jsfiddle.net/ConnorsFan/vm9nn5e0/5/


    Der JS Code ist folgender: https://unpkg.com/flickity@2.2.1/dist/flickity.pkgd.min.js

    Meine Frage ist nun: Wie kann ich die Abstände zwischen den im Beispiel roten und grünen Elementen ändern? Ich finde das einfach nicht...UND wie kann ich die Höhe des Elements ändern?

    Vielen Dank!

    LG

    Sun

  • Das hat aber doch nichts mit JavaScript zu tun.

    Das hier ist entscheidend:

    Code
    .carousel-cell {
      width: 50%; /* half-width */
      line-height: 160px;
      margin-right: 10px;
    }
  • Hallo,

    danke für die Antwort.

    Am einfachsten wäre es (meiner Meinung nach) den Wert "left" für das Dokument zu ändern.

    Code
    Element {
        position: absolute;
        left: -50.96%;
    }

    Im HTML hat aber carousel-cell keinen style="" Zusatz, weswegen ich davon ausgehe, dass das Javascript das bestimmt. Vorallem auch, weil der Wert immer wieder anders ist (Je nach Bildschirmgröße).

    Meine Frage ist also. Wo steht, welchen Wert left für .carousel-cell bekommt?

    Mein HTML sieht so aus:

    Code
    <div class="carousel" data-flickity='{ "wrapAround": true }'>
      <div class="carousel-cell"><img src="Bilder/Testimonial1.png" class="Slideshow-img-Testimonial"></div>
      <div class="carousel-cell">2</div>
      <div class="carousel-cell">3</div>
    </div>

    Wenn ich es mit dem Webinspektor von Mozilla anschaue so:

    Code
    <div class="carousel flickity-enabled is-draggable" data-flickity="{ &quot;wrapAround&quot;: true }" tabindex="0">
      <div class="flickity-viewport" style="height: 160px; touch-action: pan-y;"><div class="flickity-slider" style="left: 0px; transform: translateX(25%);"><div class="carousel-cell is-selected" style="position: absolute; left: 0%;">
              <img src="Bilder/Testimonial1.png" class="Slideshow-img-Testimonial">
             </div>
    <div class="carousel-cell" style="position: absolute; left: 50.52%;" aria-hidden="true">2</div>
    <div class="carousel-cell" style="position: absolute; left: -50.52%;" aria-hidden="true">3</div>
    </div></div><button class="flickity-button flickity-prev-next-button previous" type="button" aria-label="Previous"><svg class="flickity-button-icon" viewBox="0 0 100 100"><path d="M 10,50 L 60,100 L 70,90 L 30,50  L 70,10 L 60,0 Z" class="arrow"></path></svg></button><button class="flickity-button flickity-prev-next-button next" type="button" aria-label="Next"><svg class="flickity-button-icon" viewBox="0 0 100 100"><path d="M 10,50 L 60,100 L 70,90 L 30,50  L 70,10 L 60,0 Z" class="arrow" transform="translate(100, 100) rotate(180) "></path></svg></button><ol class="flickity-page-dots"><li class="dot is-selected" aria-label="Page dot 1" aria-current="step"></li><li class="dot" aria-label="Page dot 2"></li><li class="dot" aria-label="Page dot 3"></li></ol></div>

    Eigentlich will ich wissen, wo das ganze CSS Zeug plötzlich her kommt und wie ich das beeinflussen kann.

  • Die Seite ist noch nicht online, aber das ist hier: https://jsfiddle.net/ConnorsFan/vm9nn5e0/5/ auch so.

    Im Feld unten bei der Vorschau ist der Code (wenn man ihn mit dem Inspektor untersucht) dann verändert.


    Links unter Ressources findet man die JS und CSS Dateien...

    https://ajax.googleapis.com/aj…query/2.1.1/jquery.min.js

    https://unpkg.com/flickity@2.2.1/dist/flickity.min.css

    https://unpkg.com/flickity@2.2.1/dist/flickity.pkgd.min.js

    Einmal editiert, zuletzt von Sundream (18. Juli 2019 um 11:55)

  • Ich glaube es steht hier drin:

    aber ich versteh den Code leider nicht...

  • Das hat aber doch nichts mit JavaScript zu tun.

    Das hier ist entscheidend:

    Code
    .carousel-cell {
      width: 50%; /* half-width */
      line-height: 160px;
      margin-right: 10px;
    }

    Hallo Bandit,

    du hattest Recht. Man kann die Änderungen einfach da vornehmen. Problem: Wenn man es nur mit dem Firefox-Inspektor probiert setzt er es irgendwie nicht richtig um. Deshalb dachte ich man muss ins Javascript eingreifen.

    Wenn man aber den Code ändert und speichert setzt er das einwandfrei um.

    Danke!