另一个引导轮播中的引导轮播

时间：2016-11-24 10:36:07

标签： jquery html css twitter-bootstrap 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>

2 个答案:

答案 0 :(得分：1)

经过多次试错法并搜索了几个支持网站后，我发现其他转盘中的转盘不受支持：

  

Carousel carousel.js

     

用于循环播放元素的幻灯片组件，如轮播。   不支持嵌套轮播。

     

来源：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>

答案 1 :(得分：0)

每次我想在另一个旋转木马中使用旋转木马时，我都会使用owl-carousel插件或您想要的任何插件作为父旋转木马和子旋转木马的引导程序。

两个旋转木马都不能使用引导。

相关问题
最新问题