html - 引导轮播问题

Question

1）我使用 carousel-thumbnails 类。不知何故，我的缩略图都与左侧对齐并相互重叠。我怎样才能让他们一个接一个地对齐中心。

2）我不想看到指示显示哪张照片的点，因为我有缩略图，我怎样才能摆脱它们？

尽管我的目录中有更多照片，但我只想显示 5 个缩略图。我如何对其进行编程，一旦我转到照片 4，他就会加载照片 6 并显示在缩略图照片 2-6 中。

我在 class="carousel-indicators" 中尝试了 hidden-xs。那没有用。但我认为当它起作用时，它也会删除我的缩略图。

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

标签： htmltwitter-bootstrapcarousel

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>