자사몰 UI 컴포넌트

이미지 썸네일 갤러리

상품 상세 이미지 갤러리 — 메인↔썸네일 동기화 + 양쪽 화살표로 1개씩. cafe24 기본 front/thumb Swiper 위에 IJ 커스텀(2026-06-23 재작성·skin8 라이브 발행).

← 모듈 목록
증상 (은우 발견 2026-06-23)

손 스와이프는 되는데 화살표·동기화가 깨짐

바질페스토(27)·룽고(93) 등 전 상품 공통으로 갤러리 화살표가 제대로 동작 안 함.

① 메인 ↔ 썸네일 끊김

  • 메인 이미지를 8/10으로 넘겨도 하단 썸네일 줄은 7번까지만 보임
  • 8·9·10 썸네일이 안 나타나고, active(선택) 표시도 없음

② 화살표 문제

  • 화살표가 이미지 1개씩 안 넘어감 (한 번에 200px=약 3개 점프)
  • 왼쪽(prev) 화살표가 아예 안 보임
진단 (측정 — measure don't assume)

원인 2가지가 겹쳐 있었음

처음엔 "Swiper 두 버전 충돌"로 의심했으나, 라이브 DevTools 실측하니 가설이 뒤집힘.

A. Swiper 연동(thumbs)이 끊김

  • detail.html에 Swiper init 코드 없음 — swiper-bundle이 front/thumb 2개를 자동 생성
  • ★ front.params.thumbs.swiper = false → 메인과 썸네일이 안 묶여 있음

B. 옛 IJ가 native scroll로 덮음

  • thumbWrapper에 overflow-x:auto 인라인을 박아 Swiper transform 무력화
  • 그래서 손 스와이프(native scroll)만 되고, 화살표는 scrollBy 200px로 점프
FIX — Swiper API로 재작성

동기화 + 1개씩 + 양쪽 화살표

메인 넘김front.on('slideChange')
→
썸네일 따라감thumb.slideTo(idx-2) + active
→
썸네일 클릭front.slideTo(i)

동기화

  • overflow 인라인 제거 → Swiper transform 정상화
  • front.on('slideChange') → active .ij-thumb-active 토글 + thumb.slideTo(idx-2)(active 가운데)
  • 썸네일 클릭 = front.slideTo(i)

화살표 = 이미지 1개씩

  • front.slideNext/Prev (이미지 1칸 + 썸네일 자동 따라감)
  • prev/next 버튼 clone + swiper-button-disabled 제거 → 양쪽 항상 보임
  • CSS: active 썸네일 opacity .55→1 + 그린 outline
코드 위치 · 발행

어디서 고쳤나 (나중에 다시 찾을 때)

파일

  • product/detail.html — grep 추가이미지 썸네일 (인라인 script)
  • CSS: .thumb-slide .swiper-slide(60px) + .ij-thumb-active img
  • 인스턴스: .front-slide .swiper.swiper / .thumb-slide .swiper.swiper

발행

  • skin14·skin15 검증 → skin8 라이브 발행 (썸네일 CSS+JS만 동일패치, 통째복사 X)
  • detail.html 1파일 = 전 상품 공통 (93·27 라이브 확인)
  • 메모리: cafe24-code-index · 백업 detail_skin8_BACKUP_thumb_*
라이브 데모 — 바질페스토 상품 →