Partage
  • Partager sur Facebook
  • Partager sur Twitter

taille d'image carousel

    16 mars 2019 à 7:25:21

    bonjour la famille 

    je ne sais si je suis sur le bon forum

    mon sujet traite du carrousel bootsrap

    j'ai réussir a créer mon carrousel mais les images en defillant n'on pas même taille veuillez m'aider a retrouver ou se trouve l'erreur

    voici le code HTML

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta content="charset=utf-8">
    
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- REALISE AVEC BOOTSTRAP 3.0.0 TU CHARGES LE 4--> 
        <link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
        <link rel="stylesheet" href="carousel.css" type="text/css" media="screen" />
        <title>Slider</title>
    
    </head>
    <body>
    
    
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
            <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>
    
            <div class="carousel-inner" role="listbox">
                <div class="item active">
                    <img class="img-responsive" src="image/5.jpg" alt="ipad">
                    <div class="carousel-caption">
                        <h1>Notre Concept</h1>
                    </div>
                </div>
                <div class="item">
                    <img class="img-responsive" src="image/6.jpg" alt="paysage">
                    <div class="carousel-caption">
                        <h1>Notre mission</h1>
                    </div>
                </div>
    
    
                <div class="item">
                    <img class="img-responsive" src="image/altcoin.jpg" alt="paysage">
                    <div class="carousel-caption">
                        <h1>Notre Vision</h1>
                    </div>
                </div>
            </div>
    
            <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">Précédent</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">Suivant</span>
            </a>
        </div>
                
            </div>
        </div>
    </div><!--.container-->
    
    
    <!-- SCRIPT JS -->
    <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
    </body>
    </html>

    mon code css

    body{
    	margin: 0;
    	padding: 0;
    	height: 100vh;
    }
    #slides{
    	width: 50%;
    	margin: 0 auto;
    	margin-top: 10px;
    }
    .carousel-item img{
    	width: 100%;
    	height: 500px !important;
    }




    • Partager sur Facebook
    • Partager sur Twitter
      16 mars 2019 à 10:48:24

      Bonjour, est-ce que de base toutes tes images ont la même dimension ?
      • Partager sur Facebook
      • Partager sur Twitter
        28 mars 2019 à 6:09:38

        bonjour Non je veux choisir des images au hasard
        • Partager sur Facebook
        • Partager sur Twitter
          28 mars 2019 à 10:34:52

          Bonjour,

          Ce qui peut être fait c'est mettre une div qui englobe l'image tu lui fixes une largeur et hauteur fixe 

          ++

          • Partager sur Facebook
          • Partager sur Twitter

          taille d'image carousel

          × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
          • Editeur
          • Markdown