ブートストラップ付きサムネイル付きカルーセルv4

Question

サムネイル付きの回転台のデモをbootstrap 3hereと見ました。

私は同じことをブートストラップv4に実装しようとしていますが、サムネイルを含む全体の高さに左右の影が入るようなUIのいくつかを修正する方法を理解することはできませんでした。 Hereは、v4のフィドルです。

<div id='carousel-custom' class='carousel slide' data-ride='carousel'> 
     <!-- Wrapper for slides --> 
     <div class='carousel-inner'> 
      <div class='carousel-item active'> 
       <img src='http://placehold.it/400x200&text=slide1' alt='' /> 
      </div> 
      <div class='carousel-item'> 
       <img src='http://placehold.it/400x200&text=slide2' alt='' /> 
      </div> 
      <div class='carousel-item'> 
       <img src='http://placehold.it/400x200&text=slide3' alt='' /> 
      </div> 
     </div> 

     <!-- Controls --> 
     <a class='left carousel-control' href='#carousel-custom' data-slide='prev'> 
      <span class='glyphicon glyphicon-chevron-left'></span> 
     </a> 
     <a class='right carousel-control' href='#carousel-custom' data-slide='next'> 
      <span class='glyphicon glyphicon-chevron-right'></span> 
     </a> 


    <!-- Indicators --> 
    <ol class='carousel-indicators'> 
     <li data-target='#carousel-custom' data-slide-to='0' class='active'><img src='http://placehold.it/100x50&text=slide1' alt='' /></li> 
     <li data-target='#carousel-custom' data-slide-to='1'><img src='http://placehold.it/100x50&text=slide2' alt='' /></li> 
     <li data-target='#carousel-custom' data-slide-to='2'><img src='http://placehold.it/100x50&text=slide3' alt='' /></li> 

    </ol> 
</div> 

CSSの変更：あなたは.carousel-inner要素にあなたのコントロールを移動した場合

#carousel-example-generic { 
    margin: 20px auto; 
    width: 400px; 
} 

#carousel-custom { 
    margin: 20px auto; 
    width: 400px; 
} 
#carousel-custom .carousel-indicators { 
    margin: 10px 0 0; 
    overflow: auto; 
    position: static; 
    text-align: left; 
    white-space: nowrap; 
    width: 100%; 
} 
#carousel-custom .carousel-indicators li { 
    background-color: transparent; 
    -webkit-border-radius: 0; 
    border-radius: 0; 
    display: inline-block; 
    height: auto; 
    margin: 0 !important; 
    width: auto; 
} 
#carousel-custom .carousel-indicators li img { 
    display: block; 
    opacity: 0.5; 
} 
#carousel-custom .carousel-indicators li.active img { 
    opacity: 1; 
} 
#carousel-custom .carousel-indicators li:hover img { 
    opacity: 0.75; 
} 

Answer 1

ブートストラップ4では、スライダーサムネイルにlist-inlineを使用する方が簡単で、余分なCSSは必要ありません。

