두 개의 부트 스트랩 팝 아웃 캐 러셀이 있지만 서로 겹치고 독립적으로 사용할 수 없습니다. 어떻게 해결할 수 있습니까?

Question

현재 버튼을 사용하여 각각을 활성화하는 두 개의 부트 스트랩 캐 러셀이 있습니다. 두 단추 중 하나를 클릭하면 두 슬라이드 쇼가 서로 겹쳐서 보입니다. 따라서 각 슬라이드를 개별적으로 제어 할 수 없으므로 매우 매력적이지 않습니다.

는

당신은 내 CodePen에있는 두 개의 버튼을 찾을 수 있습니다 : 지금까지 click here

를, 내가 이런 짓을했는지 :

당신이 첫 번째 단추에서 모두를 클릭

<div class="container-fluid bg-5 text-center" id = "container-2"> 
     <h2 class="margin about" style="color: #cdcdcd;">Portfolio</h2> 
     <div class = "row"> 
      <div class = "col-md-4"> 
       <div class = "well"> 
        <h1> Click Me 1 </h1> 
        <!-- Large modal --> 
        <button class="btn btn-default" data-toggle="modal" data-target=".bs-example-modal-lg">BUTTON1</button> 
        <div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true"> 
         <div class="modal-dialog modal-lg"> 
          <div class="modal-content"> 
           <div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> 
            <!-- Wrapper for slides --> 
            <div class="carousel-inner"> 
             <div class="item active"> 
              <img class="img-responsive" src="http://placehold.it/1200x600/555/000&text=One" alt="..."> 
              <div class="carousel-caption"> 
               One Image 
              </div> 
             </div> 
             <div class="item"> 
              <img class="img-responsive" src="http://placehold.it/1200x600/fffccc/000&text=Two" alt="..."> 
              <div class="carousel-caption"> 
               Another Image 
              </div> 
             </div> 
             <div class="item"> 
              <img class="img-responsive" src="http://placehold.it/1200x600/fcf00c/000&text=Three" alt="..."> 
              <div class="carousel-caption"> 
               Another Image 
              </div> 
             </div> 
            </div> 
            <!-- Controls --> 
            <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"> 
            <span class="glyphicon glyphicon-chevron-left"></span> 
            </a> 
            <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"> 
            <span class="glyphicon glyphicon-chevron-right"></span> 
            </a> 
           </div> 
          </div> 
         </div> 
        </div> 
       </div> 
      </div> 
      <div class = "col-md-4"> 
       <div class = "well"> 
        <h1> Click Me 2 </h1> 
        <!-- Large modal --> 
        <button class="btn btn-default" data-toggle="modal" data-target=".bs-example-modal-lg">BUTTON 2</button> 
        <div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true"> 
         <div class="modal-dialog modal-lg"> 
          <div class="modal-content"> 
           <div id="carousel-example-generic2" class="carousel slide" data-ride="carousel"> 
            <!-- Wrapper for slides --> 
            <div class="carousel-inner"> 
             <div class="item active"> 
              <img class="img-responsive" src="http://placehold.it/1200x600/555/000&text=One" alt="..."> 
              <div class="carousel-caption"> 
               One Image 
              </div> 
             </div> 
             <div class="item"> 
              <img class="img-responsive" src="http://placehold.it/1200x600/fffccc/000&text=Two" alt="..."> 
              <div class="carousel-caption"> 
               Another Image 
              </div> 
             </div> 
             <div class="item"> 
              <img class="img-responsive" src="http://placehold.it/1200x600/fcf00c/000&text=Three" alt="..."> 
              <div class="carousel-caption"> 
               Another Image 
              </div> 
             </div> 
            </div> 
            <!-- Controls --> 
            <a class="left carousel-control" href="#carousel-example-generic2" role="button" data-slide="prev"> 
            <span class="glyphicon glyphicon-chevron-left"></span> 
            </a> 
            <a class="right carousel-control" href="#carousel-example-generic2" role="button" data-slide="next"> 
            <span class="glyphicon glyphicon-chevron-right"></span> 
            </a> 
           </div> 
          </div> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 

당신이 볼 때, 슬라이드 쇼가 열려 있고, 두 번째 버튼을 클릭 할 때와 마찬가지로 두 개의 다른 슬라이드 쇼를 표시하는 버튼이 모두있어 포트폴리오 페이지와 같은 것을 만들 수 있습니다. 누군가이 문제를 해결할 수 있도록 도와 주시겠습니까? 대단히 감사하겠습니다.

Answer 1

버튼에는 data-target=".bs-example-modal-lg"이 있습니다. data-target을 data-target="#id1" 번으로 ID를 타겟팅하도록 변경 한 다음 모달에 맞게 설정합니다.