JavaScript를 사용하여 슬라이드 갤러리에 내비게이션 컨트롤 추가하기

Question

슬라이드 갤러리를 사용하면 미리보기 이미지를 클릭하면 축소판의 이미지 참조가 검색되고 기본 패널에 표시됩니다.

이제 네비게이션 컨트롤을 추가했지만 와이어 링하는 방법을 잘 모르겠습니다. 다음/이전을 클릭하면 미리보기 이미지를 탐색하고 현재 위치를 강조 표시합니다.

코드

여기에 붙여 넣기하는 데 시간이 너무 오래 없지만, 여기에 바이올린입니다 :

http://jsfiddle.net/calebo/QuXYV/

PS : 자바 스크립트 만 더 jQuery를.

Answer 1

코드를 다시 작성하여 작동 시키십시오. here. 내가 코드를 리팩토링하여 정리하는 것이 좋습니다. 나는 이미지 URL을 보유 객체의 배열 및 자막 생성 말할 것입니다 : 제가 한 것은 BindImage 할 벗어나 '설정'라는 함수에 코드의 일부를 이동 본질적으로

var objArray, obj; 
for(var i = 0 ....) { 
    obj = { 
     url : "http://foobar.com/foo.png", 
     caption : "Caption" 
    }; 
    objArray.push(obj); 
} 
// then index with 
var currObj = objArray[current]; // where 'current' is the variable you are using for state 

을 (당신은 아마 원하는 이 이름 바꾸기). 또한 앵커의 href를 제거하는 선을 주석 처리했습니다.

Answer 2

슬라이더의 예를 들어 설명 드리겠습니다. 솔루션의 기반이 될 수 있습니다 (또는 변경 될 수도 있음).

예 (JSFiddle는) <div> 요소를 왼쪽과 오른쪽으로 이동 슬라이더의이지만, 완료 클릭 이벤트의 결합을 어떻게 볼 수 있습니다.

희망이 있습니다. 후속 질문을하는 것이 좋습니다.