11_제이쿼리로 가로 슬라이드 구현하기

    $(document).ready(function(){
      // 좌/우 버튼 변수 선언
      const slbtn = $('.v_slide i.fa-angle-left');
      const srbtn = $('.v_slide i.fa-angle-right');

      //1. 첫번째 슬라이드 앞에 마지막 슬라이드를 배치한다.
      $('.slide_wrap div:last-child').insertBefore('.slide_wrap div:first-child');
      //B.insertBefore(A) : A의 앞쪽에 B를 배치한다.

      //2. 첫번째 슬라이드가 가운데 보이도록 왼쪽으로 -1600px 이동해줌
      $('.slide_wrap').css('margin-left','-100%');
    

      //3. 왼쪽으로 이동하기 위한 함수
      function moveLeft(){
        //왼쪽으로 1칸 이동
        $('.slide_wrap').animate({'margin-left':'-200%'},500,function(){
          //이동한 후 맨 앞 슬라이드를 맨 뒤로 이동시킴
          $('.slide_wrap div:first-child').insertAfter('.slide_wrap div:last-child');
          $('.slide_wrap').css('margin-left','-100%');
        });
      }

      //4. 오른쪽으로 이동하기 위한 함수
      function moveRight(){
        //오른쪽으로 1칸 이동
        $('.slide_wrap').animate({'margin-left':'0px'},800,function(){
          //오른쪽 마지막 슬라이드를 왼쪽 첫번째 슬라이드 앞으로 배치
          $('.slide_wrap div:last-child').insertBefore('.slide_wrap div:first-child');
          $('.slide_wrap').css('margin-left','-100%');
        });
      }

      //함수 5초마다 호출
      let Timer = setInterval(moveLeft, 3500);

      //좌/우 버튼 클릭시 해당 함수 호출하여 슬라이드 움직이게 하기
      slbtn.click(function(){
        clearInterval(Timer);
        moveLeft();
      });

      srbtn.click(function(){
        clearInterval(Timer);
        moveRight();
      });

      //버그찾기 - 시간객체와 클릭시 함수동작이 겹쳐서 두 번 이동하는 버그가 생김
      //해결방법 - 좌, 우 버튼 마우스 오버시 시간제거, 마우스 아웃시 다시 시간 생성

      $('.v_slide i.fas').mouseenter(function(){
        clearInterval(Timer);
      });

      $('.v_slide i.fas').mouseleave(function(){
        clearInterval(Timer);
        Timer = setInterval(moveLeft,3000);
      });

    });