カルーセルで画像を反応させる方法

私は3つの画像を持つカルーセルを持っていて、それがスクロールすると別の3つの画像が表示されています。しかし、画像は反応しません。ここに私のコードとスクリーンショットがあります。カルーセルで画像を反応させる方法

<div class="form-group"> 
 
    <div class="row"> 
 
    <div class="col-md-2"> 
 
    </div> 
 
    <div class="col-md-9"> 
 
     <h5 id="textColor">Consecteteur Eliptois eliot</h5> 
 
     <div id="carouselIndicators1" class="carousel slide" data-ride="carousel"> 
 
     <ol class="carousel-indicators"> 
 
      <li data-target="#carouselIndicators1" data-slide-to="0" class="active"></li> 
 
      <li data-target="#carouselIndicators1" data-slide-to="1"></li> 
 
      <li data-target="#carouselIndicators1" data-slide-to="2"></li> 
 
     </ol> 
 
     <div class="carousel-inner" role="listbox"> 
 
      <div class="carousel-item active"> 
 
      <img class="d-block img-fluid" src="carouselbox.jpg" alt="First slide" style="padding-right:6px;"> 
 
      <!-- Static Header --> 
 
      <div class="header-text hidden-xs"> 
 
       <div class="col-md-12 text-center"> 
 
       <h5> 
 
        <span><strong>Image1</strong></span><br /> Lorem Ipsum 
 
       </h5> 
 
       </div> 
 
      </div> 
 
      <!-- /header-text --> 
 
      <img class="d-block img-fluid" src="carouselbox.jpg" alt="First slide" style="padding-right:6px;"> 
 
      <!-- Static Header --> 
 
      <div class="header-text2 hidden-xs" id="secondslide"> 
 
       <div class="col-md-12 text-center"> 
 
       <h5> 
 
        <span><strong>Image1</strong></span><br /> Lorem Ipsum 
 
       </h5> 
 
       </div> 
 
      </div> 
 
      <!-- /header-text --> 
 
      <img class="d-block img-fluid" src="carouselbox.jpg" alt="First slide"> 
 
      <!-- Static Header --> 
 
      <div class="header-text3 hidden-xs" id="secondslide"> 
 
       <div class="col-md-12 text-center"> 
 
       <h5> 
 
        <span><strong>Image1</strong></span><br /> Lorem Ipsum 
 
       </h5> 
 
       </div> 
 
      </div> 
 
      <!-- /header-text --> 
 
      </div> 
 
      <div class="carousel-item"> 
 
      <img class="d-block img-fluid" src="carouselbox.jpg" alt="Second slide" style="padding-right:6px;"> 
 
      <!-- Static Header --> 
 
      <div class="header-text hidden-xs" id="secondslide"> 
 
       <div class="col-md-12 text-center"> 
 
       <h5> 
 
        <span><strong>Image1</strong></span><br /> Lorem Ipsum 
 
       </h5> 
 
       </div> 
 
      </div> 
 
      <!-- /header-text --> 
 
      <img class="d-block img-fluid" src="carouselbox.jpg" alt="Second slide" style="padding-right:6px;"> 
 
      <!-- Static Header --> 
 
      <div class="header-text2 hidden-xs" id="secondslide"> 
 
       <div class="col-md-12 text-center"> 
 
       <h5> 
 
        <span><strong>Image1</strong></span><br /> Lorem Ipsum 
 
       </h5> 
 
       </div> 
 
      </div> 
 
      <!-- /header-text --> 
 
      <img class="d-block img-fluid" src="carouselbox.jpg" alt="Second slide"> 
 
      <!-- Static Header --> 
 
      <div class="header-text3 hidden-xs" id="secondslide"> 
 
       <div class="col-md-12 text-center"> 
 
       <h5> 
 
        <span><strong>Image1</strong></span><br /> Lorem Ipsum 
 
       </h5> 
 
       </div> 
 
      </div> 
 
      <!-- /header-text --> 
 
      </div> 
 
      <div class="carousel-item"> 
 
      <img class="d-block img-fluid" src="carouselbox.jpg" alt="Third slide" style="padding-right:6px;"> 
 
      <!-- Static Header --> 
 
      <div class="header-text hidden-xs" id="secondslide"> 
 
       <div class="col-md-12 text-center"> 
 
       <h5> 
 
        <span><strong>Image1</strong></span><br /> Lorem Ipsum 
 
       </h5> 
 
       </div> 
 
      </div> 
 
      <!-- /header-text --> 
 
      <img class="d-block img-fluid" src="carouselbox.jpg" alt="Third slide" style="padding-right:6px;"> 
 
      <!-- Static Header --> 
 
      <div class="header-text2 hidden-xs" id="secondslide"> 
 
       <div class="col-md-12 text-center"> 
 
       <h5> 
 
        <span><strong>Image1</strong></span><br /> Lorem Ipsum 
 
       </h5> 
 
       </div> 
 
      </div> 
 
      <!-- /header-text --> 
 
      <img class="d-block img-fluid" src="carouselbox.jpg" alt="Third slide"> 
 
      <!-- Static Header --> 
 
      <div class="header-text3 hidden-xs" id="secondslide"> 
 
       <div class="col-md-12 text-center"> 
 
       <h5> 
 
        <span><strong>Image1</strong></span><br /> Lorem Ipsum 
 
       </h5> 
 
       </div> 
 
      </div> 
 
      <!-- /header-text --> 
 
      <a href="" style="margin-top:55px;margin-left:12px;"><strong>Next</strong></a> 
 
      </div> 
 
     </div> 
 
     <a class="carousel-control-prev" href="#carouselIndicators1" role="button" data-slide="prev"> 
 
      <span class="carousel-control-prev-icon" aria-hidden="true"></span> 
 
      <span class="sr-only">Previous</span> 
 
     </a> 
 
     <a class="carousel-control-next" href="#carouselIndicators1" role="button" data-slide="next"> 
 
      <span class="carousel-control-next-icon" aria-hidden="true"></span> 
 
      <span class="sr-only">Next</span> 
 
     </a> 
 
     </div> 
 
     <!--end of carousel indicators--> 
 
    </div> 
 
    </div> 
 
