javascript - 较大的自举转盘中的较小的自举转盘-较小的自转转盘上的功能问题

简而言之，我正在尝试将html块+小轮播放到较大轮播的其中一张幻灯片上。基本上，较大规模的轮播会包含2张幻灯片。

第一张幻灯片-html +较小的轮播(本身包含2张图片-幻灯片)。
第二张幻灯片-一个大型英雄形象

使用Bootstrap 3.3.6和jQuery 2.2.3。

因此，一切正常，在此当前状态下，所有幻灯片都可以在第一时间正常运行。一旦幻灯片从最后一张转到第一张，较小的旋转木马的功能就会停止工作。我认为问题出在Bootstrap.js内.item .active类的某个地方，因为更改/修改CSS对功能没有任何影响

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

如果能及时得到答复，我将不胜感激:)

的HTML

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

<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>

我在zip文件中添加了必要的文件(1MB)，您可以从这里获取它以了解整个图片:

Carousel-within-carousel

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

bootstrap336.js:6
Uncaught TypeError: Cannot read property 'offsetWidth' of undefined
c.slide @ bootstrap336.js:6
c.next @ bootstrap336.js:6
n.isFunction.f @ jquery223.js:2

最佳答案

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>