swiper-effect-creative

이번 반 예제 클론 코딩은 

https://www.century21cc.co.kr/ 였는데...

개인적으로 사이트 내 단점을 수정하면서 예제로 쓰고있다.

반응형 예제로 쓰기엔

나쁜 레이아웃이지만 뭐 마크업이 불가능한 레이아웃은 아니므로...

 

century food 섹션 왼쪽 슬라이드

century food 섹션 왼쪽 슬라이드

century food 섹션 왼쪽 슬라이드

저 섹션 부분 왼쪽 그림이 swiper를 이용해서 fade처리되면서

세번 넘어가게 작업 되어 있길래 따라해 보았습니다.

 

참고

swiper demo link

swiper-effect-creative

 

 

// HTML

<div class="swiper img-slider">
        <div class="swiper-wrapper">
            <div class="swiper-slide">
                <picture class="f-l-img">
                    <source srcset="img/main-food-img-01.jpg" media="screen and (min-width: 981px)">
                    <img src="img/main-food-img-01-m@3x.jpg" alt="부침개">
                </picture>
                <picture class="f-r-img">
                    <source srcset="img/main-food-img-02.jpg" media="screen and (min-width: 981px)">
                    <img src="img/main-food-img-02-m@3x.jpg" alt="부침개">
                </picture>
            </div>
            <div class="swiper-slide">
                <picture class="f-l-img">
                    <source srcset="img/main-food-img-03.jpg" media="screen and (min-width: 981px)">
                    <img src="img/main-food-img-03-m@3x.jpg" alt="부침개">
                </picture>
                <picture class="f-r-img">
                    <source srcset="img/main-food-img-04.jpg" media="screen and (min-width: 981px)">
                    <img src="img/main-food-img-04-m@3x.jpg" alt="부침개">
                </picture>
            </div>
            <div class="swiper-slide">
                <picture class="f-l-img">
                    <source srcset="img/main-food-img-05_n1.jpg" media="screen and (min-width: 981px)">
                    <img src="img/main-food-img-05-m@3x_n1.jpg" alt="부침개">
                </picture>
                <picture class="f-r-img">
                    <source srcset="img/main-food-img-06_n1.jpg" media="screen and (min-width: 981px)">
                    <img src="img/main-food-img-06-m@3x_n1.jpg" alt="부침개">
                </picture>
            </div>
        </div>
    </div>

// CSS

.food-sec .img-slider {
    float: left;
    max-width: 60%;
    padding-bottom: 100px;
}

.food-sec .img-slider .swiper-slide {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    overflow: visible;
}

.img-slider .f-l-img {
    width: 60%;
    opacity: 0;
    transition: 1s;
    transform: translateY(20px);
}

.img-slider .f-r-img {
    width: 45%;
    margin-left: -50px;
    transform: translateY(120px);
    opacity: 0;
    transition: 1s;
}

.img-slider .swiper-slide-active .f-l-img {
    transform: translateY(0);
    opacity: 1;
}

.img-slider .swiper-slide-active .f-r-img {
    opacity: 1;
    transform: translateY(100px);
    transition-delay: 0.4s;
}

.img-slider img {
    width: 100%;
}

@media screen and (max-width: 980px) {
    .food-sec .img-slider {
        width: 100%;
        max-width: 100%;
        padding-bottom: 50px;
    }

    .img-slider .f-r-img {
        transform: translateY(70px);
    }

    .img-slider .swiper-slide-active .f-r-img {
        transform: translateY(50px);
    }
}

// JS

const imgSwiper = new Swiper('.img-slider', {
    loop: true,
    autoplay: {
        delay: 3500
    },
    // grabCursor: true,
    effect: "creative",
    creativeEffect: {
        prev: {
            opacity: 0,
            // translate: [0, 0, 0],
        },
        next: {
            opacity: 0,
            // translate: [0, 0, 0],
        },
    }
})

 

 

swiper-effect-creative구현