JAVASCRIPT

슬라이드 이펙트5 세로유형(연속)을 알아 봅시다.

이미사용 2023. 4. 12. 22:23
명언
-
728x90
반응형

슬라이드 이펙트1 기본유형 보러가기

슬라이드 이펙트2 가로유형 보러가기

슬라이드 이펙트3 세로유형 보러가기

슬라이드 이펙트4 가로유형 (연속)보러가기

슬라이드 이펙트6 버튼,닷메뉴 보러가기

슬라이드 이펙트7 버튼,썸네일 보러가기

슬라이드 이펙트5 세로유형 (연속)

 

 

전체소스 보러가기

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>슬라이드 이펙트05</title>

    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/slider.css">
    <style>
        /* slider__wrap */
        .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 { /* 개별적인 이미지 */
            position: relative;
            width: 800px;
            height: 450px;
        }
    </style>

</head>
<body class="img03 bg02 font06">
    <header id="header">
        <h1>Javascript Slider Effect05</h1>
        <p>슬라이드 이펙트 : 위로 움직이기 (연속적으로)</p>
        <ul>
            <li><a href="sliderEffect01.html">1</a></li>
            <li><a href="sliderEffect02.html">2</a></li>
            <li><a href="sliderEffect03.html">3</a></li>
            <li class="active"><a href="sliderEffect04.html">4</a></li>
            <li><a href="sliderEffect05.html">5</a></li>
            <li><a href="sliderEffect06.html">6</a></li>
        </ul>
    </header>
    <!-- header -->

    <main id="main">
        <div class="slider__wrap">
            <div class="slider__img">
                <div class="slider__inner">
                    <div class="slider s1"><img src="./img/sliderEffect06-min.jpg" alt="이미지1"></div>
                    <div class="slider s2"><img src="./img/sliderEffect07-min.jpg" alt="이미지2"></div>
                    <div class="slider s3"><img src="./img/sliderEffect08-min.jpg" alt="이미지3"></div>
                    <div class="slider s4"><img src="./img/sliderEffect09-min.jpg" alt="이미지4"></div>
                    <div class="slider s5"><img src="./img/sliderEffect10-min.jpg" alt="이미지5"></div>
                </div>
            </div>
        </div>
    </main>
    <!-- main -->

    <footer id="footer">
        <a href="mailto:ghkddn132@naver.com">ghkddn132@naver.com</a>
    </footer>
    <!-- footer -->

슬라이드 이펙트4 가로유형(연속)에서 slider__inner의 width값을 주어 이미지들이 제대로 가로로 정렬 할수 있게 해주었지만 세로유형(연속)에서는 원래 세로정렬 되어있던 이미지들을 slider__inner에 display: flex, flex-wrap: wrap을 주어 가로정렬 해준것이니 이것을 없애면 알아서 세로로 정렬이 됩니다. 그후 가로정렬에 필요했던 slider__inner의 width과 height 값을 없애줍도록 합니다. 그러면 slider__inner에는 아무것도 남지 않게 됩니다.

 

 

 

javascript

    <script>
        // 선택자
        const sliderWrap = document.querySelector(".slider__wrap");
        const sliderImg = sliderWrap.querySelector(".slider__img");     // 보여지는 영역
        const sliderInner = sliderWrap.querySelector(".slider__inner"); // 움직이는 영역
        const slider = sliderWrap.querySelectorAll(".slider");          // 개별 이미지
        
        let currentIndex = 0;                                   //현재 보이는 이미지
        let sliderCount = slider.length;                        //이미지 갯수
        let sliderInterval = 3000;          //이미지 변경 간격 시간
        let sliderHeight = slider[0].offsetHeight;                //이미지의 가로값
        let sliderClone = sliderInner.firstElementChild.cloneNode(true); //첫번째 이미지 복사

        //복사한 첫번째 이미지 마지막에 붙여넣기
        sliderInner.appendChild(sliderClone);

        function sliderEffect(){
            currentIndex++;

            sliderInner.style.transition = "all 0.6s";
            sliderInner.style.transform = "translateY(-"+ sliderHeight * currentIndex +"px)";

            //마지막 이미지에 위치 했을 떄
            if(currentIndex == sliderCount){
                setTimeout(() => {
                    sliderInner.style.transition = "0s";
                    sliderInner.style.transform = "translateY(0px)";
                },700);
                currentIndex = 0;
            }
        }
        setInterval(sliderEffect,sliderInterval);
    </script>

