슬라이드 효과 주기 - type 4 무한스크롤-가로

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

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

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

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

 

 전체 소스는 요기 

body를 볼게요 ! 

<header id="header">
    <h1>Javascript slider Effect04</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/slideEffect02-min.jpg" alt="이미지6"></div>
                <div class="slider s2"><img src="./img/slideEffect04-min.jpg" alt="이미지7"></div>
                <div class="slider s3"><img src="./img/slideEffect06-min.jpg" alt="이미지8"></div>
                <div class="slider s4"><img src="./img/slideEffect08-min.jpg" alt="이미지9"></div>
                <div class="slider s5"><img src="./img/slideEffect09-min.jpg" alt="이미지10"></div>
            </div>
        </div>
    </div>
</main>

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

 

css영역을 볼게요 

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

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

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

 

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

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

.slider__img에 orverflow : 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 = 2000;                          //이미지 변경 간격 시간
let sliderWidth= slider[0].offsetWidth;             //가로값 가져오기

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

먼저 선택자 & 변수를 세팅한뒤

무한스크롤을위해  첫번째 이미지를 복사해서

let sliderClone = sliderInner.firstElementChild.cloneNode(true);

복사한 첫번째이미지 마지막에 붙였어요 
sliderInner.appendChild(sliderClone);

 

마지막이미지에 도착하는순간 눈이 반응못하는 속도로 첫화면으로 이동시킵니다. 

javascript 방식

function sliderEffect(){
    currentIndex++;
    sliderInner.style.transition = "all 0.6s";
    sliderInner.style.transform = "translateX(-"+sliderWidth*currentIndex +"px)";

    //마지막 이미지에 위치 했을 때 
    // console.log(slider);
    if(currentIndex ==sliderCount){
        // alert("last ");
        setTimeout(()=>{
            sliderInner.style.transition = "0.0s";
            sliderInner.style.transform = "translateX(0px)";
        }, 700);
        currentIndex=0;
    }
}

반복된갯수 == 이미지 총갯수 일때

setTimeout()을 이용하여 1번만 효과를 줍니다. 

 

sliderInner.style.transition = "0.0s";
sliderInner.style.transform = "translateX(0px)";

0초만에 0번 자리로 이동시켜 사람눈에는 보이지 않게 화면만 이동시켜서 1번자리로 이동시킵니다.

gsap 방식

function sliderEffect2(){
    currentIndex++;
    gsap.to(sliderInner, {
                duration: 0.6,
                x: -sliderWidth * currentIndex,
                // ease: "power2.inOut"
            });
    if(currentIndex == sliderCount){
        setTimeout(()=>{
            gsap.to(".slider__inner", {
                    duration : 0,
                    x :0,
                    ease : "none"
                });
        },700);
        currentIndex = 0;
    }
}

gsap를 써서 반복된갯수 == 이미지 총갯수 일때

duration : 0 을 줘서 눈에 보이지 않게 바꿔줬어요 

jquery 방식

function sliderEffect3(){
    currentIndex++;
    console.log(currentIndex);
    $(".slider__inner").css("position","relative");
    $(sliderInner).animate(
        {left :-sliderWidth * currentIndex },
        2000,
        "easeOutElastic"
    );

    if(currentIndex==sliderCount){
        console.log("first")
        $(sliderInner).animate(
            {left :0},
            0,
            "none"
        );
        currentIndex=0;
    }
}

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

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

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

gsap를 써서 반복된갯수 == 이미지 총갯수 일때

left: 0 , 0 , none 을 줘서

맨 왼쪽으로 이동 , 0초만에 , 효과없이 이동시켰어요