두 회전 목마 기능이 함께

Question

여기에, 나는 처음 회전 목마 자동 슬라이드 수동으로 클릭합니다 두 번째 회전 목마 될 것입니다 의미 한 페이지에 두 개의 서로 다른 기능을 가진 두 개의 회전 목마를 문제하려는거야하지만 난이 문제를 가지고 :

을

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/

입니다. 어떤 제안이나 해결책을 주실 수 있습니까? 감사합니다

Answer 1

의 탐색에서 당신은 두 번째 회전 목마 전에 </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> 

Answer 2

그냥 HREF를 추가 = "# 회전 목마-2"두 번째