Bootstrap 5 - Carousel startet nicht

Kickflip

Hi,

mein Carousel startet nicht.

Sieht jemand, warum das so ist? Meine Navbar funktioniert auch einwandfrei mit allen Animationen.

Benutze Bootstrap 5.

edit: bootstrap.js wird auch geladen laut Konsole.

Code

<body>
<div id="carouselExampleSlidesOnly" class="carousel slide" data-mdb-ride="carousel">
    <div class="carousel-inner">
      <div class="carousel-item active" data-mdb-interval="10000">
        <img
          src="https://mdbootstrap.com/img/new/slides/041.jpg"
          class="d-block w-100"
          alt="..."
        />
      </div>
      <div class="carousel-item">
        <img
          src="https://mdbootstrap.com/img/new/slides/042.jpg"
          class="d-block w-100"
          alt="..."
        />
      </div>
      <div class="carousel-item">
        <img
          src="https://mdbootstrap.com/img/new/slides/043.jpg"
          class="d-block w-100"
          alt="..."
        />
      </div>
    </div>
  </div>




  <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js" integrity="sha384-q2kxQ16AaE6UbzuKqyBE9/u/KzioAlnx2maXQHiDX9d4/zp8Ok3f+M7DPm+Ib6IU" crossorigin="anonymous"></script>
  <script src="{{ url_for('static', filename='js/bootstrap.js') }}"></script>
  <script src="https://kit.fontawesome.com/xxxxxx.js"></script>

</body>

Alles anzeigen

Danke und schöne Weihnachten

Sempervivum

Ich sehe da in deinem Code dieses:

data-mdb-ride

Ich war früher einmal mit einem MD-Bootstrap konfrontiert, das waren Erweiterungen für Bootstrap, teilweise kostenpflichtig. Verwendest Du daraus das Carousel oder das Standard-Bootstrap?

Kickflip

Ich verwende das Standard-Bootstrap. Also bezahle nichts.

Selbst das Standardbeispiel von der Website bewegt sich nicht. Alles wird korrekt angezeigt, aber es bewegt sich nicht und ich kann auch nicht auf den "Weiter-Pfeil" für das nächste Bild klicken.

Sempervivum

Wenn ich das "mdb" aus den Namen der data-Attribute lösche, funktioniert es einwandfrei:

Code

    <div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel" data-interval="2000">
        <div class="carousel-inner">
            <div class="carousel-item active">
                <img src="https://mdbootstrap.com/img/new/slides/041.jpg" class="d-block w-100" alt="..." />
            </div>
            <div class="carousel-item">
                <img src="https://mdbootstrap.com/img/new/slides/042.jpg" class="d-block w-100" alt="..." />
            </div>
            <div class="carousel-item">
                <img src="https://mdbootstrap.com/img/new/slides/043.jpg" class="d-block w-100" alt="..." />
            </div>
        </div>
    </div>

Alles anzeigen

Kickflip

Hm, bei mir bewegt sich das Carousel nicht. Also es wird mir ordentlich angezeigt, aber es bleibt immer das erste Bild sichtbar.

D.h. es ist irgendwas mit dem import von bootstrap.js nicht in Ordnung, oder?

Sempervivum

Was noch unterschiedlich ist bei dir und mir: Ich benutze BS 4 und Du BS 5. Ich wollte zunächst BS 5 nehmen und habe einen kurzen Blick darauf geworfen und gesehen, dass es eine Alpha-Version ist, d. h. eine sehr frühe, die noch fehlerhaft sein kann. Daher bin ich bei BS 4 geblieben.

Kickflip

okey, dann versuche ich es mal mit BS 4. Werde berichten.

Bei BS 4 brauche ich auch jQuery, richtig?

Sempervivum

Ja.

Kickflip

works like a charm with Bootstrap 4.

Dann werde ich wohl auch auf BS 4 für das Erste umsteigen. Herzlichen Dank.

Jetzt mitmachen!