06_콘트롤버튼을 활용한 이미지 슬라이드

• 이미지 350px 사진 4장을 목록태그를 활용해 가로 배치

• 1번 사진 아래쪽에 span 태그를 사용하여 콘트롤 버튼 모양을 구현

• js나 제이쿼리에서 콘트롤 버튼 클릭시 각각 해당 인덱스값을 구하여 변수에 담음

• 콘트롤 버튼 클릭시 나온 연산값 0, -350, -700, -1050을 각각 구하여 ul 태그의 left값에 대입

    $(document).ready(function(){
      // 1. 콘트롤 버튼 클릭시 인덱스값 0,1,2,3 출력하기
      let i;

      const cbtn = $('#product div > .c_btn');

      cbtn.click(function(){
        i = $(this).index();
        console.log(i); //출력 테스트 -> 0,1,2,3
        i = -(i*$('#product ul li').width());
        console.log(i); //출력 테스트
        
        //해당값을 목록에 대입하여 슬라이드가 움직이도록 함
        $('#product ul').animate({'left':i},500);

        //콘트롤버튼 서식제거하고 현재 콘트롤버튼에 서식적용
        $('#product div span').removeClass('act');
        $(this).addClass('act');
      });
    });