Carousel with card n * n 해결

페이징 및 검색 기능이 구현된 뷰에 리스트와 이미지 슬라이드 두가지 옵션으로 보여주고 싶었다.

 

number.sequence와 가져온 dtolist의 사이즈를 나눈값과 나머지를 통해서 num 변수에 설정하고

해당 num변수로 carousel 안쪽 card의 갯수를 조절했다.

 

<th:block th:each="num, iterstat : ${#numbers.sequence(0, (gatherList.dtoList.size / 2 + gatherList.dtoList.size % 2) - 1)}">
    <div class="carousel-item" th:classappend="${iterstat.index == 0} ? 'active' : ''">
        <th:block th:if="${iterstat.last ne true} or ${gatherList.dtoList.size() % 2 < 1}">
            <div class="row">
                <div class="col-sm-6 mb-3">
                    <div class="card">
                        <a href="#" th:href="@{/user/gather/detail/{id}(id = ${gatherList.dtoList.get(num * 2).id})}">
                            <th:block>
                                <img class="img-fluid"
                                     style="width: 620px; height: 300px"
                                     th:if="${gatherList.dtoList.get(num * 2).getSaveFileName() != null}"
                                     th:src="|/user/myGather/${gatherList.dtoList.get(num * 2).saveFileName}|"
                                />
                                <img alt="100%x280"
                                     class="img-fluid" src="https://via.placeholder.com/620x300/000000/FFFFFF?text=No+Image"
                                     th:if="${gatherList.dtoList.get(num * 2).getSaveFileName() == null}">
                            </th:block>
                            <div class="card-body">
                                <h4 class="card-title"
                                    th:text="${gatherList.dtoList.get(num * 2).title}"></h4>
                                <p class="card-text"
                                   th:text="${gatherList.dtoList.get(num * 2).content}"></p>
                            </div>
                        </a>
                    </div>
                </div>
                <div class="col-sm-6 mb-3">
                    <div class="card">
                        <a href="#"
                           th:href="@{/user/gather/detail/{id}(id = ${gatherList.dtoList.get(num * 2 + 1).id})}">
                            <th:block>
                                <img class="img-fluid"
                                     style="width: 620px; height: 300px"
                                     th:if="${gatherList.dtoList.get(num * 2 + 1).getSaveFileName() != null}"
                                     th:src="|/user/myGather/${gatherList.dtoList.get(num * 2 + 1).saveFileName}|" />
                                     <!--th:src="@{${gatherList.dtoList.get(num * 2 + 1).saveFileName}}"/>-->
                                <img alt="100%x280"
                                     class="img-fluid" src="https://via.placeholder.com/620x300/000000/FFFFFF?text=No+Image"
                                     th:if="${gatherList.dtoList.get(num * 2 + 1).getSaveFileName() == null}">
                            </th:block>
                            <div class="card-body">
                                <h4 class="card-title"
                                    th:text="${gatherList.dtoList.get(num * 2 + 1).title}"></h4>
                                <p class="card-text"
                                   th:text="${gatherList.dtoList.get(num * 2 + 1).content}"></p>
                            </div>
                        </a>
                    </div>
                </div>
            </div>
        </th:block>
        <th:block th:unless="${iterstat.last ne true} or ${gatherList.dtoList.size() % 2 < 1}">
            <div class="row d-flex justify-content-center">
                <div class="col-sm-6 mb-3">
                    <div class="card">
                        <a href="#"
                           th:href="@{/user/gather/detail/{id}(id = ${gatherList.dtoList.get(num * 2).id})}">
                            <th:block>
                                <img class="img-fluid"
                                     style="width: 620px; height: 300px"
                                     th:if="${gatherList.dtoList.get(num * 2).getSaveFileName() != null}"
                                     th:src="|/user/myGather/${gatherList.dtoList.get(num * 2).saveFileName}|" />
                                <img alt="100%x280"
                                     class="img-fluid" src="https://via.placeholder.com/620x300/000000/FFFFFF?text=No+Image"
                                     th:if="${gatherList.dtoList.get(num * 2).getSaveFileName() == null}">
                            </th:block>
                            <div class="card-body">
                                <h4 class="card-title"
                                    th:text="${gatherList.dtoList.get(num * 2).title}"></h4>
                                <p class="card-text"
                                   th:text="${gatherList.dtoList.get(num * 2).content}"></p>
                            </div>
                        </a>
                    </div>
                </div>
            </div>
        </th:block>
    </div>
</th:block>

 

th:src 부분은 서버 내부에 업로드한 파일 경로를 두었더니 업로드 직후 보이지 않아서 비동기적으로 변경했다.

아래글 참조

2023.02.13 - [프로젝트 정리/지역기반 모임 서비스] - 이미지 업로드 직후 업로드한 이미지가 보이지 않는 상황 해결

이미지 업로드 직후 업로드한 이미지가 보이지 않는 상황 해결

 

카드를 3개 넣는다면 아래와 같이 반복 횟수를 정하고 그에 맞춘 card 조건식을 설정하면 될 듯 하다.

<th:block th:each="num, iterstat : ${#numbers.sequence(0, (gatherList.dtoList.size / 3 + (gatherList.dtoList.size % 2 > 0 ? 1 : 0)) - 1)}">