2017-03-07 3 views
0

부동산 회사 웹 사이트를 개발 중이며 부트 스트랩의 회전 장치 제어에 문제가 있습니다.부트 스트랩 캐 러셀 - 컨트롤은 첫 번째 컨베이어에서만 작동합니다.

나의 목표는 각 열에 3 개의 서로 다른 열과 회전 목마가있는 행을 만드는 것입니다. 이 문제가 발생하면 문제는 해당 칼럼에 3 개의 회전식 컨베이어가 생기면 2 번 컨베이어 및 3 번 컨베이어의 컨트롤이 해당 항목이 속한 회전식 슬라이드 쇼가 아닌 회전식 슬라이드 1을 활성화한다는 것입니다. 왜 이런 일이

<div class="row"> 
     <div class="col-md-4"> 
      <div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> 
      <!-- Wrapper for slides --> 
      <div class="carousel-inner" role="listbox"> 
       <div class="item active"> 
       <img src="http://lorempixel.com/400/400/" alt="..."> 
       </div> 
       <div class="item"> 
       <img src="https://dummyimage.com/400x400/000/fff" alt="..."> 
       </div> 
      </div> 

      <!-- Controls --> 
      <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"> 
       <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> 
       <span class="sr-only">Previous</span> 
      </a> 
      <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"> 
       <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> 
       <span class="sr-only">Next</span> 
      </a> 
      </div> 
     </div> 
<!--FIRST COLUMN FINISHES HERE--> 

<!--SECOND COLUMN STARTS HERE-->  
     <div class="col-md-4"> 
      <div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> 
      <!-- Wrapper for slides --> 
      <div class="carousel-inner" role="listbox"> 
       <div class="item active"> 
       <img src="http://lorempixel.com/400/400/" alt="..."> 
       </div> 
       <div class="item"> 
       <img src="https://dummyimage.com/400x400/000/fff" alt="..."> 
       </div> 
      </div> 

      <!-- Controls --> 
      <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"> 
       <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> 
       <span class="sr-only">Previous</span> 
      </a> 
      <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"> 
       <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> 
       <span class="sr-only">Next</span> 
      </a> 
      </div> 
     </div> 
<!--SECOND COLUMN FINISHES HERE--> 

<!--THIRD COLUMN STARTS HERE--> 
     <div class="col-md-4"> 
      <div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> 
      <!-- Wrapper for slides --> 
      <div class="carousel-inner" role="listbox"> 
       <div class="item active"> 
       <img src="http://lorempixel.com/400/400/" alt="..."> 
       </div> 
       <div class="item"> 
       <img src="https://dummyimage.com/400x400/000/fff" alt="..."> 
       </div> 
      </div> 

      <!-- Controls --> 
      <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"> 
       <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> 
       <span class="sr-only">Previous</span> 
      </a> 
      <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"> 
       <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> 
       <span class="sr-only">Next</span> 
      </a> 
      </div> 
     </div> 

너희들은 알고 계십니까 : 여기

내 코드? 컨트롤이 회전식 캐롤을 활성화하고 회전식 넘버 1을 활성화하지 않도록하려면 어떻게해야합니까?

나는 분명하고 이해하기 쉽기를 바란다. 당신의 도움에 미리 감사드립니다.

답변

2

세 개의 모든 회전 목마에 동일한 ID를 사용했기 때문에. 기본적으로 DOM의 첫 번째 ID 요소 만 선택됩니다 (첫 번째 슬라이더).

하는 것은 다음과 같은 코드를 업데이트하십시오 -

마찬가지로
<a class="left carousel-control" href="#carousel-one" role="button" data-slide="prev"> 
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> 
    <span class="sr-only">Previous</span> 
</a> 
<a class="right carousel-control" href="#carousel-one" role="button" data-slide="next"> 
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> 
    <span class="sr-only">Next</span> 
</a> 

회전 목마 - 예를 들어 제네릭에서 ID를 업데이트하십시오 회전 목마 하나회전 목마 두은 회전 목마 세 각각 너의 3 개의 회전 목마를 위해. 위의 코드에서와 마찬가지로 href도 업데이트하십시오.

문제가 지속되는 경우 알려 주시기 바랍니다.

+0

매우 효과적입니다. 신나는 실수. –

1

모든 회전식 슬라이드 쇼의 ID는 동일합니다. 그들에게 고유 ID를 부여하고 새로운 ID로 제어를 변경하십시오. th