$(function () {
    $(".main-visual-slide").each(function () {
        var $visualSlide = $(this);
        var $visualSlideItem = $(this).find(".main-visual-item");
        var visualNum = $visualSlideItem.length;
        var $visualControls = $(".main-visual-controls");

        $visualControls.find('.paging-controls .total').text(visualNum);

        $visualSlide.on('init', function (event, slick) {
            $("#mainVisual .main-visual-controls .progress-bar .ing-bar").addClass("active");
        })
        $visualSlide.on('beforeChange', function (event, slick, currentSlide, nextSlide) {
            $("#mainVisual .main-visual-controls .progress-bar .ing-bar").removeClass("active");
            $(this).find(".slick-dots").find("li").eq(nextSlide).addClass("active-item");
            $visualControls.find('.paging-controls .cur').text(nextSlide + 1);
        })
        $visualSlide.on('afterChange', function (event, slick, currentSlide, nextSlide) {
            $("#mainVisual .main-visual-controls .progress-bar .ing-bar").addClass("active");
        })

        $visualSlide.slick({
            slidesToShow: 1,
            autoplay: true,
            infinity: true,
            speed: 1500,
            autoplaySpeed: 3000,
            dots: true,
            arrows: true,
            fade: true,
            responsive: [
                {
                    breakpoint: 1240,
                    settings: {
                        arrows: false,
                    }
                },
            ]
        })
    })




})