Slider Effect Reference v1.0 </doc>

const sliderWrap = document.querySelector(".slider-wrap");
    const sliderImg = document.querySelector(".slider-img");
    const slider = document.querySelectorAll(".slider");
    
    let currentIndex = 0;               //현재 보이는 첫 이미지
    let sliderCount = slider.length;    //이미지 갯수
    
    setInterval(() => {
        let nextIndex = (currentIndex + 1) % sliderCount;
    
        slider[currentIndex].style.opacity = "0";
        slider[nextIndex].style.opacity = "1";
    
        currentIndex = nextIndex;
    }, 3000);

const sliderWrap = $(".slider-wrap");
    const sliderImg = $(".slider-img");
    const slider = $(".slider");
    
    let currentIndex = 0;
    let sliderCount = slider.length;
    
    setInterval(function(){
        ( currentIndex < sliderCount -1 ) ? currentIndex++ : currentIndex = 0;
        
        let sliderPosition = currentIndex * (-800) + "px";
                                            // 0 * -800px -> 0
                                            // 1 * -800px -> -800px
                                            // 2 * -800px -> -1600px
                                            // 3 * -800px -> -2400px
        sliderImg.animate({left: sliderPosition}, 400);
    
        console.log("currentIndex :" + currentIndex);
        console.log("sliderPosition :" + sliderPosition);
    }, 3000);

const sliderWrap = $(".slider-wrap");
    const sliderImg = $(".slider-img");
    const slider = $(".slider");
    
    setInterval(function(){
        sliderImg.animate({ left: "-800px" }, 400, function(){
            $(".slider:first-child").appendTo(sliderImg);
            sliderImg.css("left", "");
        });
    },3000);

const sliderWrap = $(".slider-wrap");
    const sliderImg = $(".slider-img");
    const slider = $(".slider");
    
    let currentIndex = 0;
    let sliderCount = slider.length -1;
    let sliderHeight = slider.height();
    let sliderSpeed = 400;
    
    
    // 연속적으로
    setInterval(function(){
        sliderImg.animate({ top: -sliderHeight }, sliderSpeed, function(){
            $(".slider:eq(0)").appendTo(sliderImg);
            sliderImg.css("top", "");
        });
    }, 3000);

const sliderWrap = $(".slider-wrap");
    const sliderImg = $(".slider-img");
    const slider = $(".slider");
    const sliderBtn = $(".slider-btn");
    
    let currentIndex = 0;
    let sliderCount = slider.length;
    let sliderWidth = slider.width();
    let sliderHeight = slider.height();
    let sliderTotalWidth = sliderWidth * sliderCount;
    
    sliderImg.css({ width: sliderTotalWidth, height: sliderHeight, marginLeft: -sliderWidth});
    $(".slider:last-child").prependTo(sliderImg);
    
    function moveLeft(){
        sliderImg.animate({ left: + sliderWidth }, 400, function(){
            $(".slider:last-child").prependTo(sliderImg);
            sliderImg.css("left", "");
        });
    };
    
    function moveRight(){
        sliderImg.animate({ left: - sliderWidth }, 400, function(){
            $(".slider:first-child").appendTo(sliderImg);
            sliderImg.css("left", "");
        });
    };
    
    sliderBtn.find(".prev").click(function(){
        moveLeft();
    });
    sliderBtn.find(".next").click(function(){
        moveRight();

const sliderWrap = $(".slider-wrap");
    const sliderImg = $(".slider-img");
    const slider = $(".slider");
    const sliderBtn = $(".slider-btn");
    
    let sliderCount = slider.length;
    let sliderWidth = slider.outerWidth();
    let sliderShowNumber = 3;
    let currentIndex = 0;
    
    let sliderCopy = $(".slider:lt("+sliderShowNumber+")").clone();
    sliderImg.append(sliderCopy);
    
    function moveLeft(){ //처음 이미지
        if(currentIndex == 0){
            currentIndex = sliderCount;
            sliderImg.css("margin-left", -sliderWidth * currentIndex);
        }
        currentIndex--;
        sliderImg.stop().animate({ "margin-left": -sliderWidth * currentIndex }, 400);
    };
    
    function moveRight(){
        if(currentIndex == sliderCount){ //마지막 이미지
            currentIndex = 0;
            sliderImg.css("margin-left", sliderWidth * currentIndex);
        }
        currentIndex++;
        sliderImg.animate({ "margin-left": -sliderWidth * currentIndex }, 400);
    };
    
    //버튼을 클릭하기
    sliderBtn.on("click","a", function(){
        if( $(this).hasClass("prev") ){
            moveLeft();
        } else {
            moveRight();
        }
    });

const sliderWrap = $(".slider-wrap");
    const sliderImg = $(".slider-img");
    const slider = $(".slider");
    const sliderBtn = $(".slider-btn");
    const sliderDot = $(".slider-dot");
    
    let sliderCount = slider.length;
    let sliderWidth = slider.outerWidth();
    let sliderTotalWidth = sliderWidth * sliderCount;
    let sliderHeight = slider.outerHeight();
    let sliderShowNumber = 1;
    let currentIndex = 0;
    let dotIndex = "";
    
    sliderImg.css({ width: sliderTotalWidth, height: sliderHeight });
    
    function gotoSlider(index){
        sliderImg.animate({ left: -sliderWidth * index }, 400);
        currentIndex = index;
    }
    
    // 버튼 클릭하기
    sliderBtn.on("click","a", function(e){
        e.preventDefault();
        let nextIndex = (currentIndex + 1) % sliderCount;
        let prevIndex = (currentIndex - 1) % sliderCount;
        if(currentIndex == 0) prevIndex = sliderCount - 1;
    
        if( $(this).hasClass("prev") ){
            gotoSlider(prevIndex);
        } else {
            gotoSlider(nextIndex);
        }
    });

const n = 12;
    gsap.timeline()
        .set("#container", {perspective: 800})

    for(let i=0; i 'hsl('+ (i/n*360) +', 100%, 50%)'
        });

        gsap.fromTo(b,{
            scaleY:0,
            zIndex:() => (i {
            gsap.to(b, {duration:0.3, rotationX: -14, y: '-130%', ease: 'back.out(6)'})
        }

        b.onmouseleave = (e) => {
            gsap.to(b, {duration:0.4, rotationX: 0, y: '-50%'})
        }
    }

    window.onmousemove= (e) => {
        gsap.to('.box', {duration: 0.6, rotationY: (i)=>45+i/n*206.5+90*(e.clientX/window.innerWidth)})
    }