🛠 JSP에서 Swiper가 안 먹히는 문제 해결 (DOM 렌더링 타이밍 + 다중 Swiper 초기화 이슈)

📌 문제 상황

JSP에서 <c:forEach>로 이미지 리스트를 그린 후
Swiper를 초기화했는데 다음과 같은 문제가 발생했다.

• 슬라이드가 한 개만 보임
• 버튼이 동작하지 않음
• 썸네일과 메인 이미지가 연결되지 않음
• Swiper가 아예 적용되지 않음

---

📌 원인 분석

1️⃣ Swiper를 1번만 초기화한 문제

HTML에는 .swiper-container가 2개 존재했다.

• 메인 이미지 영역
• 썸네일 영역

그런데 JS에서는 이렇게 초기화하고 있었다.

new Swiper('.swiper-container', {
    slidesPerView: 4
});

이 방식은 첫 번째 요소만 제대로 잡거나 서로 충돌을 일으킨다.

---

2️⃣ DOM 렌더링 타이밍 문제

JSP <c:forEach>는 서버에서 렌더링되지만
JS 실행 시점이 DOM 생성보다 빠르면
Swiper는 .swiper-slide를 인식하지 못한다.

---

3️⃣ 잘못된 img 태그 사용

아래처럼 작성되어 있었다.

<img style="background-image: url(...);">

❌ img 태그는 background-image를 사용하지 않는다.
→ div로 바꾸거나 src를 써야 한다.

---

✅ 해결 방법

1️⃣ Swiper 컨테이너를 구분한다

메인 영역

<div class="swiper-container product-main">

썸네일 영역

<div class="swiper-container product-thumb-swiper">

---

2️⃣ 각각 따로 초기화한다

window.addEventListener("load", function () {

    // 썸네일 스와이퍼
    var thumbSwiper = new Swiper('.product-thumb-swiper', {
        slidesPerView: 4,
        spaceBetween: 10,
        watchSlidesProgress: true,
    });

    // 메인 스와이퍼
    var mainSwiper = new Swiper('.product-main', {
        slidesPerView: 1,
        navigation: {
            nextEl: '.product__control--next',
            prevEl: '.product__control--prev',
        },
        thumbs: {
            swiper: thumbSwiper
        }
    });

});

🔎 핵심 포인트

• Swiper는 각각 new Swiper() 해야 한다.
• thumbs 옵션으로 연결한다.
• window.load 이후 실행해야 이미지 렌더링이 보장된다.

---

3️⃣ img 구조 수정

잘못된 방식

<img class="product-thumb__thumb__inner"
     style="background-image: url(${list.FILE_PATH});">

올바른 방식

<div class="product-thumb__thumb__inner"
     style="background-image: url(${list.FILE_PATH});">
</div>

또는

<img src="${list.FILE_PATH}" alt="제품 이미지">

---

📌 정리

문제원인해결

슬라이드 1개만 보임	다중 Swiper 충돌	각각 따로 초기화
버튼 안 먹힘	navigation 연결 안 됨	mainSwiper에 navigation 설정
Swiper 미적용	DOM 생성 전 초기화	window.load 이후 실행
이미지 안 보임	img에 background 사용	div 또는 src 사용

---

🎯 결론

JSP에서 Swiper가 안 먹히는 대부분의 원인은

1. 다중 Swiper를 한 번에 초기화
2. DOM 생성 이전 실행
3. 잘못된 이미지 구조

이 세 가지다.

Swiper는 반드시

• 컨테이너 분리
• 각각 new Swiper
• load 이후 실행

이 패턴을 지켜야 안정적으로 동작한다.