[swiper] 슬라이드에 이미지 및 텍스트 올리기

<div id="banner" class="swiper-container">
    <ul class="swiper-wrapper">
        <li class="swiper-slide" data-left="0"><img src="/images/main/visual01.jpg" alt=""></li>
        <li class="swiper-slide" data-left="0"><img src="/images/main/visual01.jpg" alt=""></li>
        <li class="swiper-slide" data-left="0"><img src="/images/main/visual01.jpg" alt=""></li>
    </ul>
    <div class="swiper-pagination"></div>
</div>

$(document).ready(function(){
    //initialize swiper when document ready
    var mySwiper = new Swiper ('.swiper-container', {
        effect: 'fade',
        fadeEffect: { crossFade:false, },
        speed: 2500,
        autoplay: true,
        loop: true,
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },
        pagination: {
            el: '.swiper-container .swiper-pagination',
            clickable: true,
        },
    });
});

/* 슬라이드 가로크기에 반응. 이미지를 자르고, 슬라이드의 중앙에 위치시킴 */
.swiper-slide { position:relative; width:100%; height:592px; overflow:hidden; }
.swiper-slide img { position:relative; display:block; width:1920px; height:592px; left:50%; margin-left:-960px; transform:scale(1.2,1.2); transition:all 0.5s; max-width:2000px; }
.swiper-slide.swiper-slide-active img { transform:scale(1.0,1.0); transition:all 1s; }

슬라이드가 1920px보다 작은 경우에는 이미지를 슬라이드의 가로 중앙에 위치시킨다. left:50%; margin-left:-960px;

이미지를 1.2배 확대한 크기로 생성하고,
슬라이드가 active 상태인 경우만 원본 크기로 변경시킨다.
transform:scale(1.2,1.2); transition:all 0.5s;
transform:scale(1.0,1.0); transition:all 1s;