Partage
  • Partager sur Facebook
  • Partager sur Twitter

Ajouter des images à un carousel Bootstrap

Bootstrap

Sujet résolu
コービー
    18 mai 2022 à 14:03:46

    J'ai crée un carousel avec Bootstrap mais le Background à une couleur gris. j'aimerais bien ajouter des images

    Est ce possible?

    <!doctype html>
<html lang="fr">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    
    <style>
        .carousel-item {
            height: 32rem;
            background: #777;
            color: #fff;
            position: relative;
        }
        .container {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            padding-bottom: 50px;
        }
        
    </style>

    <div id="myCarousel" class="carousel slide" data-ride="carousel">
        <ol class="carousel-indicators">
            <li data-bs-target="#myCarousel" data-bs-slide-to="0" class="active"></li>
            <li data-bs-target="#myCarousel" data-bs-slide-to="1"></li>
            <li data-bs-target="#myCarousel" data-bs-slide-to="2"></li>
        </ol>
        <div class="carousel-inner">
            <div class="carousel-item active">
                <div class="container">
                    <h1>Exemple 1</h1>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicin. Vel sapiente iure ipsa nesciunt? 
                        A rem placeat consectetur quo optio odit diandae.</p>
                    <a href="#" class="btn btn-lg btn-primary">
                        Sign up today
                    </a>
                </div>
            </div>
            <div class="carousel-item">
                <div class="container">
                    <h1>Exemple 1</h1>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicin. Vel sapiente iure ipsa nesciunt? 
                        A rem placeat consectetur quo optio odit diandae.</p>
                    <a href="#" class="btn btn-lg btn-primary">
                        Sign up today
                    </a>
                </div>
            </div>
            <div class="carousel-item">
                <div class="container">
                    <h1>Exemple 1</h1>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicin. Vel sapiente iure ipsa nesciunt? 
                        A rem placeat consectetur quo optio odit diandae.</p>
                    <a href="#" class="btn btn-lg btn-primary">
                        Sign up today
                    </a>
                </div>
            </div>
        </div>
        <a href="#myCarousel" class="carousel-control-prev" role="button" data-slide="prev">
            <span class="sr-only">Previous</span>
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        </a>
        <a href="#myCarousel" class="carousel-control-next" role="button" data-slide="next">
            <span class="sr-only">Next</span>
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
        </a>

    </div>
    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
    -->
  </body>
</html>



    • Partager sur Facebook
    • Partager sur Twitter
    Mewen_bzh
    • HTML / CSS
      18 mai 2022 à 14:09:34

      Bonjour,

      Cela est évidemment possible.

      Il suffit de suivre la doc de Bootstrap : https://getbootstrap.com/docs/5.2/components/carousel/#with-captions

      • Partager sur Facebook
      • Partager sur Twitter
      Je ne réponds pas aux messages privés.
      コービー
        18 mai 2022 à 17:02:35

        Merci pour votre réponse ça m'a beaucoup aidé.
        • Partager sur Facebook
        • Partager sur Twitter
        AbcAbc6
          18 mai 2022 à 17:15:29

          KobyLogiciel a écrit:

          Merci pour votre réponse ça m'a beaucoup aidé.

          Bonjour,

          Sujet résolu

          Tu peux passer le sujet à "résolu" (bouton en haut à droite du sujet) et cliquer sur les pouces levés des messages qui t'ont aidé⋅e ;)

          • Partager sur Facebook
          • Partager sur Twitter

          Ajouter des images à un carousel Bootstrap

          × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
          × Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
          • Editeur ●
          • Markdown