jquery - Bootstrap carousel 在另一个 bootstrap carousel 里面

Question

我在 carousel 中有一个 carousel - 第一个 carousel 是循环显示多个产品，在每个产品部分中我有多个图像需要在 carousel 中显示。但是当我滑过外轮时，内轮停止工作:

.inner_carousel {
  background-color: green;
  width: 100%;
  height: 300px;
  text-align: center;
}
.inner_carousel1 {
  background-color: red;
  width: 100%;
  height: 300px
}
.inner_carousel2 {
  background-color: blue;
  width: 100%;
  height: 300px
}
.sub_car {
  background-color: black;
  width: 300px;
  height: 300px
}
.sub_car1 {
  background-color: pink;
  width: 300px;
  height: 300px
}
#myCarousel1 {
  width: 310px;
  display: inline-block;
}

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

<div id="myCarousel" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
    <li data-target="#myCarousel" data-slide-to="1"></li>
    <li data-target="#myCarousel" data-slide-to="2"></li>
    <li data-target="#myCarousel" data-slide-to="3"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <div class="inner_carousel">
        <div id="myCarousel1" class="carousel slide" data-ride="carousel">
          <!-- Wrapper for slides -->
          <div class="carousel-inner" role="listbox">
            <div class="item active">
              <div class="sub_car1"></div>
            </div>
            <div class="item">
              <div class="sub_car"></div>
            </div>
          </div>
          <!-- Left and right controls -->
          <a class="left carousel-control" href="#myCarousel1" role="button" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
          </a>
          <a class="right carousel-control" href="#myCarousel1" role="button" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
          </a>
        </div>
      </div>
    </div>
    <div class="item">
      <div class="inner_carousel1"></div>
    </div>
    <div class="item">
      <div class="inner_carousel2"></div>
    </div>
  </div>

  <!-- Left and right controls -->
  <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>
<script>
  $('#myCarousel').carousel();
  $('#myCarousel1').carousel();
</script>

Answer 1

经过多次尝试和错误方法并搜索多个支持站点后，我发现不支持另一个轮播内的轮播:

Carousel carousel.js

A slideshow component for cycling through elements, like a carousel. Nested carousels are not supported.

Source: http://getbootstrap.com/javascript/#carousel

也遇到了这个线程: https://github.com/twbs/bootstrap/issues/14441

下面给出了我使用的另一种替代解决方案

$(document).ready(function() {
  if ($(window).width() > 768) {
    // var windo_height= $(window).height();
    var contain_height = $(".dashboard_rightheader").height();
    var foot_height = $(".dash_footer").height();
    $(".dashboard_leftheader").height(contain_height);
  }

});
$('.next').click(function() {

  var nextId = $(this).parents('.tab-pane').next().attr("id");
  $('[href=#' + nextId + ']').tab('show');

})

$('.first').click(function() {
  $('#myWizard a:first').tab('show')
})

.inner_carousel {
  background-color: green;
  width: 100%;
  height: 300px;
  text-align: center;
}
.inner_carousel1 {
  background-color: red;
  width: 100%;
  height: 300px
}
.inner_carousel2 {
  background-color: blue;
  width: 100%;
  height: 300px
}
.sub_car {
  background-color: black;
  width: 300px;
  height: 300px
}
.sub_car1 {
  background-color: pink;
  width: 300px;
  height: 300px
}
#myCarousel1 {
  width: 310px;
  display: inline-block;
}
.tab-pane1 img {
  background-color: red;
}
.tab-pane2 img {
  background-color: blue;
}
.tab-pane3 img {
  background-color: black;
}

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

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

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <div class="inner_carousel">
        <div id="neoidea">
          <!-- <div class="navbar">
                            <div class="navbar-inner">
                                  <ul class="nav nav-pills">
                                     <li class=""><a href="#step1" data-toggle="tab" aria-expanded="false">Step 1</a></li>
                                     <li class=""><a href="#step2" data-toggle="tab" aria-expanded="false">Step 2</a></li>
                                     <li class=""><a href="#step3" data-toggle="tab" aria-expanded="false">Step 3</a></li>
                                  </ul>
                            </div>
                          </div> -->
          <!-- Indicators -->
          <ol class="carousel-indicators">
            <li data-target="#step11" data-toggle="tab" aria-expanded="false" class="active"></li>
            <li data-target="#step12" data-toggle="tab" aria-expanded="false"></li>
            <li data-target="#step13" data-toggle="tab" aria-expanded="false"></li>
          </ol>
          <div class="tab-content">
            <div class="tab-pane active tab-pane1" id="step11">
              <img src="http://placehold.it/299x299" alt="Chania">
            </div>
            <div class="tab-pane tab-pane2" id="step12">
              <img src="http://placehold.it/300x300" alt="Chania">
            </div>
            <div class="tab-pane tab-pane3" id="step13">
              <img src="http://placehold.it/301x301" alt="Chania">
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="item">
      <div class="inner_carousel">
        <div id="neoidea">
          <!-- <div class="navbar">
                            <div class="navbar-inner">
                                  <ul class="nav nav-pills">
                                     <li class=""><a href="#step1" data-toggle="tab" aria-expanded="false">Step 1</a></li>
                                     <li class=""><a href="#step2" data-toggle="tab" aria-expanded="false">Step 2</a></li>
                                     <li class=""><a href="#step3" data-toggle="tab" aria-expanded="false">Step 3</a></li>
                                  </ul>
                            </div>
                          </div> -->
          <!-- Indicators -->
          <ol class="carousel-indicators">
            <li data-target="#step21" data-toggle="tab" aria-expanded="false" class="active"></li>
            <li data-target="#step22" data-toggle="tab" aria-expanded="false"></li>
            <li data-target="#step23" data-toggle="tab" aria-expanded="false"></li>
          </ol>
          <div class="tab-content">
            <div class="tab-pane active tab-pane1" id="step21">
              <img src="http://placehold.it/299x299" alt="Chania">
            </div>
            <div class="tab-pane tab-pane2" id="step22">
              <img src="http://placehold.it/300x300" alt="Chania">
            </div>
            <div class="tab-pane tab-pane3" id="step23">
              <img src="http://placehold.it/301x301" alt="Chania">
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="item">
      <div class="inner_carousel">
        <div id="neoidea">
          <!-- <div class="navbar">
                            <div class="navbar-inner">
                                  <ul class="nav nav-pills">
                                     <li class=""><a href="#step1" data-toggle="tab" aria-expanded="false">Step 1</a></li>
                                     <li class=""><a href="#step2" data-toggle="tab" aria-expanded="false">Step 2</a></li>
                                     <li class=""><a href="#step3" data-toggle="tab" aria-expanded="false">Step 3</a></li>
                                  </ul>
                            </div>
                          </div> -->
          <!-- Indicators -->
          <ol class="carousel-indicators">
            <li data-target="#step31" data-toggle="tab" aria-expanded="false" class="active"></li>
            <li data-target="#step32" data-toggle="tab" aria-expanded="false"></li>
            <li data-target="#step33" data-toggle="tab" aria-expanded="false"></li>
          </ol>
          <div class="tab-content">
            <div class="tab-pane active tab-pane1" id="step31">
              <img src="http://placehold.it/299x299" alt="Chania">
            </div>
            <div class="tab-pane tab-pane2" id="step32">
              <img src="http://placehold.it/300x300" alt="Chania">
            </div>
            <div class="tab-pane tab-pane3" id="step33">
              <img src="http://placehold.it/301x301" alt="Chania">
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Left and right controls -->
  <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>
<script>
  $('#myCarousel').carousel();
  $('#myCarousel1').carousel();
</script>