[기록] 티스토리 북클럽 스킨 홈프로모션 배너 자동넘김 문제 해결

점 3개가 제대로 안먹고 1, 2만 될 때....

북클럽 스킨 홈프로모션 배너에는 3개의 버튼을 사용해서 주요 포스팅으로 바로가기와 시원한 배너 효과를 지원한다.
하지만 직접 버튼을 누르지 않으면 다음 장면이 나오지 않아서 밋밋한 아쉬움이 있었다.

 그 때문에 스킨을 변경한 이후 자동 슬라이더 코드를 찾아다녔고, 해당 배너 자동 넘김 기능/슬라이더 자동 넘김 기능 코드를 올린 블로그를 찾을 수 있었다. 해당 코드를 사용한 이후 자동으로 배너가 바뀌는 걸 확인하고 만족했던 기억이 아직도 생생하다.

 하지만, 행복함도 잠시...얼마 뒤 분명히 제대로 동작하는걸로 알았던 배너 슬라이더는 3개 중 2번째 배너까지만 동작하고, 이후에는 다시 1번 배너로 돌아가는 불완전한 모습을 보게됐다.

 그래서 이를 고쳐보려고 이것저것 만져봤지만, 코딩에 문외한인 입장에서는 결국 다시 이걸로 돌아올 수 밖에 없었다.

그리고, 세월이 지나...이제는 AI의 도움을 받을 수 있게 됐고, 오랫동안 잊고 있던 이 녀석을 고쳐볼 수 있게 됐다.

기존 코드
/* 홈프로모션 배너 자동 넘김 */
<script>
setInterval(function() {
  $(".main-slider .paging button").trigger("click");
}, 10000)
</script>

제미나이 수정 버전
<!-- 홈프로모션 배너 자동 넘김 -->
    <script>
  setInterval(function() {
    var $allBtns = $(".main-slider .paging button"); // 전체 점 3개
    var $currentBtn = $(".main-slider .paging .current"); // 현재 하얀 점
    
    // 현재 몇 번째 점에 불이 들어와 있는지 번호 확인 (0부터 시작)
    var currentIndex = $allBtns.index($currentBtn);
    
    // 다음 번호 계산 (3번 담엔 다시 1번으로 가도록 % 연산 사용)
    var nextIndex = (currentIndex + 1) % $allBtns.length;
    
    // 정확히 "다음 번호의 점"만 클릭!
    $allBtns.eq(nextIndex).trigger("click");
  }, 10000);
</script>
  <!-- 홈프로모션 부분 -->

HTML에서 해당 부분만 제대로 교체하면 된다.

제미나이의 배너 자동 넘김 오류 분석
1. 수정 전 코드 (오류 발생)
   이 코드는 10초마다 '모든' 페이징 버튼을 동시에 클릭하려고 시도하는 구조였습니다.

2. 발생했던 현상
   배너 1번 → 2번까지는 자동으로 이동함.
   3번 배너로 넘어가지 않고 다시 1번으로 돌아오거나 멈춤.
   하지만 사용자가 3번 버튼을 '직접' 클릭하면 정상적으로 이동함 (데이터나 CSS 문제는 아니었음).

3. 원인 진단
    타겟 불분명: $(".main-slider .paging button")은 버튼 3개를 동시에 가리키는 배열 형태입니다.
    여기에 trigger("click")을 보내면 슬라이더 엔진이 혼란을 겪어 인덱스 처리가 정상적으로 이루어지지 않습니다.
    순환 로직 부재: 현재 몇 번째 슬라이드인지 확인하고 다음 순서로 넘겨주는 '순서 제어' 로직이 없었습니다.

4. 수정 후 코드 (정상 작동)
    현재 활성화된 버튼(current 클래스)을 기준으로 다음 순서의 버튼만 집어서 클릭하도록 개선했습니다.