<div class="col-lg-6 offset-lg-3" id="slider"> 
      <div id="myCarousel" class="carousel slide"> 
       <div class="carousel-inner"> 
        <div class="active item carousel-item" data-slide-number="0"> 
         <img src="http://placehold.it/1200x480&amp;text=one" class="img-fluid"> 
        </div> 
        <div class="item carousel-item" data-slide-number="1"> 
         <img src="http://placehold.it/1200x480/888/FFF" class="img-fluid"> 
        </div> 
        <div class="item carousel-item" data-slide-number="2"> 
         <img src="http://placehold.it/1200x480&amp;text=three" class="img-fluid"> 
        </div> 
        <div class="item carousel-item" data-slide-number="3"> 
         <img src="http://placehold.it/1200x480&amp;text=four" class="img-fluid"> 
        </div> 
        <div class="item carousel-item" data-slide-number="4"> 
         <img src="http://placehold.it/1200x480&amp;text=five" class="img-fluid"> 
        </div> 
        <div class="item carousel-item" data-slide-number="5"> 
         <img src="http://placehold.it/1200x480&amp;text=six" class="img-fluid"> 
        </div> 
        <div class="item carousel-item" data-slide-number="6"> 
         <img src="http://placehold.it/1200x480&amp;text=seven" class="img-fluid"> 
        </div> 
        <div class="item carousel-item" data-slide-number="7"> 
         <img src="http://placehold.it/1200x480&amp;text=eight" class="img-fluid"> 
        </div> 

        <a class="carousel-control left pt-3" href="#myCarousel" data-slide="prev"><i class="fa fa-chevron-left"></i></a> 
        <a class="carousel-control right pt-3" href="#myCarousel" data-slide="next"><i class="fa fa-chevron-right"></i></a> 

       </div> 


       <ul class="carousel-indicators list-inline"> 
        <li class="list-inline-item active"> 
         <a id="carousel-selector-0" class="selected" data-slide-to="0" data-target="#myCarousel"> 
          <img src="http://placehold.it/80x60&amp;text=one" class="img-fluid"> 
         </a> 
        </li> 
        <li class="list-inline-item"> 
         <a id="carousel-selector-1" data-slide-to="1" data-target="#myCarousel"> 
          <img src="http://placehold.it/80x60&amp;text=two" class="img-fluid"> 
         </a> 
        </li> 
        <li class="list-inline-item"> 
         <a id="carousel-selector-2" data-slide-to="2" data-target="#myCarousel"> 
          <img src="http://placehold.it/80x60&amp;text=three" class="img-fluid"> 
         </a> 
        </li> 
        <li class="list-inline-item"> 
         <a id="carousel-selector-3" data-slide-to="3" data-target="#myCarousel"> 
          <img src="http://placehold.it/80x60&amp;text=four" class="img-fluid"> 
         </a> 
        </li> 
        <li class="list-inline-item"> 
         <a id="carousel-selector-4" data-slide-to="4" data-target="#myCarousel"> 
          <img src="http://placehold.it/80x60&amp;text=five" class="img-fluid"> 
         </a> 
        </li> 
        <li class="list-inline-item"> 
         <a id="carousel-selector-5" data-slide-to="5" data-target="#myCarousel"> 
          <img src="http://placehold.it/80x60&amp;text=six" class="img-fluid"> 
         </a> 
        </li> 
        <li class="list-inline-item"> 
         <a id="carousel-selector-6" data-slide-to="6" data-target="#myCarousel"> 
          <img src="http://placehold.it/80x60&amp;text=seven" class="img-fluid"> 
         </a> 
        </li> 
        <li class="list-inline-item"> 
         <a id="carousel-selector-7" data-slide-to="7" data-target="#myCarousel"> 
          <img src="http://placehold.it/80x60&amp;text=eight" class="img-fluid"> 
         </a> 
        </li> 
       </ul> 
     </div> 
    </div> 

http://www.codeply.com/go/tBbcVXe1xZ

Answer 2

、それはサムネイルをダウンストレッチません。

<div class='carousel-inner'> 
    <div class='carousel-item active'> 
     <img src='http://placehold.it/400x200&text=slide1' alt='' /> 
    </div> 
    <div class='carousel-item'> 
     <img src='http://placehold.it/400x200&text=slide2' alt='' /> 
    </div> 
    <div class='carousel-item'> 
     <img src='http://placehold.it/400x200&text=slide3' alt='' /> 
    </div> 

    <div class='carousel-item'> 
     <img src='http://placehold.it/400x200&text=slide4' alt='' /> 
    </div> 
    <div class='carousel-item'> 
     <img src='http://placehold.it/400x200&text=slide5' alt='' /> 
    </div> 
    <div class='carousel-item'> 
     <img src='http://placehold.it/400x200&text=slide6' alt='' /> 
    </div> 

    <div class='carousel-item'> 
     <img src='http://placehold.it/400x200&text=slide7' alt='' /> 
    </div> 
    <div class='carousel-item'> 
     <img src='http://placehold.it/400x200&text=slide8' alt='' /> 
    </div> 
    <div class='carousel-item'> 
     <img src='http://placehold.it/400x200&text=slide9' alt='' /> 
    </div> 

    <!-- Controls --> 
    <a class='left carousel-control' href='#carousel-custom' data-slide='prev'> 
     <span class='glyphicon glyphicon-chevron-left'></span> 
    </a> 
    <a class='right carousel-control' href='#carousel-custom' data-slide='next'> 
     <span class='glyphicon glyphicon-chevron-right'></span> 
    </a> 

</div> 

後

はHTMLコードです

これはあなたの更新されたフィドルです：JSFiddle