ブートストラップカルーセルに背景画像が表示されない

カルーセルで背景画像が動作しないようです。他のすべては働いているようですが、私はそれらを働かせることはできません。ブートストラップカルーセルに背景画像が表示されない

<!DOCTYPE html> 
<head> 
    <meta charset="UTF-8> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width = device-width, initial-scale = 1"> 
    <link rel="stylesheet" type="text/css" href="css/bootstrap.css">

これは、バックグラウンドサイズを設定するためにCSSを配置する場所で、スライドごとに使用する予定の画像です。私は、画像へのパスが正しいことを確認して再確認し、それが100％であることを確認しました。

<style type="text/css"> 
     .slide1{ 
      background-image: url('images/image01.jpg'); 
      height: 500px; 
      background-repeat: no-repeat; 
      background-position: center; 
      background-size: cover; 
     } 
     .slide2{ 
      background-image: url('images/image02.jpg'); 
      height: 500px; 
      background-repeat: no-repeat; 
      background-position: center; 
      background-size: cover; 
     } 
     .slide3{ 
      background-image: url('images/image03.jpg'); 
      height: 500px; 
      background-repeat: no-repeat; 
      background-position: center; 
      background-size: cover; 
     } 

    </style> 
</head> 
    <body> 

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

      <ol class="carousel-indicators"> 
       <li data-target="#theCarousel" data-slide-to="0" class="active"> </li > 
       <li data-target="#theCarousel" data-slide-to="1"> </li> 
       <li data-target ="#theCarousel" data-slide-to="2"> </li> 
      </ol >

ここでは、特定のスライドに接続するクラスを使用しました。コードを正しく入力したような気がしますが、画像が表示されない理由は分かりません。

  <div class="carousel-inner"> 
       <div class="item active" > 
        <div class ="slide1"></div> 
       </div> 
       <div class="item"> 
        <div class="slide2"></div> 
       </div> 
       <div class="item"> 
        <div class="slide3"></div> 
       </div> 
      </div> 

      <a class="left carousel-control" href="#theCarousel" data-slide="prev"> 
       <span class="glyphicon glyphicon-chevron-left"> </span> 
      </a> 
      <a class="right carousel-control" href="#theCarousel" data-slide="next"> 
       <span class="glyphicon glyphicon-chevron-right"></span> 
      </a> 
     </div> 


     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
     <script src="js/bootstrap.min.js"></script> 
    </body> 
</html>

出典

2017-03-15 Caarn

divの高さと幅（私の場合は100％）を設定することで、それらを動作させることができました。カルーセルアイテムに何も含まれていない場合、そのデフォルトサイズは0であるため、背景イメージは表示されない可能性があります。

私はBootstrap 4を使用しています。カルーセル項目のdivに直接背景を適用しましたが、既存のslide1などのクラスにwidth:を追加した場合も同様に動作します。

.carousel-item { 
    height:100%; 
    width:100%; 
} 

<div class="carousel-inner"> 
    <div class="carousel-item active slide1" > 

    </div> 
</div>

または

.slide1{ 
    background-image: url('images/image01.jpg'); 
    height: 500px; 
    width: _____; 
    background-repeat: no-repeat; 
    background-position: center; 
    background-size: cover; 
}

出典

2017-05-13 20:02:54 Carolyn

ブートストラップカルーセルに背景画像が表示されない

答えて

関連する問題