$(function () {


     //메인슬라이드
     $('#main-slider').slick({
         slide: 'div', //슬라이드 되어야 할 태그 ex) div, li 
         fade: true,
         infinite: true, //무한 반복 옵션  
         speed: 500, // 다음 버튼 누르고 다음 화면 뜨는데까지 걸리는 시간(ms)
         lazyLoad: 'progressive',
         arrows: true, // 옆으로 이동하는 화살표 표시 여부
         autoplay: true, // 자동 스크롤 사용 여부
         autoplaySpeed: 4000, // 자동 스크롤 시 다음으로 넘어가는데 걸리는 시간 (ms)
         prevArrow: $(".prev-arrow"), // 이전 화살표 모양 설정
         nextArrow: $(".next-arrow"), // 다음 화살표 모양 설정
         draggable: true, //드래그 가능 여부
         dots: true,

     });

     var percent; //진행률
     var tick; //진행률 반복 실행
     var time = 4; //진행 표시줄 지속 시간 (slick autoplaySpeed와 동일하게 설정)
     var barIndex = 0; //진행 표시줄 순서

     //진행 표시줄 개별 클래스 부여
     $('.cprogress .progressBar').each(function (index) {
         var progress = "<span class='inProgress inProgress" + index + "'></span>";
         $(this).html(progress);
     });


     //진행 표시줄 실행 (1s에 걸쳐 100%를 만들기 위해 10ms마다 반복한다.)
     function start() {
         reset();
         percent = 0;
         tick = setInterval(interval, 10);
     }

     function interval() {
         //현재 진행 표시줄 순서 찾기
         if (($('#main-slider .slick-track div[data-slick-index="' + barIndex + '"]').attr("aria-hidden")) === "true") {
             barIndex = $('#main-slider .slick-track div[aria-hidden="false"]').data("slickIndex");
             start();
         } else {
             //지정한 시간만큼 나누어 퍼센트가 오른다.
             percent += 1 / time
             $('.inProgress' + barIndex).css({
                 width: percent + "%"
             });

             //100%가 넘으면 다음 슬라이드로 넘어간다.
             if (percent >= 100) {
                 $('#main-slider').slick('slickNext');
                 barIndex++;
                 if (barIndex > 2) {
                     barIndex = 0;
                 }
                 start();
             }
         }
     }

     //진행 표시줄 초기화
     function reset() {
         $('.inProgress').css({
             width: 0 + '%'
         });
         clearInterval(tick);
     }
     start();

     //진행 표시줄을 클릭했을 때, 현재 진행중인 줄이 아니면 해당 순서로 초기화한다.
     $('.cprogress div').click(function () {
         var nowIndex = $(this).find('.progressBar').data("slick-index")
         if (nowIndex != barIndex) {
             $('.slider').slick('slickGoTo', nowIndex, false);
         }
     });


     $(".product_slide").slick({
        slide: 'div', //슬라이드 되어야 할 태그 ex) div, li 
        infinite: true, //무한 반복 옵션  
        lazyLoad: 'progressive',
        arrows: true, // 옆으로 이동하는 화살표 표시 여부
        autoplay: true, // 자동 스크롤 사용 여부
        autoplaySpeed: 4000, // 자동 스크롤 시 다음으로 넘어가는데 걸리는 시간 (ms)
        draggable: true, //드래그 가능 여부
        prevArrow: $(".product-prev"), // 이전 화살표 모양 설정
        nextArrow: $(".product-next"), // 다음 화살표 모양 설정
     });

 })