$(document).ready(function() {
    var $slick_carousel = $(".visual-con");
    $slick_carousel.on('init', function(event, slick) {
        $(".visual-item").eq(0).addClass("active-item");
    });
    $slick_carousel.on('afterChange', function(event, slick, currentSlide) {
        $(".visual-item").removeClass("active-item");
        $(this).find(".visual-item").eq(currentSlide).addClass("active-item")
    });
    $('.visual-con').slick({
        infinite: true,
        slidesToShow: 1,
        slidesToScroll: 1,
        autoplay: true,
        arrows: true,
        dots: true,
        fade: true,
        prevArrow: '<button class="slide-arrow slick-prev"></button>',
        nextArrow: '<button class="slide-arrow slick-next"></button>',
        autoplaySpeed: 4000,
        speed: 2000,
        easing: 'easeInOutQuint',
        pauseOnHover: false
    });
});