2017-01-23 90 views
0

這裏的問題,我想要兩個轉盤在一個頁面這意味着第一個旋轉木馬會自動幻燈片和第二輪播將手動點擊兩個不同的功能,但我得到了這個問題:有兩個功能兩個轉盤

  1. 當第一個傳送帶滑動時,第二個傳送帶將消失。

  2. 當第二個傳送帶點擊時,第一個傳送帶沒有響應。

所以,這裏是我的代碼

$(document).ready(function() { 
 
    $('#carousel-1').carousel({ 
 
    interval: 5000 
 
    }); 
 
}); 
 

 
$(document).ready(function() { 
 
    $('#carousel-2').carousel({ 
 
    interval: false 
 
    }); 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
 

 
<div id="carousel-1" class="carousel slide"> 
 
    <div class="carousel-inner"> 
 
    <div class="item active"> 
 
     <img src="http://placehold.it/350x150" alt="" /> 
 
    </div> 
 
    <div class="item"> 
 
     <img src="http://placehold.it/350x150" alt="" /> 
 
    </div> 
 
    <div class="item"> 
 
     <img src="http://placehold.it/350x150" alt="" /> 
 
    </div> 
 
    </div> 
 

 
    <div class="container"> 
 
    <div id="carousel-2" class="carousel slide"> 
 
     <div class="carousel-inner"> 
 
     <div class="item active"> 
 
      <img src="http://placehold.it/350x150" alt="" /> 
 
     </div> 
 
     <div class="item"> 
 
      <img src="http://placehold.it/350x150" alt="" /> 
 
     </div> 
 
     <div class="item"> 
 
      <img src="http://placehold.it/350x150" alt="" /> 
 
     </div> 
 
     </div> 
 
     <a class="carousel-control left" href="#carousel-2" data-slide="prev">&lsaquo;</a> 
 
     <a class="carousel-control right" href="#carousel-2" data-slide="next">&rsaquo;</a> 
 
    </div> 
 
    </div>

這裏也是我的小提琴https://jsfiddle.net/za9un2wc/

我使用Twitter的引導對我的工作在這裏。任何建議/解決方案,你們可以給我嗎?由於

+1

你''

。 – tkhm

回答

2

導航,您應該第二輪播前加</div>。 我不確定這對你來說是否夠用,但在我看來看起來不錯。

<div id="carousel-1" class="carousel slide"> 
    <div class="carousel-inner"> 
    <div class="item active"> 
     <img src="http://placehold.it/350x150" alt="" /> 
    </div> 
    <div class="item"> 
     <img src="http://placehold.it/350x150" alt="" /> 
    </div> 
    <div class="item"> 
     <img src="http://placehold.it/350x150" alt="" /> 
    </div> 
    </div> 
</div><!-- Added div --> 
<div class="container"> 
    <div id="carousel-2" class="carousel slide"> 
    <div class="carousel-inner"> 
     <div class="item active"> 
     <img src="http://placehold.it/350x150" alt="" /> 
     </div> 
     <div class="item"> 
     <img src="http://placehold.it/350x150" alt="" /> 
     </div> 
     <div class="item"> 
     <img src="http://placehold.it/350x150" alt="" /> 
     </div> 
    </div> 
    <a class="carousel-control left" href="#carousel-2" data-slide="prev">&lsaquo;</a> 
    <a class="carousel-control right" href="#carousel-2" data-slide="next">&rsaquo;</a> 
    </div> 
</div> 
+0

我真的很傻,謝謝你解決我的謎語@tkhm非常感謝你 – ShafiqqAziz

0

只需添加HREF =「#轉盤-2」的第二個

+0

https://jsfiddle.net/za9un2wc/2/ – Payal2299