html - 带有部分的引导轮播

Question

每个部分都有三张图片，例如

Test 1
      test1-image1.jpg
      test1-image2.jpg
      test1-image3.jpg
Test 2
      test2-image1.jpg
      test2-image2.jpg
      test2-image3.jpg
Test 3
      test3-image1.jpg
      test3-image2.jpg
      test3-image3.jpg

当选择测试 1 时，它应该像测试 2 和测试 3 一样在测试 1 图像中滑动。请看下面的代码。根据部分的选择，然后只有幻灯片应该开始滑动。我可以在部分中滑动，但我需要在内部部分中滑动。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<div class="col-md-8 sliderImg">
  <div class="row">
    <div id="imgGalleryCaruosel" class="carousel slide" data-ride="carousel">

      <!-- Wrapper for slides -->
      <div class="carousel-inner">
        <div id="test1">
          <div class="item active">
            <img src="test1-image1.jpg" alt="test1-image1">
          </div>
          <div class="item">
            <img src="test1-image2.jpg" alt="test1-image2">
          </div>
          <div class="item">
            <img src="test1-image3.jpg" alt="test1-image3">
          </div>
        </div>
        <!-- End Item -->
        <div id="test2">
          <div class="item active">
            <img src="test2-image1.jpg" alt="test2-image1">
          </div>
          <div class="item">
            <img src="test2-image2.jpg" alt="test2-image2">
          </div>
          <div class="item">
            <img src="test2-image3.jpg" alt="test2-image3">
          </div>
        </div>
        <!-- End Item -->
        <div id="test3">
          <div class="item active">
            <img src="test3-image1.jpg" alt="test3-image1">
          </div>
          <div class="item">
            <img src="test3-image2.jpg" alt="test3-image2">
          </div>
          <div class="item">
            <img src="test3-image3.jpg" alt="test3-image3">
          </div>
        </div>
      </div>
      <!-- End Item -->

      <!-- End Carousel Inner -->
      <ul class="list-group col-sm-3">
        <li data-target="#imgGalleryCaruosel" data-slide-to="0" class="list-group-item active">
          <h4>Test1</h4>
        </li>
        <li data-target="#imgGalleryCaruosel" data-slide-to="1" class="list-group-item">
          <h4>Test2</h4>
        </li>
        <li data-target="#imgGalleryCaruosel" data-slide-to="2" class="list-group-item">
          <h4>Test3</h4>
        </li>
      </ul>

      <!-- Controls -->
      <div class="carousel-controls">
        <a class="left carousel-control" href="#imgGalleryCaruosel" data-slide="prev">
          <span class="glyphicon glyphicon-chevron-left"></span>
        </a>
        <a class="right carousel-control" href="#imgGalleryCaruosel" data-slide="next">
          <span class="glyphicon glyphicon-chevron-right"></span>
        </a>
      </div>
    </div>
    <!-- End Carousel -->
  </div>
</div>

Answer 1

您可以使用 Bootstrap [tabs] 和 [carousel] 插件以及标记中的一些更改...

堆栈片段

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col-xs-8">
      <div class="tab-content">
        <div role="tabpanel" class="tab-pane active" id="test1">
          <div id="imgGalleryCaruosel1" class="carousel slide" data-ride="carousel" data-interval="false">
            <div class="carousel-inner">
              <div class="item active">
                <img class="center-block" src="http://via.placeholder.com/350x150?text=1-1" alt="test1-image1">
              </div>
              <div class="item">
                <img class="center-block" src="http://via.placeholder.com/350x150?text=1-2" alt="test1-image2">
              </div>
              <div class="item">
                <img class="center-block" src="http://via.placeholder.com/350x150?text=1-3" alt="test1-image3">
              </div>
            </div>
            <div class="carousel-controls">
              <a class="left carousel-control" href="#imgGalleryCaruosel1" data-slide="prev">
                <span class="glyphicon glyphicon-chevron-left"></span>
              </a>
              <a class="right carousel-control" href="#imgGalleryCaruosel1" data-slide="next">
                <span class="glyphicon glyphicon-chevron-right"></span>
              </a>
            </div>
          </div>
        </div>
        <div role="tabpanel" class="tab-pane" id="test2">
          <div id="imgGalleryCaruosel2" class="carousel slide" data-ride="carousel" data-interval="false">
            <div class="carousel-inner">
              <div class="item active">
                <img class="center-block" src="http://via.placeholder.com/350x150?text=2-1" alt="test1-image1">
              </div>
              <div class="item">
                <img class="center-block" src="http://via.placeholder.com/350x150?text=2-2" alt="test1-image2">
              </div>
              <div class="item">
                <img class="center-block" src="http://via.placeholder.com/350x150?text=2-3" alt="test1-image3">
              </div>
            </div>
            <div class="carousel-controls">
              <a class="left carousel-control" href="#imgGalleryCaruosel2" data-slide="prev">
                <span class="glyphicon glyphicon-chevron-left"></span>
              </a>
              <a class="right carousel-control" href="#imgGalleryCaruosel2" data-slide="next">
                <span class="glyphicon glyphicon-chevron-right"></span>
              </a>
            </div>
          </div>
        </div>
        <div role="tabpanel" class="tab-pane" id="test3">
          <div id="imgGalleryCaruosel3" class="carousel slide" data-ride="carousel" data-interval="false">
            <div class="carousel-inner">
              <div class="item active">
                <img class="center-block" src="http://via.placeholder.com/350x150?text=3-1" alt="test1-image1">
              </div>
              <div class="item">
                <img class="center-block" src="http://via.placeholder.com/350x150?text=3-2" alt="test1-image2">
              </div>
              <div class="item">
                <img class="center-block" src="http://via.placeholder.com/350x150?text=3-3" alt="test1-image3">
              </div>
            </div>
            <div class="carousel-controls">
              <a class="left carousel-control" href="#imgGalleryCaruosel3" data-slide="prev">
                <span class="glyphicon glyphicon-chevron-left"></span>
              </a>
              <a class="right carousel-control" href="#imgGalleryCaruosel3" data-slide="next">
                <span class="glyphicon glyphicon-chevron-right"></span>
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-xs-4">
      <ul class="nav nav-pills nav-stacked">
        <li role="presentation" class="active">
          <a href="#test1" aria-controls="test1" role="tab" data-toggle="tab">Test1</a>
        </li>
        <li role="presentation">
          <a href="#test2" aria-controls="test2" role="tab" data-toggle="tab">Test2</a>
        </li>
        <li role="presentation">
          <a href="#test3" aria-controls="test3" role="tab" data-toggle="tab">Test3</a>
        </li>
      </ul>
    </div>
  </div>
</div>