bootstrap Carousel问题

Question

1)我使用carousel-thumbnails类。不知何故，我的缩略图都靠左对齐，并在彼此的顶部。我如何让它们一个接一个地居中对齐。

2)我不想看到显示哪张照片的点，因为我有缩略图，我怎么才能去掉它们？

我只想显示5个缩略图，尽管我的目录中有更多的照片。我怎么编程，我一到照片4，他就加载照片6，并在缩略图中显示照片2-6。

我在class=的“carousel-indicators”中尝试了隐藏的-X。这不管用。但我认为，当它工作时，它也会删除我的缩略图。

<div id="myCarousel" class="carousel slide carousel-thumbnails" data-ride="carousel">

       <!-- Wrapper for slides -->
        <div class="carousel-inner"role="listbox">
          <div class="item active">
            <img src="/fotos/auto.jpg" alt="Los Angeles" style="width:80%;">
            <div class="carousel-caption">
              <h3>test</h3>
              <p>Info tekst</p>
            </div>
          </div>

          <div class="item">
          <img src="/fotos/visinstukjes.jpg" alt="vis" style="width:80%;">
            <div class="carousel-caption">
              <h3>Vis</h3>
              <p>In stukjes of zoiets</p>
            </div>
          </div>

          <div class="item">
            <img src="/fotos/robot.jpg" alt="Chicago" style="width:80%;">
          </div>

          <div class="item">
           <img src="/fotos/vrachtwagen.jpg" alt="New york" style="width:80%;">
          </div>
        </div>

       <!-- Left and right controls -->
        <a class="left carousel-control" href="#myCarousel" data-slide="prev">
          <span class="glyphicon glyphicon-chevron-left"></span>
          <span class="sr-only">Previous</span>
        </a>
        <a class="right carousel-control" href="#myCarousel" data-slide="next">
          <span class="glyphicon glyphicon-chevron-right"></span>
          <span class="sr-only">Next</span>
        </a>

        <!--/.Controls-->
        <ol class="carousel-indicators" >
          <li data-target="#carousel-thumb" data-slide-to="0" class="active">
            <img src="/fotos/auto.jpg" width="100">
          </li>
          <li data-target="#carousel-thumb" data-slide-to="1">
            <img src="/fotos/visinstukjes.jpg" width="100">
          </li>
          <li data-target="#carousel-thumb" data-slide-to="2">
            <img src="/fotos/robot.jpg" width="100">
          </li>
          <li data-target="#carousel-thumb" data-slide-to="2">
            <img src="/fotos/vrachtwagen.jpg" width="100">
          </li>
        </ol>
      </div>

Answer 1

使用以下代码：

  .mystyle{
        background-image: url('bg.png');
        width: 100px !important;
        height: 100px !important;
        background-position: center;
        background-size: 100%;
        background-repeat: no-repeat;
  }


<div id="myCarousel" class="carousel slide carousel-thumbnails" data-ride="carousel">

       <!-- Wrapper for slides -->
        <div class="carousel-inner"role="listbox">
          <div class="item active">
            <img src="bg.png" alt="Los Angeles" style="width:80%;margin:0 auto">
            <div class="carousel-caption">
              <h3>test</h3>
              <p>Info tekst</p>
            </div>
          </div>

          <div class="item">
          <img src="bg.png" alt="vis" style="width:80%;;margin:0 auto">
            <div class="carousel-caption">
              <h3>Vis</h3>
              <p>In stukjes of zoiets</p>
            </div>
          </div>

          <div class="item">
            <img src="bg.png" alt="Chicago" style="width:80%;;margin:0 auto">
          </div>

          <div class="item">
           <img src="bg.png" alt="New york" style="width:80%;;margin:0 auto">
          </div>
        </div>

       <!-- Left and right controls -->
        <a class="left carousel-control" href="#myCarousel" data-slide="prev">
          <span class="glyphicon glyphicon-chevron-left"></span>
          <span class="sr-only">Previous</span>
        </a>
        <a class="right carousel-control" href="#myCarousel" data-slide="next">
          <span class="glyphicon glyphicon-chevron-right"></span>
          <span class="sr-only">Next</span>
        </a>

        <!--/.Controls-->
        <ol class="carousel-indicators" >
          <li data-target="#carousel-thumb" data-slide-to="0" class="active mystyle"></li>
          <li data-target="#carousel-thumb" data-slide-to="1" class="mystyle"></li>
          <li data-target="#carousel-thumb" data-slide-to="2" class="mystyle"></li>
          <li data-target="#carousel-thumb" data-slide-to="2" class="mystyle"></li>
        </ol>
      </div>