javascript - 较大的 Bootstrap 传送带内的较小的 Bootstrap 传送带 - 较小的 Bootstrap 传送带旋转的功能问题

Question

简而言之，我正在尝试将 html block + 小轮播放在我的较大轮播的其中一张幻灯片上。基本上，较大的旋转木马将由 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>