Bootstrap Carousel mit Bild und Text

Elly

Hallo an alle!

Ich habe mir soeben ein Bootstrap Carousel zum Testen gebastelt. Dabei gibt's 3 Bilder und 1 Text (1 Wort Überschrift und 1 Wort Absatz).

Sobald der Slide mit dem Text kommt, fällt das Carousel zusammen. Ich hätte hier gern die Höhe und Breite der Bilder, allerdings habe ich die nirgends angegeben.

Ich habe ein banner-div für den Hintergrund mit einer Höhe von 100vh. Darin befindet sich das Carousel horizontal und vertikal zentriert.

Hier könnt ihr euch ein Bild davon machen: https://mariposa.beautiful-dreaming.net/bootstrap_carousel.html

Mit Navigation zu finden in der index.html

Vielleicht weiß auch einer, warum das am Handy im Querformat aussieht wie auf den Screenshots.

Danke!

Elly

Gunni

Tut mir leid, ich habe keine Lösung, aber bist Du Dir sicher, dass Du Unterforum für .css die richtigen Adressaten einer Frage findest?

Auf Deiner Page zumidnest sieht das so aus:

Code

<script>
    // BEGIN OF Responsive Navigation Bar 
        const body = document.querySelector("body");
        const navbar = document.querySelector(".navbar");
        const menuBtn = document.querySelector(".menu-btn");
        const cancelBtn = document.querySelector(".cancel-btn");
        menuBtn.onclick = ()=>{
          navbar.classList.add("show");
          menuBtn.classList.add("hide");
          body.classList.add("disabled");
        }
        cancelBtn.onclick = ()=>{
          body.classList.remove("disabled");
          navbar.classList.remove("show");
          menuBtn.classList.remove("hide");
        }
        window.onscroll = ()=>{
          this.scrollY > 20 ? navbar.classList.add("sticky") : navbar.classList.remove("sticky");
        }
    // END OF Responsive Navigation Bar 
    </script>

<!-- BEGIN OF Bootstrap Scripts -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<!-- END OF Bootstrap Scripts -->

Alles anzeigen

was finde ich wenig mit .css zu tun hat finde ich.

Elly

Bootstrap ist ja ein CSS-Framework. Was du da zitiert hast, gehört zur Navigation und die hat mit dem Carousel wiederum nichts zu tun.

Daher dachte ich eig schon, dass ich hier richtig bin.

Sempervivum

Stimme so weit zu, für dein Problem ist primär das CSS entscheidend.

Ich habe gerade in einem anderen Thread Cycle2 empfohlen, schau Mal, ob das etwas für dich ist:

Flexslider2 mit max. Imagebreite

Elly

Das sieht auch nicht übel aus. Ich mag' nur nicht, wenn das automatisch durchklickt. Wahrscheinlich lässt sich das irgendwo ändern, hab mir jetzt nur die Seite von dem User hier angesehen.

Flickity ist mir auch schon begegnet. Für eine Slideshow sicher auch lässig - für Portfolios oder Fotoclubs.

Optisch hat mir das von Bootstrap da am besten gefallen und ist für Fotos auch toll.

Hab mir nur gedacht, vl ließe sich da rein mit Text bzw. mit Kombis auch noch was machen.

Sempervivum

Zitat

Ich mag' nur nicht, wenn das automatisch durchklickt. Wahrscheinlich lässt sich das irgendwo ändern

Selbstverständlich, die Doku verrät wie:

data-cycle-timeout="0"

http://jquery.malsup.com/cycle2/demo/basic.php

Dort kannst Du auch ablesen, wie Du prev-/next-Buttons hinzufügen kannst.

Elly

Cool, danke!

Ich muss aber zugeben, die von Bootstrap und Flickity sagen mir mehr zu. Sind zwar aufwändiger, aber auch lässiger.

Sempervivum

Wahrscheinlich ist das alles eine Frage der Gestaltung: Auch den Slider von Cycle2 kannst Du ja mit CSS gestalten, genau so, wie Du es dir vorstellst.

Jetzt mitmachen!