[Swiper] 스와이퍼 오류 Uncaught TypeError: Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'.

다음 게시글

[Swiper] 스와이퍼 한 페이지에 여러개 사용하기. Multiple Swiper

 

 

//fragment호출부분
<div th:replace="fragments/slider :: slider('CATEGORY222', 'swiperB')"></div>


//fragment지정부분
<div class="mt-5" th:fragment="slider(title, swiperName)">
    <h3 style="font-weight:bold;" th:text="${title}"></h3>
    <div class="swiper-cover">
        <!-- Slider main container -->
        <div class="swiper " th:classappend="${swiperName}">
            <!-- Additional required wrapper -->
            <div class="swiper-wrapper">
                <!-- Slides -->
                <th:block th:each="num : ${#numbers.sequence(1,10)}">
                <!--/* 컬렉션 없이 단순 반복문처리 : ${#numbers.sequence(from,to,step)} */-->
                    <div class="swiper-slide">
                        <div class="col">
                            <div class="card shadow-sm">
                                <img src="https://plchldr.co/i/245x180" alt="plchldr.co" class="swiper-lazy">
                                <div class="card-body">
                                    <p class="card-text" style="text-align:left;">
                                        <span th:text="'책제목'+${num}"></span> <br>
                                        <span>최상급</span> <br>
                                        <span>10000원</span>
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </th:block>
            </div>
        </div>

        <!-- If we need navigation buttons -->
        <div class="swiper-button-prev-custom " th:classappend="${swiperName}">
            <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi bi-arrow-left-circle-fill" viewBox="0 0 16 16">
                <path d="M8 0a8 8 0 1 0 0 16A8 8 0 0 0 8 0zm3.5 7.5a.5.5 0 0 1 0 1H5.707l2.147 2.146a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L5.707 7.5H11.5z"/>
            </svg>
        </div>
        <div class="swiper-button-next-custom " th:classappend="${swiperName}">
            <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi bi-arrow-right-circle-fill" viewBox="0 0 16 16">
                <path d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0zM4.5 7.5a.5.5 0 0 0 0 1h5.793l-2.147 2.146a.5.5 0 0 0 .708.708l3-3a.5.5 0 0 0 0-.708l-3-3a.5.5 0 1 0-.708.708L10.293 7.5H4.5z"/>
            </svg>
        </div>

    </div>
</div>

나는 swiper를 fragment로 사용하기위해 타임리프로 swiperName을 받아서 클래스를 추가하게끔했고,

사진처럼 버튼을 외부로 꺼내기 위해 swiper-cover라는 div로 한번 더 감싸주었다 

그리고 한 페이지에 여러 슬라이드가 들어간 상태이다 (swiper-slide 안은 bootstrap클래스 사용)

 

const swiperA = new Swiper('.swiperA', {
	loop: true, 
	navigation: {
		nextEl: '.swiperA.swiper-button-next-custom',
		prevEl: '.swiperA.swiper-button-prev-custom',
	},
	lazy : {
		loadPrevNext : true 
	},
});

타임리프로 넘어온 swiperName을 자바스크립트에서 지정해서 저렇게 가져오면 될 줄 알았는데.. 

^^..

 

구글링해봐도 나랑은 거리가 다 먼 것 같고 이것저것 시도해보다가

    <div class="mt-5">
        <h3 style="font-weight:bold;">TestTest</h3>
        <div class="swiper-cover">
            <!-- Slider main container -->
            <div class="swiper swiperC"> // 클래스명지정⭐⭐⭐⭐⭐⭐
                <!-- Additional required wrapper -->
                <div class="swiper-wrapper">
                    <!-- Slides -->
                    <th:block th:each="num : ${#numbers.sequence(1,10)}">
                        <!--/* 컬렉션 없이 단순 반복문처리 : ${#numbers.sequence(from,to,step)} */-->
                        <div class="swiper-slide">
                            <div class="col">
                                <div class="card shadow-sm">
                                    <img src="https://plchldr.co/i/245x180" alt="plchldr.co" class="swiper-lazy">
                                    <div class="card-body">
                                        <p class="card-text" style="text-align:left;">
                                            <span th:text="'책제목'+${num}"></span> <br>
                                            <span>최상급</span> <br>
                                            <span>10000원</span>
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </th:block>
                </div>
            </div>

            <!-- If we need navigation buttons -->
            <div class="swiper-button-prev-custom swiper-button-prev-custom-swiperC" > //css 그대로 놔두고 새로운 클래스명지정⭐⭐⭐⭐⭐⭐
                <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi bi-arrow-left-circle-fill" viewBox="0 0 16 16">
                    <path d="M8 0a8 8 0 1 0 0 16A8 8 0 0 0 8 0zm3.5 7.5a.5.5 0 0 1 0 1H5.707l2.147 2.146a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L5.707 7.5H11.5z"/>
                </svg>
            </div>
            <div class="swiper-button-next-custom swiper-button-next-custom-swiperC"> //css 그대로 놔두고 새로운 클래스명지정⭐⭐⭐⭐⭐⭐
                <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi bi-arrow-right-circle-fill" viewBox="0 0 16 16">
                    <path d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0zM4.5 7.5a.5.5 0 0 0 0 1h5.793l-2.147 2.146a.5.5 0 0 0 .708.708l3-3a.5.5 0 0 0 0-.708l-3-3a.5.5 0 1 0-.708.708L10.293 7.5H4.5z"/>
                </svg>
            </div>

        </div>
    </div>

const swiperC = new Swiper('.swiperC', {
	loop: true, //무한반복 O

	navigation: {
		nextEl: '.swiper-button-prev-custom-swiperC',
		prevEl: '.swiper-button-next-custom-swiperC',
        //클래스명 하나로만 지정⭐⭐⭐⭐⭐⭐
	},

	lazy : {
		loadPrevNext : true // 이전, 다음 이미지는 미리 로딩
	},
}

이렇게 하니 에러없이 잘된다.. 대체 머야 ㅜㅜ