SwiperJS [Custom - Navbar]

SwiperJS를 이용하여 모바일용 navbar를 제작하기 위해 Custom을 진행하였습니다.

 

# SwiperJS

: 저는 freeMode에 대한 커스텀을 진행했습니다.

https://swiperjs.com/demos#freemode

HTML

: section으로 구분후, 추가 작업을 위해 각 id를 부여후 CSS를 따로 적용했습니다.

<section>
        <div id="nav" class="swiper mySwiper">
            <div class="swiper-wrapper">
                <div id="nav_list" class="swiper-slide">
                    <p>전체</p>
                </div>
                <div id="nav_list" class="swiper-slide">
                    <p>패션잡화/화장품</p>
                </div>
                <div id="nav_list" class="swiper-slide">
                    <p>의류/언더웨어</p>
                </div>
                <div id="nav_list" class="swiper-slide">
                    <p>출산/유아동/완구</p>
                </div>
                <div id="nav_list" class="swiper-slide">
                    <p>가구/생활/취미</p>
                </div>
                <div id="nav_list" class="swiper-slide">
                    <p>스포츠/건강/식품</p>
                </div>
                <div id="nav_list" class="swiper-slide">
                    <p>가전/휴대폰/산업</p>
                </div>
            </div>
        </div>
    </section>

CSS

: width: 'auto'를 적용하기 위해 width를 따로 지정해주었습니다.

html, body{
    margin: 0;
    padding: 0;
    position: relative;
    height: 100%;
}

/* Swiper */
.swiper {
    width: 100%;
    height: 100%;
  }
.swiper-slide {
    /* swiper width: auto를 위한 width 지정 */
    width: 110px !important; 
    text-align: center;
    font-size: 12px;
    background: #fff;
    /* Center slide text vertically */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}

JS

: slidesPerview를 'auto'로 지정, freeMode : true

// SwiperJs CDN
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
<script type="text/javascript">
    // Swiper JS
    var swiper = new Swiper(".mySwiper", {
        slidesPerView: 'auto',
        freeMode: true,
      });
</script>