웹4 1일차

[스와이퍼 버튼 커스텀하기]

기본 스와이퍼의 페이지 넘김 버튼은 페이지 위에 겹쳐져 있어, 사용자들이 보기에 불편한 위치에 있다. 

기본 스와이퍼

 

 

페이지 넘김 버튼을 보기 좋게 페이지 밖 양옆에 위치하도록 커스텀 하자.

 

 

1. 스와이퍼 전체 감싸주는 swiper-box요소 만들어 주기

페이지 넘김 버튼을 swiper 밖으로 빼낼 것이므로 swiper-box요소를 swiper의 부모 요소로 생성해준다.

추가로 더 감싸주는 container도 생성해준다.

<div class="container">
    <div class="swiper-box">
        <div class="swiper">
            <!-- 스와이퍼 페이지 리스트 -->
            <div class="swiper-wrapper"> ... </div>

            <!-- 작은 동그라미 -->
            <div class="swiper-pagination"></div>

            <!-- 왼쪽 오른쪽 화살표 버튼 -->
            <div class="swiper-button-prev"></div>
            <div class="swiper-button-next"></div>

            <!-- 스크롤 -->
            <div class="swiper-scrollbar"></div>
        </div>
    </div>
</div>

 

 

2. 페이지 넘김 버튼 구조 밖으로 빼기

스와이퍼 박스와 페이지 넘김 버튼이 서로 형제 요소가 되도록, 페이지 넘김 버튼을 swiper아래에 위치하도록 한다.

<div class="container">
    <div class="swiper-box">
        <div class="swiper">
            <!-- 스와이퍼 페이지 리스트 -->
            <div class="swiper-wrapper"> ... </div>

            <!-- 작은 동그라미 -->
            <div class="swiper-pagination"></div>

            <!-- 스크롤 -->
            <div class="swiper-scrollbar"></div>
        </div>

        <!-- 페이지 넘김버튼 -->
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
    </div>
</div>

 

 

3. relative 설정 후 버튼 위치 조정

1) swiper의 CSS값에서 position: relative;로 작성

2) swiper-button-prev&next CSS설정

/* 
페이지 버튼의 각각의 right, left값은 기본 10px로 설정되어 있다. 
원하는 공백만큼의 값으로 수정해도 된다. 
*/
.swiper-button-next{width: 50px; right: 10px;}
.swiper-button-prev{width: 50px; left: 10px;}

2) container 너비 1440px로 고정.

3) swiper의 너비를 100%에서 버튼이 차지하는 만큼의 너비를 빼서 설정.   

     => width: calc( 100% - 60px );

           빼는 값: 60px = 10px(right/left )+ 50px(width)

 

아래 이미지는 예시이다. 

구분되도록 swiper의 배경을 pink로 설정했고,

버튼이 swiper-box안에서 swiper와 겹치지 않게 양 옆으로 위치해 있음을 볼 수 있다. 

 

 

4. 버튼 원하는 모양으로 만들기

페이지 넘김 버튼은 기본적으로 스와이퍼 라이브러리에서 만든 가상요소이다. 

못생긴 버튼

 

그래서 가상요소를 display: none; 처리하고 새로 원하는 아이콘을 각 div에 삽입해준 후 css로 디자인한다.

HTML

<!-- 각 swiper-button요소 아래에 원하는 아이콘 삽입 -->
<div class="swiper-button-prev">
    <span class="material-symbols-outlined">
      arrow_back
    </span>
</div>
<div class="swiper-button-next">
    <span class="material-symbols-outlined">
      arrow_forward
    </span>
</div>

CSS

/* 가상요소 안 보이게 처리 */
.swiper-box .swiper-button-next:after,
.swiper-box .swiper-button-prev:after {
  display: none;
}

/* 새로 디자인 */
.swiper-box .swiper-button-next
, .swiper-box .swiper-button-prev 
{background-color: rgba(0,0,0,0.5); border-radius: 50%; width: 40px; height: 40px; color: #fff;}

수정한 버튼 디자인

 

 

 

아래의 이미지는 재구성한 스와이퍼와, 스와이퍼의 요소들이 어떤 크기를 가지고 어떻게 정렬이 되어야 하는지 알기 쉽도록 보여준다.

페이지네이션(swiper-button)을 사용하기 편하도록 스와이퍼 구성 요소를 재구성한 모습.