</div>

enter image description here

出典

2017-06-23 Nalini Raghavan

この投稿を参照し、画像要素https://stackoverflow.com/questions/11670874/is-there-an-equivalent-to-background-size-cover-and-contain-for-image-elementsに適用してください – Christian4423

[background-sizeに相当する：画像要素にカバーと封筒が含まれていますか？]（https://stackoverflow.com/questions/11670874/is-there-an-equivalent-to-background-size-cover）イメージ要素のための包含） – Christian4423

3枚の画像用の内部ブートストラップ列を作成し、すべての画像にimg-responsiveクラスを追加し、余分なパディングとマージン


 

 
<div class="row"> 
 
     <div class="col-md-4"> 
 
     <img class="d-block img-fluid img-responsive" src="carouselbox.jpg" alt="First slide"> 
 
      <!-- Static Header --> 
 
      <div class="header-text hidden-xs"> 
 
       <div class="col-md-12 text-center"> 
 
        <h5> 
 
         <span><strong>Image1</strong></span><br /> Lorem Ipsum 
 
        </h5> 
 
       </div> 
 
      </div> 
 
      <!-- /header-text --> 
 
    </div> 
 

 
    <div class="col-md-4"> 
 
     <img class="d-block img-fluid img-responsive" src="carouselbox.jpg" alt="First slide"> 
 
      <!-- Static Header --> 
 
      <div class="header-text2 hidden-xs" id="secondslide"> 
 
       <div class="col-md-12 text-center"> 
 
       <h5> 
 
        <span><strong>Image1</strong></span><br /> Lorem Ipsum 
 
       </h5> 
 
       </div> 
 
      </div> 
 
     <!-- /header-text --> 
 
    </div> 
 
    
 
    <div class="col-md-4"> 
 
    <img class="d-block img-fluid img-responsive" src="carouselbox.jpg" alt="First slide"> 
 
      <!-- Static Header --> 
 
      <div class="header-text3 hidden-xs" id="secondslide"> 
 
       <div class="col-md-12 text-center"> 
 
       <h5> 
 
        <span><strong>Image1</strong></span><br /> Lorem Ipsum 
 
       </h5> 
 
       </div> 
 
      </div> 
 
      <!-- /header-text --> 
 
    </div> 
 

 
</div>

を除去

出典

2017-06-23 17:01:14 Aamish

それはすばらしい感謝を働かせます！画面が非常に小さく、テキストがカットされている場合、イメージは非常に小さいです。非常に小さい画面に方法があります、私はスライドの3つのイメージの代わりに1つのイメージをスライドで作ることができますか？ –

カルーセルで画像を反応させる方法

答えて

関連する問題