Bootstrap 5 - Carousel startet nicht

Kickflip · 24. Dezember 2020

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 · 24. Dezember 2020

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 · 25. Dezember 2020

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 · 25. Dezember 2020

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 · 25. Dezember 2020

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 · 25. Dezember 2020

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 · 25. Dezember 2020

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

Bei BS 4 brauche ich auch jQuery, richtig?

Sempervivum · 25. Dezember 2020

Ja.

Kickflip · 26. Dezember 2020

works like a charm with Bootstrap 4.

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