在 PHP 和 Bootstrap 中带有缩略图导航的动态引导轮播

Question

我想制作一个底部带有图像缩略图的动态引导轮播。我浏览了几个似乎在他们的演示中工作的代码 sn-ps 和答案，并试验了这些代码。我刚刚得到the code in this link 的工作，但缩略图太小了。这是我编写的用于制作动态轮播的函数...

//make image thumbnails
function make_image_previews ($con){
    $output = ''; 
    $count = 0;
    $result = make_query($con); //returns the images in database
    while($row = mysqli_fetch_array($result)){
        if($count == 0){
            $output .= '<li data-target="#dynamic_slide_show" data-slide-to="'.$count.'" class="active"> 
            <img class="d-block w-100 img-fluid" src="'.$row['image'].'">
            </li>';
        }else{
            $output .= '<li data-target="#dynamic_slide_show" data-slide-to="'.$count.'"> 
            <img class="d-block w-100 img-fluid" src="'.$row['image'].'">
            </li>';
        }
        $count = $count + 1;
    }
    return $output;
}

这是页面源中的html输出

<div class="row">
    <div class="col-md-12">     
    <div id="dynamic_slide_show" class="carousel slide light-shadow carousel-fade carousel-thumbnails" data-ride="carousel">
      <div class="carousel-inner" role="listbox">
          <div class="carousel-item active">
              <img src="upload/protected_matrix-background-style-computer-virus-hacker-screen-wallpa-wallpaper-green-dominant-color-format-121069553.jpg" class="d-block w-100" />
          </div>
          <div class="carousel-item">
                <img src="upload/protected_photo-1515879218367-8466d910aaa4.jpg" class="d-block w-100" />
           </div>
           <div class="carousel-item">
                <img src="upload/protected_UC-b6b17814-ad20-4509-8102-4efa70f6ee67.jpg" class="d-block w-100" />
           </div>    
       </div>
    <a class="carousel-control-prev" href="#dynamic_slide_show" 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="#dynamic_slide_show" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>
    <!--Carousel image preview-->
    <ol class="carousel-indicators">
        <li data-target="#dynamic_slide_show" data-slide-to="0" class="active"> 
            <img class="d-block w-100 img-fluid" src="upload/protected_matrix-background-style-computer-virus-hacker-screen-wallpa-wallpaper-green-dominant-color-format-121069553.jpg">
        </li>
        <li data-target="#dynamic_slide_show" data-slide-to="1"> 
           <img class="d-block w-100 img-fluid" src="upload/protected_photo-1515879218367-8466d910aaa4.jpg">
        </li>
        <li data-target="#dynamic_slide_show" data-slide-to="2"> 
          <img class="d-block w-100 img-fluid" src="upload/protected_UC-b6b17814-ad20-4509-8102-4efa70f6ee67.jpg">
        </li>    
    </ol>
  </div>                
  </div>
  </div>
<hr>

a question 有同样的问题，但代码与我在顶部链接中提供的不同。我尝试更改代码的答案，但我只能看到三个下划线。如何解决代码中的小缩略图问题？

编辑 当我尝试 CSS 时

.carousel-indicators {
  position: static;
}
.carousel-indicators>li {
    width: 100px
}

缩略图溢出到下一行。如下图，水平线（<hr> 标签）位于轮播所在行的末尾

Answer 1

这是一个 jsfiddle 示例：https://jsfiddle.net/setw7kn0/

您可以通过将.carousel-indicators > li 更改为您想要的任何图像来设置图像width（在示例中我使用了100px）。 .carousel-indicators 中的 position: static; 也是为了使缩略图停止与 carousel 重叠。

告诉我这是不是你要找的。​​p>

编辑：

.carousel-indicators 与 hr 重叠的原因是，hr 不应该直接放在 .row 内，而应该放在 column 内 row 内或 @ 之后987654334@结束标签。

我还把.carousel-indicators > liheight改成了auto，这样你就可以覆盖默认的bootstrap css，bootstrap的默认值是height: 3px;（所以你实际上是在与引导程序作斗争）。