슬라이드 효과 주기 - type 3 세로방향

슬라이드 효과를 자동으로 나타내기 

슬라이드 효과 주기 - type 1 나타내기

슬라이드 효과 주기 - type 2 가로

슬라이드 효과 주기 - type 3 세로

 전체 소스는 요기 

body를 볼게요 ! 

<header id="header">
    <h1>Javascript slider Effect02</h1>
    <p>슬라이드 이펙트 : 상하로 움직이기</p>
    <ul>
        <li><a href="sliderEffect01.html">1</a></li>
        <li><a href="sliderEffect02.html">2</a></li>
        <li class="active"><a href="sliderEffect03.html">3</a></li>
        <li><a href="sliderEffect04.html">4</a></li>
        <li><a href="sliderEffect05.html">5</a></li>
    </ul>
</header>
<!-- //header-->
<main id="main">
    <div class="slider__wrap">
        <div class="slider__img">
            <div class="slider__inner">
                <div class="slider"><img src="./img/slideEffect06-min.jpg" alt="이미지6"></div>
                <div class="slider"><img src="./img/slideEffect07-min.jpg" alt="이미지7"></div>
                <div class="slider"><img src="./img/slideEffect08-min.jpg" alt="이미지8"></div>
                <div class="slider"><img src="./img/slideEffect09-min.jpg" alt="이미지9"></div>
                <div class="slider"><img src="./img/slideEffect10-min.jpg" alt="이미지10"></div>
            </div>
        </div>
    </div>
</main>
<!-- //main-->
<footer id="footer">
    <a href="mailto:getgrovy@gmail.com">getgrovy@gmail.com</a>
</footer>
<!-- //footer-->

위처럼 body영역엔 이미지만 넣어줬어요 ! 

 

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__inner {
        display: flex;
        flex-wrap: wrap;
        width: 800px;
        height: 2250px;
    }
    /* 개별적인 이미지  */
    .slider {
        /* position: relative; */
        width: 800px;
        height: 450px;
    }
</style>

    .slider__inner 는 전체 이미지를 감싸고 있는 부모박스 : 이미지가 움직이는 영역이에용

그리고이미지를 .slider__inner로 묶어주면서

display에 flex 설정해줘서 이미지를 옆으로 쭉 보이게 했어요  아래처럼용

 

이미지가 보이는 영역 을 설정해줬어요 width와 height를 설정하고 

orverflow : hidden 을 줘서 보이는 이미지만 보이도록 했습니다. 
    .slider__img {
        position: relative;
        width: 800px;
        height: 450px;
        overflow: hidden;
    }

script 부분을 볼게용 3가지 방법으로 작업했어요 ! 

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;      //이미지 변경 간격 시간

먼저 공통적인 부분을 세팅하구 

javascript 방식

sliderInner.style.transition = "all 0.6s";
setInterval(() => {
        currentIndex = (currentIndex+1) % sliderCount ; 
        sliderInner.style.transform ="translateY("+ -450*currentIndex+"px)";

}, sliderInterval);

style.transform = translate를 써서 y축으로  -450가도록 했어요  

gsap 방식

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/gsap.min.js"></script>
<script>
setInterval(()=>{
    currentIndex = (currentIndex +1)% sliderCount;
    gsap.to(".slider__inner", {
        x :-800 * currentIndex,
        duration : 1,
        ease : "elastic.out(1, 0.3)"
    })
},sliderInterval);
</script>

gsap를 써서 y축으로  -450가도록 했어요  

jquery 방식

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.13.2/jquery-ui.min.js"></script>
<script>
setInterval(()=>{
                currentIndex =(currentIndex+1) % $(".slider").length;
                $(".slider__inner").css("position","relative");
                $(".slider__inner").animate({top: -450*currentIndex },2000,"easeOutElastic");
            },sliderInterval);
</script>

jquery를 이용하여 animate효과를 줬어요 

$(".slider__inner").css("position","relative");을 줘서 

화면을 고정시켜야 해요 jquery는 gsap처럼 animate를 줄수가 없어 포지션을 줘야해요 

jquery에선 top으로 -450이동시켰어요