2013-06-03 6 views
0

I've는 자신의 작성 이미지 뷰어 내 오버레이에서이 HTML 코드를 가지고 전환 : (. 왼쪽 슬라이더)이 메인 뷰입니다부트 스트랩 데이터는 회전 목마

<div class="carousel slide" id="imgViewer"> 
     <div class="carousel-inner"> 
      <div id="item1" class="item active"> 
       <div id="pic1"> 
        <center> 
          <img style="height: 100%;" src="./upload/offers/6/img.jpg" alt=""> 
        </center> 
       </div> 
      </div> 
      <div id="item2" class="item "> 
       <div id="pic2"> 
       <center> 
        <img style="height: 100%;" src="./upload/offers/6/img2.jpg" alt=""> 
       </center> 
       </div> 
      </div> 
</div> 
</div> 

오른쪽에는 슬라이더에서 볼 수있는 모든 이미지의 또 다른보기가 있습니다.

<a href="#item1" data-toggle="carousel-toggle" data-slide=""><img style="vertical-align: middle;" src="./upload/offers/6/img.jpg" alt="" /></a> 

Proble 인이 내 마지막 시도 중 하나입니다 ... : 그것은 나던 내가 슬라이더에 클릭 된 이미지로 이동하려는 ...이처럼 작동 ... 방법 이걸 내가 깨달을 수 있을까?

답변

2

이미지에 onClick 이벤트를 추가 할 수 있습니다. 이 이벤트는 당신이 보여주고 싶은 이미지의 div에서 클래스를 활성화시킬 수 있습니다.

<div id="item1" class="item active"> 

클래스 '활성'은 표시되는 슬라이드입니다. 그것을 검색하는 내가 데이터 토글 회전 목마와 같은 부트 스트랩 뭔가 함께 할 coul

1
$('#item1').click(function() { 
       $('#item1, #item2, #item3, #item4, #item5, #item6, #item7').removeClass('active'); 
       $('#item1').addClass('active'); 
       return true; 
      }); 

괜찮 생각 ...

data-slide-to 

이 모든 사람을 위해 그것을 할 것입니다 ... 그냥

+1

빠른 노트. 동일한 이름의 ID가 하나 이상있을 수 있습니다. 사이드 이미지의 ID를 바꿀 수도 있습니다. :) – Will

+0

감사합니다. 마음에두고 있지만 데이터 슬라이드를 사용합니다. 그것은 저를 위해 잘 작동합니다. –

관련 문제