ResponsiveSlide.js에 미리보기 이미지 추가

Question

ResponsiveSlide.js를 사용하여 사용자 정의 축소판 갤러리를 만들려고하고 있지만 개별 슬라이드를 어떻게 트리거 할 수 있는지 파악할 수 없습니다. CSS 변경으로 호출 할 수 있는지 또는 JS를 사용해야하는지 잘 모르겠습니다. 또한 jQuery에 익숙하지 않아 도움이되지 않습니다.

내가 지금까지 가지고있는 것은 작동하는 슬라이드 쇼와 축소판 링크이지만 클릭 할 때 슬라이드 변경을 트리거 할 수 없습니다.

<a onClick="$('#slider1_s2').addClass(activeClass)" href="#">thumb image</a> 

slider1_s2는이 인스턴스에서 호출하려고하는 슬라이드의 ID 태그이지만 슬라이드 일 수 있습니다.

Answer 1

플러그인이 당신을 위해 일하게하십시오. 일련의 미리보기 이미지를 슬라이드 쇼의 관련 이미지에 연결하려면 이미지를 직접 만들어야합니다. 이

$("#slider3").responsiveSlides({ 
    manualControls: '#unique-pager' 
}); 

당신은 #unique-pager 당신이 생성됩니다에 이미지 슬라이드 쇼의 이미지를 연결하고 있습니다.

이 Viljamis의 데모 코드

<!-- slideshow --> 
<ul class="slides" id="slider"> 
    <li><img src="images/1.jpg" alt=""></li> 
    <li><img src="images/2.jpg" alt=""></li> 
    <li><img src="images/3.jpg" alt=""></li> 
</ul> 

<!-- Pager --> 
<ul id="unique-pager"> <!--this id gets inserted in manualControls --> 
    <li><a href="#"><img src="images/1_thumb.jpg" alt=""></a></li> 
    <li><a href="#"><img src="images/2_thumb.jpg" alt=""></a></li> 
    <li><a href="#"><img src="images/3_thumb.jpg" alt=""></a></li> 
</ul>