Slider 02

슬라이드 이펙트 02 (좌로 움직이기)

이번에는 이미지 슬라이드 형태를 가진 이펙트를 코딩해봤습니다.

HTML

HTML은 기본적인 섹션안에 div 클래스를 잡아줍니다.

코드 보기

    <main id="main">
        <section id="sliderType01">
            <div class="slider__wrap">
                <div class="slider__img">
                    <div class="slider__inner">
                        <div class="slider"><img src="../assets/img/slide06.jpg" alt="이미지6"></div>
                        <div class="slider"><img src="../assets/img/slide07.jpg" alt="이미지7"></div>
                        <div class="slider"><img src="../assets/img/slide08.jpg" alt="이미지8"></div>
                        <div class="slider"><img src="../assets/img/slide09.jpg" alt="이미지9"></div>
                        <div class="slider"><img src="../assets/img/slide10.jpg" alt="이미지10"></div>
                    </div>
                </div>
            </div>
        </section>
    </main>

CSS

css는 기본적인 형태와 스타일을 잡아주지만, 이미지 개개인에 nth-child를 이용해여 개별 구역을 잡아줍니다.
또한, z-index를 사용하여 각 위치를 잡아줍니다.

코드 보기

    /* slider */
    .slider__wrap {
        width: 100%;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .slider__img {      /* 이미지를 보이는 영역 */
        position: relative;
        width: 800px;
        height: 450px;
        overflow: hidden;
    }
    .slider__inner {    /* 이미지를 감싸고 있는 부모 : 움직이는 부분 */
        display: flex;
        flex-wrap: wrap;
        width: 4000px;
        height: 450px;
    }
    .slider {   /* 개별적인 이미지 */
        position: relative;
        width: 800px;
        height: 450px;
    }
    .slider::before {
        position: absolute;
        left: 5px;
        top: 5px;
        background: rgba(0, 0, 0, 0.4);
        color: #fff;
        padding: 5px 10px;
    }
    .slider:nth-child(1)::before {content: "이미지6";}
    .slider:nth-child(2)::before {content: "이미지7";}
    .slider:nth-child(3)::before {content: "이미지8";}
    .slider:nth-child(4)::before {content: "이미지9";}
    .slider:nth-child(5)::before {content: "이미지10";}
    .slider:nth-child(1) {z-index: 5;}
    .slider:nth-child(2) {z-index: 4;}
    .slider:nth-child(3) {z-index: 3;}
    .slider:nth-child(4) {z-index: 2}
    .slider:nth-child(5) {z-index: 1;}

    @media(max-width: 800px) {
        .slider__img {
        position: relative;
        width: 400px;
        height: 225px;
        }
    }

script

스크립트는 총 세 가지의 스크립트를 예시로 들었으며 javascript, gsap, jQuery를 사용하였습니다.
setInterval 메서드를 사용하여 이미지의 슬라이드 형식을 잡았고 gsap와 jQuery는 각 .min.js 스크립트 주소를 사용하여 만들었습니다.

코드 보기

    // javascript
    const sliderInner = document.querySelector(".slider__inner");    // 움직이는 영역
    const slider = document.querySelectorAll(".slider");                    // 이미지
    let currentIndex = 0;

    sliderInner.style.transition = "all 0.6s";

    setInterval(() => {
        currentIndex = (currentIndex + 1) % slider.length;

        sliderInner.style.transform = "translateX("+ -800 * currentIndex +"px)";
    },1500)

    // gsap
    <script src="https:>//cdnjs.cloudflare.com/ajax/libs/gsap/3.11.0/gsap.min.js"></script>
    <script>
        const slider = document.querySelectorAll(".slider");

        let currentIndex = 0;
        
        setInterval(() => {
            currentIndex = (currentIndex + 1) % slider.length;

            gsap.to(".slider__inner", {
                duration : 0.6,
                x: -800 * currentIndex
            })
        },1500);
    </script>

    // jquery
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
        let currentIndex = 0;
        
        setInterval(() => {
            currentIndex = (currentIndex + 1) % $ (".slider").length

            // $(".slider__inner").css(
            //     "transform", "translateX("+ -800* currentIndex +" px)"
            // );

            $(".slider__inner").css("position", "relative");
            $(".slider__inner"),animate({left : -800 * currentIndex},600)

        },1500);
    </script>

코드 원본 보기

결과물

원본 사이트 보기