[swiper] 가로 스크롤 구현하기

이전에 작성한 글에서 css로 가로스크롤을 구현한 예제가 있다.

하지만 이 예제는 각각의 요소의 넓이를 보장해주기 못하고 화면의 사이즈를 변경했을 때 각각의 div의 사이즈가 작아지는 등의 여러 문제들이 존재한다.

따라서 가로 스크롤을 swiper을 통해 만들어보고자 한다.

먼저, 기존의 div의 클래스명을 swiper에 맞게 변경한다.

          <div class="swiper board-slide">
                <ul class="swiper-wrapper">
                    <li class="swiper-slide">
                        <a href="">
                            <div class="thumb-area">
                                <img src="./assets/images/main/sc-board_s_1.jpg" alt="">
                                <span class="new-mark"></span>
                            </div>
                            <div class="text-area">
                                <div class="review">리뷰 141,098</div>
                                <div class="name">[1+1] 에어쿨링 지니 시그니처 레깅스</div>
                                <div class="price"><strong>50%</strong>49,000원<span>98,000원</span></div>
                                <div class="link-detail">애슬레저 1위</div>
                            </div>
                        </a>
                    </li>
                    ...
               </ul>
           </div>

slidesPerView을 통해 한화면에 보여질 슬라이드 갯수를 설정하고
spacebetween을 통해 슬라이드 사이의 gap을 설정해준다.

그럼 다음과 같은 화면을 구성할 수 있다.