1. HTML 구조 설정

우선, 이미지 슬라이더와 썸네일이 담길 영역을 HTML로 구성합니다.

<div class="slider-container">
  <div class="slider">
    <!-- 이미지 슬라이더 이미지들 -->
  </div>
  <div class="thumbnail-container">
    <!-- 썸네일 이미지들 -->
  </div>
</div>

2. 이미지 슬라이더 초기화

이미지 슬라이더 라이브러리를 초기화하고 옵션을 설정합니다.

$('.slider').slick({
  // 슬라이더 옵션 설정
});

3. 썸네일 이미지 생성

썸네일 이미지를 동적으로 생성하여 썸네일 컨테이너에 추가합니다.

$('.slider img').each(function(){
  var thumbnailSrc = $(this).attr('src');
  $('.thumbnail-container').append('<img src="' + thumbnailSrc + '">');
});

4. 썸네일 선택 및 연동

썸네일을 선택할 수 있도록 이벤트를 연동하고 선택한 썸네일에 따라 이미지 슬라이더를 변경합니다.

$('.thumbnail-container img').on('click', function(){
  var index = $(this).index();
  $('.slider').slick('slickGoTo', index);
});

위의 단계를 따라하면 이미지 슬라이더에 썸네일을 추가하여 사용자가 더 편리하게 이미지를 탐색할 수 있습니다.

이 예제는 jQuery와 Slick Slider를 기반으로 하였으며, 다른 이미지 슬라이더 라이브러리를 사용하는 경우에도 비슷한 절차로 구현할 수 있습니다.

더 많은 정보를 원하시면 Slick Slider 공식 문서를 참고하세요.