우선 이미지 사진의 높이 값을 슬라이드이펙트4와 똑같이 변수에 저장을 해줍니다.

그후 첫번째 이미지 복사를  변수에 저장하고 난 뒤 sliderInner.appendChild(sliderClone);를 사용하여 이미지사진 마지막에 붙여넣어줍니다.

함수하나를 만들어 실행시켜주고 currenIndex++1 해줍니다. 그후 sliderInner선택자에 style.transition를 주고 움직이는 시간을 정해줍니다.그리고 transform로 움직일 다음카드들의 height값의 위치를 알기위해 translateY에 움직여야할 거리를

(- + sliderHeight * currentIndex +px); 로 해줍니다, 

그후 조건으로 (currentIndex == sliderCount)일때 sliderInner의 transition과transform울 0으로 만들어 주어, 마지막에이미지(1이미지의 복사)로 갔을때, 눈에는 보이지 않게 바로 처음 이미지로 바꿔줍니다. 그렇게 하면 세로로 계속 반복 하는 슬라이드를 볼수 있습니다.

 

 

※GSAP이용하기

    <!-- GSAP -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/gsap.min.js" ></script>
    <script>
        
        //복사한 첫번째 이미지 마지막에 붙여넣기
        sliderInner.appendChild(sliderClone);

        function sliderEffect(){
            currentIndex++;

            // sliderInner.style.transition = "all 0.6s";
            // sliderInner.style.transform = "translateX(-"+ sliderHeight * currentIndex +"px)";
            TweenMax.to(sliderInner, {
                y : -sliderHeight * currentIndex,
                duration : 0.6,
            });
            //마지막 이미지에 위치 했을 떄
            if(currentIndex == sliderCount){
                setTimeout(() => {
                    gsap.to(".slider__inner", {
                        y : "0",
                        duration : 0,
                    });
                },700);
                currentIndex = 0;
            }
        }
        setInterval(sliderEffect,sliderInterval);
    </script>

GSAP의 라이브러리를 가져온후

슬라이드 이펙트4에서 한 것과 똑같이 쓰되 높이의 값을 가져오고 세로로 움직여야 하기 때문에 TweenMax.to()를 써서 y축으로 이미지가 있는 높이의 값만큼 준후 조건문이 성립했을때 빠르게 처음이미지로 바뀌게 해주었습니다.

 

 

※jQuery 아용하기

    <!-- jQuery -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.13.2/jquery-ui.min.js"></script>
    <script>
        sliderInner.appendChild(sliderClone);

        function sliderEffect(){
            currentIndex++;

            $(".slider__inner").css({
                transition: "all 0.6s",
                transform: "translateY(-" + sliderHeight * currentIndex + "px)"
            });

            //마지막 이미지에 위치 했을 떄
            if(currentIndex == sliderCount){
                setTimeout(() => {
                    $(".slider__inner").css({
                        transition: "0s",
                        transform: "translateY(0px)"
                    });
                },700);
                currentIndex = 0;
            }
        }
        setInterval(sliderEffect,sliderInterval);
    </script>

jQuery의 라이브러리를 가져온후

css를 적용하는 slider__inner를 $로 가져온후 .css를 하고 그안에 적용할 transition과  transform의 값을 적어주면 세로로 슬라이드를 연속으로 하는 이미지가 나옵니다.