$(function(){

    var $status = $('.pagingInfo');
    var $slickElement = $('.main-visual-slide');

    $slickElement.on('init reInit afterChange', function (event, slick, currentSlide, nextSlide) {
        //currentSlide is undefined on init -- set it to 0 in this case (currentSlide is 0 based)
        var i = (currentSlide ? currentSlide : 0) + 1;
        $status.html("<p>" + "0" + i + "</p>" + "<div class='pro_bg'><div class='pro-ani pro-bar '></div></div>" + "<p>" + "0" + slick.slideCount + "</p>");
    });


     //메인슬라이드
    $slickElement.not('.slick-initialized').slick({
        slide: 'div', //슬라이드 되어야 할 태그 ex) div, li 
        //fade: true,
        infinite: true, //무한 반복 옵션  
        slidesToShow: 1, // 한 화면에 보여질 컨텐츠 개수
        slidesToScroll: 1, //스크롤 한번에 움직일 컨텐츠 개수
        speed: 500, // 다음 버튼 누르고 다음 화면 뜨는데까지 걸리는 시간(ms)
        lazyLoad: 'progressive',
        arrows: true, // 옆으로 이동하는 화살표 표시 여부
        autoplay: true, // 자동 스크롤 사용 여부
        autoplaySpeed: 5000, // 자동 스크롤 시 다음으로 넘어가는데 걸리는 시간 (ms)
        vertical: false, // 세로 방향 슬라이드 옵션
        prevArrow: $(".slick-prev"), // 이전 화살표 모양 설정
        nextArrow: $(".slick-next"), // 다음 화살표 모양 설정
        draggable: true, //드래그 가능 여부 
        pauseOnFocus: false,
        pauseOnHover: false,
        prevArrow: '.main-visual-controls .prev-btn',
		nextArrow: '.main-visual-controls .next-btn',
        


    });


    let time = 0;
    let interval;
    let timeSet;
    let duration = 5;
    $(".main-visual-slide").on('afterChange', function () {
        time = 0;
        duration = 5;
        $(".pro-bar").addClass('pro-ani');
        $(".pro-ani").css({
            'animation-duration': '5s',
        })
        timeSet = setInterval(function () {
            duration--;
        }, 1000)
    });
    $(".main-visual-slide").on('beforeChange', function () {
        $(".pro-bar").removeClass('pro-ani');
        clearInterval(timeSet);
    });


    $('.main-product-list').slick({
 
        slidesToShow: 4, // 한 화면에 보여질 컨텐츠 개수
        slidesToScroll: 1, //스크롤 한번에 움직일 컨텐츠 개수
        speed: 1000, // 다음 버튼 누르고 다음 화면 뜨는데까지 걸리는 시간(ms)
        lazyLoad: 'progressive',
        arrows: true, // 옆으로 이동하는 화살표 표시 여부
        autoplay: true, // 자동 스크롤 사용 여부
        autoplaySpeed: 8000, // 자동 스크롤 시 다음으로 넘어가는데 걸리는 시간 (ms)
        vertical: false, // 세로 방향 슬라이드 옵션
        prevArrow: $(".slick-prev"), // 이전 화살표 모양 설정
        nextArrow: $(".slick-next"), // 다음 화살표 모양 설정
        draggable: true, //드래그 가능 여부 
        pauseOnFocus: false,
        pauseOnHover: false,
        prevArrow: '.main-product-controls .prev-btn',
		nextArrow: '.main-product-controls .next-btn',
        responsive: [ // 반응형 웹 구현 옵션
        {  
            breakpoint: 1500, //화면 사이즈 1500px
            settings: {
                //위에 옵션이 디폴트 , 여기에 추가하면 그걸로 변경
                slidesToShow:2
            } 
        },
        { 
            breakpoint: 1023, //화면 사이즈 768px
            settings: {	
                //위에 옵션이 디폴트 , 여기에 추가하면 그걸로 변경
                slidesToShow:1
            } 
        }
    ]


    });


});