슬라이드 효과 주기 - type 1

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

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

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

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

 

 전체 소스는 요기 

body를 볼게요 ! 

<main id="main">
    <div class="slider__wrap">
        <div class="slider__img">
            <div class="slider"><img src="./img/slideEffect01-min.jpg" alt="이미지1"></div>
            <div class="slider"><img src="./img/slideEffect02-min.jpg" alt="이미지2"></div>
            <div class="slider"><img src="./img/slideEffect03-min.jpg" alt="이미지3"></div>
            <div class="slider"><img src="./img/slideEffect04-min.jpg" alt="이미지4"></div>
            <div class="slider"><img src="./img/slideEffect05-min.jpg" alt="이미지5"></div>
        </div>
    </div>
</main>
    
<footer id="footer">
    <a href="mailto:getgrovy@gmail.com">getgrovy@gmail.com</a>
</footer>

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

 

css영역을 볼게요 

.slider__wrap {
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}
.slider__img{
    width: 800px;
    height: 450px;
    position: relative;
    overflow: hidden;
}
.slider {
    position: absolute;
    left: 0;
    top: 0;
    transition: all 0.5s;
}
.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:'이미지1';}
.slider:nth-child(2)::before{content:'이미지2';}
.slider:nth-child(3)::before{content:'이미지3';}
.slider:nth-child(4)::before{content:'이미지4';}
.slider:nth-child(5)::before{content:'이미지5';}
.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;}

딱히 볼부분은 없고 

::before 요소는 각각의 슬라이더 요소 앞에 이미지의 레이블을 설정해요 & content 속성을 줘서 텍스트를 설정했어용

 

z-index 속성으로 이미지의 순서를 정해줬어요  

첫 번째 이미지는 가장 높은 z-index 값을 가지고 마지막 이미지는 가장 낮은 값을 줘서 

위에서 부터 순서대로 사라지게 하여 슬라이드효과를 줬어요  

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

    //선택자 
    const sliderWrap =document.querySelector(".slider__wrap");
    const sliderImg =sliderWrap.querySelector(".slider__img");
    const slider =sliderWrap.querySelectorAll(".slider");

    let currentIndex = 0 ; //현재 보이는 이미지
    let sliderCount = slider.length; //전체 이미지 갯수
    let sliderInterval = 3000;      //이미지 변경 간격 시간
    let secondCount =0;

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

opacity 속성을 이용해서 작업할거에요

opacity : 0  = 완전투명 

opacity : 1 =  완전불투명

 

javascript 방식

<script>
    setInterval(()=>{
        //style.display = none 은 애니매이션효과 못처리함

        // slider[0].style.opacity="0";
        // slider[1].style.opacity="1";
        // secondCount++;

        // 0 1 2 3 4 0 1 2 3 4 0 
        // 1 2 3 4 0 1 2 3 4 0 1 이런식으루 작업을 해줄거에요 보이기 안보이기
        let nextIndex = (currentIndex +1)%sliderCount;
        slider[(currentIndex)].style.opacity="0";
        slider[(nextIndex)].style.opacity="1";
        currentIndex = nextIndex;

    },sliderInterval);
</script>

gsap 방식

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/gsap.min.js"></script>
<script>
 setInterval(()=>{
    let nextIndex = (currentIndex +1)%sliderCount;

    gsap.to(slider[currentIndex], {
        opacity : 0,
        duration : 2.5,
        ease : "elastic.out(1, 0.3)"
     });
     //opacity 초기화 해주기기
     gsap.to(slider[nextIndex], {
        opacity : 1,
        duration : 2.5,
        ease : "elastic.out(1, 0.3)"
     })
    currentIndex = nextIndex;

 },sliderInterval);
</script>

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(()=>{
    let nextIndex = (currentIndex +1)%sliderCount;

    $(slider[(currentIndex)]).animate({opacity:"0"}, 1000);
    $(slider[(nextIndex)]).animate({opacity:"1"}, 1000);

    currentIndex = nextIndex;
 },sliderInterval);


</script>