[plugin] Swiper 응용

Swiper 라는 훌륭한 슬라이드 플러그인을 자주 이용한다. 

 

유형 중에 요즘 많이 보이는 슬라이드 유형을 실무에서 코딩해 놓은 것이 있어서 공유하고자 한다. 

 

특이한 스와이퍼 유형 전, 후, 현재 창을 미리 볼 수 있는 스타일.

<div class="swiper-slide-box">                

            <div class="inner03 swiper-container pt0">

                <ul class="swiper-wrapper">

                    <li class="swiper-slide">

                        <div style="padding: 3.7% 2.7%;">

                            <a href="javascript:;" class="dis-block" onclick="">

                                <div>

                                    <img src="../assets/img/flatform/sample/banner/sub/my_banner.png"

                                        class="bor-all-style06" alt=""> 

                                </div>

                            </a>

                        </div>

                    </li>

                    <li class="swiper-slide">

                        <div style="padding: 3.7% 2.7%;">

                            <a href="javascript:;" class="dis-block" onclick="">

                                <div>

                                    <img src="../assets/img/flatform/sample/banner/sub/my_banner.png"

                                        class="bor-all-style06" alt=""> 

                                </div>

                            </a>

                        </div>

                    </li>

                    <li class="swiper-slide">

                        <div style="padding: 3.7% 2.7%;">

                            <a href="javascript:;" class="dis-block" onclick="">

                                <div>

                                    <img src="../assets/img/flatform/sample/banner/sub/my_banner.png"

                                        class="bor-all-style06" alt=""> 

                                </div>

                            </a>

                        </div>

                    </li>

                </ul>

            </div>

        </div>

 

 

위와 같은 유형으로 슬라이드를 그리고자 하면 아래처럼 옵션만 다르게 주면 된다. 

 

<script>

var innerSwiper02 = new Swiper('.inner03', {

        loop: true,

        autoplay: true,

        slidesPerView: 'auto',

        spaceBetween: 10,

        centeredSlides: true

    });

    innerSwiper02;

</script>

 

또한 css 스타일로 약간의 수정이 필요하다.

해당 swiper-slide

의 너비 값을 48%로 정의한다.

너비 값을 정의 해주면 위의 미리보기 슬라이드 예시처럼 현재 슬라이드 좌우에 전, 후 슬라이드의 반이 보여질 것이다.

또한 위의 태그 안의 인라인 스타일 처럼 swiper-slide 안의 div 박스에 좌우 패딩 값을 적절히 넣어준다.

 

자세한 사항은 Swiper 홈페이지 API 에서 확인 가능하다.

 

https://swiperjs.com/api/