Partage
  • Partager sur Facebook
  • Partager sur Twitter

Bootstrap carroussel

Comment faire ça marche

M4rluc
    16 juin 2017 à 9:57:41

    Salut. J'utilise actuellement bootstrap pour optimiser mon site mais je n'arrive pas à utiliser le carrousel, il ne se forme pas. Aidez moi svp.

    En plusje pige pas je dois mettre 3 images et il m'en met que deux et puis y'a pas genre du css ou d javascript à écrire?

    Voici mon code: 

    <!DOCTYPE html>

    <html>

    <head>

    <title>Breedog</title>

    <meta charset="utf-8">

    <link rel="stylesheet" href="bootstrap.css" />

    </head>

    <body>

    <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">

      <!-- Indicators -->

      <ol class="carousel-indicators">

        <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>

        <li data-target="#carousel-example-generic" data-slide-to="1"></li>

        <li data-target="#carousel-example-generic" data-slide-to="2"></li>

      </ol>

      <!-- Wrapper for slides -->

      <div class="carousel-inner" role="listbox">

        <div class="item active">

          <img src="Golden retriever.jpg" alt="chien">

          <div class="carousel-caption">

            ...

          </div>

        </div>

        <div class="item">

          <img src="chiot-promenade-large-fb-58cab6a80240b.jpg" alt="chien">

          <div class="carousel-caption">

            ...

          </div>

        </div>

        ...

      </div>

      <!-- Controls -->

      <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">

        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>

        <span class="sr-only">Previous</span>

      </a>

      <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">

        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>

        <span class="sr-only">Next</span>

      </a>

    </div>

    </body>

    </html>

    • Partager sur Facebook
    • Partager sur Twitter
    Tom Martin
    • HTML / CSS
      16 juin 2017 à 10:47:09

      Salut, tout d'abord quand tu écris tu codes tu as un bouton pour éditer ton code de façons lisible après.

      Premier point je vois qu'il te manque une ligne important pour l'utilisateur de bootstrap dans ton head qui est:

      <meta name="viewport" content="width=device-width,initial-scale=1.0">

      En ce qui concerne le fait que tu n'ai que 2 images c'est normal tu en as déclaré seulement 2. 

      Edit ton code de façons plus clair car j'ai du mal à le lire.

      Cordialement Thomas.

      • Partager sur Facebook
      • Partager sur Twitter
      Lord Morpheus
      • HTML / CSS
        16 juin 2017 à 17:14:22

        Bonjour,

        Je vais plus loin que Tom Martin, il suffit de lire la documentation de Bootstrap. Il manque des appels à des fichiers obligatoire (bootstrap.css, bootstrap.js, jquery.js)

        • Partager sur Facebook
        • Partager sur Twitter

        Lord Morpheus, Seigneur Morphée, Dieu Grecs des Songes, Fils de la Nuit et du Sommeil

        Bootstrap carroussel

        × 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