較小的自舉傳送帶內較大的自舉傳送帶 - 功能問題與較小的旋轉

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>