Question

我已经在网站上实现了带有缩略图的自举轮播，但是缩略图尺寸很小，太小了。

我在foto_new页面上摆弄了一些CSS代码。但是我对CSS的了解还不足以使它正常工作。

这是我的页面代码：

 <head>
      <title>Reis Foto"s</title>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="css/lo.css">
      <link rel="stylesheet" href="css/boots.css" crossorigin="anonymous">
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" >
    
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
      <style>
    
      /* Make the image fully responsive */
      .carousel-inner img {
          width: 100%;
          height: 100%;
      }
    
      #myCarousel .list-inline {
        white-space:nowrap;
        overflow-x:auto;
    }
    
    #myCarousel .carousel-indicators {
        position: static;
        left: initial;
        width: initial;
        margin-left: initial;
    }
    
    #myCarousel .carousel-indicators > li {
        <!--width: initial;-->
        <!--height: initial;-->
        width: 200px;
        height: 50px;
        text-indent: initial;
    }
    
      <!--#myCarousel .carousel-indicators li img {-->
        <!--display: block;-->
        <!--opacity: 0.5;-->
      <!--}-->
    
      #myCarousel .carousel-indicators li.active img {
        opacity: 1;
      }
    
      #myCarousel .carousel-indicators li:hover img {
        opacity: 0.75;
      }
      </style>
    </head>
    <body>
    
    <div class="container">
      <div class="row">
        <!--Ik gebruik hieronder alleen het middiv omdat dat de enige info is die ik wil vervangen-->
        <div class="col-md-12" id="middiv" style="background-color: rgba(255, 255, 255, 0.1)">
          <div id="myCarousel" class="carousel slide" data-ride="carousel" align="center">
            <!-- Wrapper for slides -->
            <div class="carousel-inner">
              <div class="carousel-item active">
                <img src="/fotos/auto.jpg" alt="Los Angeles" style="width:80%;">
              </div>
    
              <div class="carousel-item">
                <img src="/fotos/robot.jpg" alt="Chicago" style="width:80%;">
              </div>
    
              <div class="carousel-item">
                <img src="/fotos/vrachtwagen.jpg" alt="New york" style="width:80%;">
              </div>
            </div>
    
            <!-- Left and right controls -->
            <a class="carousel-control-prev" href="#myCarousel" data-slide="prev">
              <span class="carousel-control-prev-icon"></span>
            </a>
            <a class="carousel-control-next" href="#myCarousel" data-slide="next">
              <span class="carousel-control-next-icon"></span>
            </a>
    
            <!-- Indicators -->
            <ol 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="/fotos/auto.jpg" class="img-fluid">
                </a>
              </li>
    
              <li class="list-inline-item">
                <a id="carousel-selector-1" data-slide-to="1" data-target="#myCarousel">
                  <img src="/fotos/robot.jpg" class="img-fluid">
                </a>
              </li>
    
              <li class="list-inline-item">
                <a id="carousel-selector-2" data-slide-to="2" data-target="#myCarousel">
                  <img src="/fotos/vrachtwagen.jpg"  class="img-fluid">
                </a>
              </li>
             </ol>
          </div>
        </div>
      </div>
    </div>
    </body>
    </html>

我希望缩略图更大。

Answer 1

不确定如何将其与CSS的其余部分一起使用。

 /* Make the image fully responsive */
  .carousel-inner img {
      width: 100%;
      height: 100%;
  }

#myCarousel .carousel-indicators {
    position: static;
    margin-top:20px;
}

#myCarousel .carousel-indicators > li {
  width:100px;
}

 #myCarousel .carousel-indicators li img {
    display: block;
    opacity: 0.5;
 }

  #myCarousel .carousel-indicators li.active img {
    opacity: 1;
  }

  #myCarousel .carousel-indicators li:hover img {
    opacity: 0.75;
  }

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha256-YLGeXaapI0/5IgZopewRJcFXomhRMlYYjugPLSyNjTY=" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css" integrity="sha256-UzFD2WYH2U1dQpKDjjZK72VtPeWP50NoJjd26rnAdUI=" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.slim.js" integrity="sha256-BTlTdQO9/fascB1drekrDVkaKd9PkwBymMlHOiG+qLI=" crossorigin="anonymous"></script>
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.15.0/esm/popper.min.js" integrity="sha256-3Iu0zFU6cPS92RSC3Pe4DBwjIV/9XKyzYTqKZzly6A8=" crossorigin="anonymous"></script> -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha256-CjSoeELFOcH0/uxWu6mC/Vlrc1AARqbm/jiiImDGV3s=" crossorigin="anonymous"></script>
<div class="container">
  <div class="row">
    <!--Ik gebruik hieronder alleen het middiv omdat dat de enige info is die ik wil vervangen-->
    <div class="col-md-12" id="middiv" style="background-color: rgba(255, 255, 255, 0.1)">
      <div id="myCarousel" class="carousel slide" data-ride="carousel" align="center">
        <!-- Wrapper for slides -->
        <div class="carousel-inner">
          <div class="carousel-item active">
            <img src="https://dummyimage.com/600x400/000/fff" alt="Los Angeles" style="width:80%;">
          </div>

          <div class="carousel-item">
            <img src="https://dummyimage.com/600x400/000/fff" alt="Chicago" style="width:80%;">
          </div>

          <div class="carousel-item">
            <img src="https://dummyimage.com/600x400/000/fff" alt="New york" style="width:80%;">
          </div>
        </div>

        <!-- Left and right controls -->
        <a class="carousel-control-prev" href="#myCarousel" data-slide="prev">
          <span class="carousel-control-prev-icon"></span>
        </a>
        <a class="carousel-control-next" href="#myCarousel" data-slide="next">
          <span class="carousel-control-next-icon"></span>
        </a>

        <!-- Indicators -->
        <ol 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="https://dummyimage.com/600x400/000/fff" class="img-fluid">
            </a>
          </li>

          <li class="list-inline-item">
            <a id="carousel-selector-1" data-slide-to="1" data-target="#myCarousel">
              <img src="https://dummyimage.com/600x400/000/fff" class="img-fluid">
            </a>
          </li>

          <li class="list-inline-item">
            <a id="carousel-selector-2" data-slide-to="2" data-target="#myCarousel">
              <img src="https://dummyimage.com/600x400/000/fff"  class="img-fluid">
            </a>
          </li>
         </ol>
      </div>
    </div>
  </div>
</div>

它看起来确实像是响应，您可以使用以下方式更改缩略图的大小：

#myCarousel .carousel-indicators > li {
  width:100px;
}

popper.js加载存在一些问题，这就是为什么它被注释掉了。

有一个小提琴：Demo

Bootstrap 4轮播，带有小缩略图

1 个答案: