Question

1）我使用轮播缩略图类。不知何故，我的缩略图全部对齐到左侧和顶部。我如何才能让它们一个接一个地对齐中心。

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>

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>

引导轮播问题

1 个答案: