Slider Effect Reference v1.0 </doc>

const sliderWrap = $(".slider-wrap");
const sliderImg = $(".slider-img");
const slider = $(".slider");

let currentIndex = 0; //현재 첫 번째 보이는 이미지
let sliderCount = slider.length; //이미지 갯수

// 3초에 한번씩 함수를 실행
setInterval(function(){
    let nextIndex = (currentIndex + 1) % sliderCount;

    // (0 + 1) % 5 = 1
    // (1 + 1) % 5 = 2
    // (2 + 1) % 5 = 3
    // (3 + 1) % 5 = 4
    // (4 + 1) % 5 = 0



    slider.eq(currentIndex).fadeOut(); //첫번째 이미지를 사라지게
    slider.eq(nextIndex).fadeIn();


    console.log("currentIndex : " + currentIndex);
    console.log("nextIndex : " + nextIndex);

    currentIndex = nextIndex;
},3000);

const sliderWrap = $(".slider-wrap");
const sliderImg = $(".slider-img");
const slider = $(".slider");

let currentIndex = 0;
let sliderCount = slider.length; // 이미지 갯수

setInterval(function(){
    // if(currentIndex < sliderCount - 1){
    //     currentIndex++;
    // } else {
    //     currentIndex = 0;
    // }

    // 삼항연산자
    currentIndex < sliderCount - 1 ? currentIndex++ : currentIndex = 0;

    let sliderPosition = currentIndex * (-800) + "px";
    sliderImg.animate({left: sliderPosition}, 400);
}, 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(){
//     currentIndex < sliderCount ? currentIndex++ : currentIndex = 0;

//     let sliderPosition = currentIndex * -sliderHeight;

//     sliderImg.animate({top: sliderPosition},sliderSpeed);
// }, 3000);

// 연속적으로
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);
console.log(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", currentIndex);
    }
    currentIndex++;
    sliderImg.stop().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 sliderHeight = slider.outerHeight();
let sliderTotalWidth = sliderWidth * sliderCount;
let currentIndex = 0;
let dotIndex = "";

sliderImg.css({width: sliderTotalWidth, height: sliderHeight});

// 이미지 움직이기
function gotoSlider (index){
    sliderImg.animate({left: -sliderWidth * index}, 400);
    currentIndex = index;
    sliderDot.find("a").removeClass("active").eq(currentIndex).addClass("active");
}

// 이미지 갯수만큼 닷 버튼 만들기
slider.each(function(){
    // dotIndex += "<a href='#'></a>";
    let sliderName = $(this).find("img").attr("alt");
    let sliderSrc = $(this).find("img").attr("src");
    dotIndex += "<a href='#' style='background-image:url("+sliderSrc+")'>"+sliderName+"</a>";
});
sliderDot.html(dotIndex);
sliderDot.find("a").eq(0).addClass("active");

// 닷 버튼 클릭하기
sliderDot.on("click","a", function(e){
    e.preventDefault();
    gotoSlider($(this).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<n; i++){
    let b = document.createElement('div');
    b.classList.add("box");
    document.getElementById("container").appendChild(b);

    gsap.set(b,{
        left: '50%',
        top: '50%',
        x: '-50%',
        y: '-50%',
        z: 600,
        width: 300,
        height: 600,
        borderRadius: 20,
        background: () => 'hsl('+(i/n*360) +', 100%, 50%)'
    });
    
    gsap.fromTo(b,{
        scaleY:0,
        zIndex:()=>(i<n/2)?-i:i,
        rotationY:90+i/n*206.5,
        transformOrigin: String("50% 50% -1060%")
    },{
        scaleY:1,
        duration:1,
        delay:1,
        ease: 'elastic'
    })

    b.onmouseenter = (e) => {
        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) })
}