带引导程序v4的缩略图传送带

Question

我看到了带缩略图的传送带演示程序bootstrap 3here。

我正在试图为bootstrap v4实现相同的功能，但是无法弄清楚如何修复UI的某些细节，如左/右阴影，以及包括缩略图在内的整个高度。 Here是v4的小提琴。

以下是HTML代码：

<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-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

如果您移动控制到.carousel-inner元素，它不会向下通过缩略图伸展：

<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> 

这是你更新的小提琴显示此：JSFiddle