[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;

[jQuery] [swiper] 스와이프 이미지 슬라이드

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.3.3/css/swiper.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.3.3/js/swiper.min.js"></script>

    <div class="swiper-container">

        <ul class="swiper-wrapper">

            <li class="swiper-slide" style="background:url(/images/main/visual01.jpg) center center / cover no-repeat;" data-left="0"></li>
            <li class="swiper-slide" style="background:url(/images/main/visual03.jpg) center center / cover no-repeat;" data-left="1"></li>
            <li class="swiper-slide" style="background:url(/images/main/visual02.jpg) center center / cover no-repeat;" data-left="0"></li>
            <li class="swiper-slide" style="background:url(/images/main/visual04.jpg) center center / cover no-repeat;" data-left="1"></li>
            <li class="swiper-slide" style="background:url(/images/main/visual05.jpg) center center / cover no-repeat;" data-left="1"></li>
        </ul>

        <div class="swiper-pagination"></div>
        <!-- navigation buttons -->
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>

    </div>

    $(document).ready(function(){
        //initialize swiper when document ready
        var mySwiper = new Swiper ('.swiper-container', {
            // Optional parameters
            //direction: 'vertical',
            effect: 'fade',
            speed: 2500,
            crossEffect: { crossFade: true },
            autoplay: true,
            loop: true,
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },
            pagination: {
                el: '.swiper-container .swiper-pagination',
                clickable: true,
            },
            on: {
                init: function(){
                    //console.log("slide init");
                    //console.log(this.$wrapperEl[0]);
                    var slide = $(this.$wrapperEl[0]).find(".swiper-slide-active");
                    var bg = slide.data("left");
                    if(bg=="1") {
                        $("header").addClass("bg-white");
                    } else {
                        $("header").removeClass("bg-white");
                    }
                },
            },
        });

        mySwiper.on('slideChange', function(){
            //console.log("slide change");
            //console.log(mySwiper.realIndex);
            var r_idx = mySwiper.activeIndex;
            var slide = mySwiper.slides[r_idx];
            //console.log(mySwiper.$wrapperEl);
            //console.log($(slide));
            var bg = $(slide).data("left");
            //console.log("r_idx=" + r_idx + ", bg=" + bg + ", src=" + $(slide).css("background"));
            if(bg=="1") {
                $("header").addClass("bg-white");
            } else {
                $("header").removeClass("bg-white");
            }
        });
    });

단순히 슬라이드를 동작시키려면 아래와 같이 하면 된다.

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

    });