슬라이드, 메뉴 구현하기

$(function(){
    $(".nav > ul > li").mouseover(function(){
        $(".nav > ul > li > ul").stop().fadeIn(300);
    $("#header .contanier").addClass("on");
    });
    $(".nav > ul > li").mouseout(function(){
        $(".nav > ul > li > ul").stop().fadeOut(300);
    $("#header .contanier").removeClass("on");
    });
});
//슬라이드
let currentIndex = 0;
const $sliderWrap = $(".slider__wrap"); //이미지 부모 : 움직이는 영역
const $slider =$(".slider");
const $sliderWidth = $slider.width();
$sliderWrap.append($slider.first().clone(true));
setInterval(function(){
    currentIndex++;
    $sliderWrap.animate({marginLeft: -$sliderWidth * currentIndex},600);
    if(currentIndex === $slider.length){
        setTimeout(function(){
            $sliderWrap.animate({marginLeft:0},0)
            currentIndex = 0;
        },700);
    }
},1000)

 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

메뉴와 슬라이드 구현하기

첫번째론 라이브러리를 가져와줍니다. 전체 메뉴인 (".nav > ul > li")에 마우스 오버했을 경우 서브메뉴인 

(".nav > ul > li > ul")를 나오게 만들어 줄겁니다. fadeIn() 메서드를 사용하여 메뉴를 나타나게 해줍니다. 여러번 작동하기 때문데 stop()도 사용해줍니다. 그 후 액티브 되었을 경우 addClass로 액티르 클래스를 추가해줍니다.

그 후 마우스 아웃을 했을 경우  메뉴가 사라지게  동일한 방법으로 fadeOut를 사용해줍니다.

 

다음은 두번째 슬라이드 구현하기 입니다. currentIndex를 0으로 정의 해줍니다.

그 후 전체 영역인 const $sliderWrap, const $slider , const $sliderWidth 도 정의 해준 뒤 $sliderWrap에 append()

메서드를 사용하여 slider의 첫번째 요소를  clone() 메서드를 사용해 복사해줍니다. 그럼 세개였던 이미지가 4개로 바뀝니다. 그 후  setInterval()를 사용하여 

 

    currentIndex++; 로 현재 이미지 페이지를 증가시키고
    $sliderWrap.animate({marginLeft: -$sliderWidth * currentIndex},600);   $sliderWrap에 animate를 사용하여 마진 레프트 값을 이동시켜줍니다. 그리고 만약 현재 페이지가 이미지 갯수와 일치했을경우 setTimeout을 사용하여 마진 레프트 값을 0으로 돌려 처음 이미지로 돌아간다.
    if(currentIndex === $slider.length){
        setTimeout(function(){
            $sliderWrap.animate({marginLeft:0},0)
            currentIndex = 0;