较大的引导转盘中的较小引导转盘-在较小的转盘上旋转时的功能问题

Question

简而言之，我正在尝试将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

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>