Question

简而言之，我正在尝试将html block +小型旋转木马放在我的大型旋转木马的其中一张幻灯片上。基本上，较大规模的旋转木马将由2个幻灯片组成。

第一张幻灯片 - html +较小的旋转木马（由两张图片组成 - 幻灯片本身）。第二张幻灯片 - 一个大型英雄形象

使用Bootstrap 3.3.6和jQuery 2.2.3。

所以一切都很好，并且在当前状态下，所有幻灯片第一次都正常工作。幻灯片从最后一张到第一张幻灯片时，较小的转盘的功能不再起作用。我相信问题出现在Bootstrap.js内的.item .active类中，因为更改/修改css对功能没有任何影响

我一直在搜索互联网，但找不到合适的答案。

如果能得到及时答复，我将非常感激：）

HTML

.writerow()

#htmlCarousel {
  width: 1100px;
}
#smallCarousel {
  width: 550px;
}

我已经在拉链中添加了必要的文件（1MB），您可以从这里了解完整的图片：

Carousel-within-carousel

编辑：在第一张幻灯片滑开后立即查看控制台我收到以下错误：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<section id="htmlCarousel" class="pr carousel slide clearfix" data-ride="carousel">
  <ol class="carousel-indicators no-margin">
    <li data-target="#htmlCarousel" data-slide-to="0" class="active padd-t-10">1</li>
    <li data-target="#htmlCarousel" data-slide-to="1" class="padd-t-10">2</li>
  </ol>
  <div class="carousel-inner" role="listbox">
    <div class="item one active">
      <div class="col-lg-4 col-sm-4 left-col clearfix">
        <p class="f24">Maecenas sed diam eget</p>
        <p>Lorem ipsum</p>
      </div>
      <div class="col-lg-7 col-sm-7 right-col clearfix">
        <ul class="uppercase clearfix">
          <li><a href="#">Visit site</a>
          </li>
          <li><a href="#">Tweet</a>
          </li>
        </ul>
        <div id="smallCarousel" class="carousel slide clearfix" data-ride="carousel">

          <!-- Wrapper for slides -->
          <div class="carousel-inner" role="listbox">
            <div class="item one active">
              <img src="http://placehold.it/350x150" alt="Fourth slide">
            </div>
            <div class="item two">
              <img src="http://placehold.it/350x150" alt="Fifth slide">
            </div>
          </div>

          <!-- Left and right controls -->
          <a class="carousel-control left" href="#smallCarousel" role="button" data-slide="prev"></a>
          <a class="carousel-control right" href="#smallCarousel" role="button" data-slide="next"></a>
        </div>

      </div>
      <button class="padd-10"><span class="uppercase padd-l-15 padd-r-5">Read more</span>
      </button>
    </div>
    <div class="item two">
      <img src="http://placehold.it/350x150" alt="Random slide" />
    </div>
  </div>
  <a class="carousel-control larger left" href="#htmlCarousel" role="button" data-slide="prev"><span>&nbsp;</span></a>
  <a class="carousel-control larger right" href="#htmlCarousel" role="button" data-slide="next"><span>&nbsp;</span></a>
  <div class="play-container clearfix">
    <a href="#">play</a>
  </div>
</section>

Answer 1

Bootstrap不支持嵌套轮播（请参阅http://getbootstrap.com/javascript/#carousel）。我认为这是主要问题。你可以尝试一些更优雅的东西，比如这个单页设计，还包括Ritesh Kumar左右滚动（使用fullpage.js）：

http://codepen.io/ritz078/pen/wMPRzr

例如：

<section class="vertical-scrolling">
   <div class="horizontal-scrolling">
      <h2>fullPage.js</h2>
      <h3>This is the fifth section and it contains the first slide (actually section == first slide)</h3>
   </div>
   <div class="horizontal-scrolling">
      <h2>fullPage.js</h2>
      <h3>This is the second slide</h3> 
      <p class="end">Thank you!</p>
   </div>
</section>

较大的自举轮播中较小的自举轮播 - 较小的轮换上的旋转功能问题

1 个答案: