sliderEffect 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;
    
    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 sliderspeed = 400;

let currentIndex = 0;
let silderCount = slider.length -1;
let sliderHeight = slider.height();

// 한바퀴
// setInterval(function(){
//     currentIndex < silderCount ? 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 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");
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(index){
    let sliderName = $(this).find("img").attr("alt");
    let sliderSrc = $(this).find("img").attr("src");
    dotIndex += ""+sliderName+""
});
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) })