较小的自举传送带内较大的自举传送带 - 功能问题与较小的旋转

Question

总之，我试图把html块+小型旋转木马放在我的大旋转木马的幻灯片之一。基本上更大规模的旋转木马将由2张幻灯片组成。

第一张幻灯片 - html +更小的轮播（包含2张图片 - 幻灯片本身）。 Second slide - One large hero image

使用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添加neccessary文件（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

嵌套旋转木马的不处于引导支持（见）。我认为这是主要问题。您可以尝试的东西多一点优雅像这样的页面设计，还包括由仅限Ritesh库马尔左右滚动（使用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>