[swiper] grid layout 스와이퍼로 2x2 그리드 레이아웃 만들기

HTML

<div class="menu-wrap swiper-container swiper-menu">
    <ul class="menu swiper-wrapper">
        <li class="item swiper-slide">
        	<a class="btn-link"></a>
        </li>
        <li class="item swiper-slide">
        	<a class="btn-link"></a>
        </li>
        <li class="item swiper-slide">
        	<a class="btn-link"></a>
        </li>
        <li class="item swiper-slide">
        	<a class="btn-link"></a>
        </li>
    </ul>
</div>

 

 

CSS

.menu-wrap .menu{flex-wrap: nowrap;}
.menu-wrap .menu .item{width: calc((100% - 18px)/4);margin-left: 0;margin-top: 0;}
.menu-wrap .menu .item ~ .item{margin-top: 0;}
.menu-wrap .menu .item a + a{margin-top: 6px;}

 

 

javaScript

if( $('.swiper-menu .swiper-slide').length > 1 ) {
    $('.swiper-menu').addClass('is-active');
    var newSwiper = new Swiper('.swiper-menu.swiper-container', {
        init: false,
        slidesPerView: 4,
        speed: 250,
        spaceBetween: 6,
        resistance: '100%',
        resistanceRatio: 0,
        updateOnWindowResize: true,
        observer: true,
        observeParents: true,
        grabCursor: true,
        breakpoints:{
            360: {
            	slidesPerView: 1.8,
            },
            480: {
            	slidesPerView: 2.2,
            },
            768: {
            	slidesPerView: 3.2,
            },
        }
    });
    newSwiper.init();
}