제이쿼리 질문입니다ㅠㅠ(슬릭슬라이더)

<div class="main_slide_wrap">
    <div class="main_slide pc_on">
        <div><img src="<?php echo G5_THEME_IMG_URL ?>/main_slide1.jpg" alt=""></div>
        <div><img src="<?php echo G5_THEME_IMG_URL ?>/main_slide2.jpg" alt=""></div>
        <div><img src="<?php echo G5_THEME_IMG_URL ?>/main_slide3.jpg" alt=""></div>
        <div><img src="<?php echo G5_THEME_IMG_URL ?>/main_slide4.jpg" alt=""></div>
    </div>
    <div class="main_slide mo_on">
        <div><img src="<?php echo G5_THEME_IMG_URL ?>/mobile/main_slide1.jpg" alt=""></div>
        <div><img src="<?php echo G5_THEME_IMG_URL ?>/mobile/main_slide2.jpg" alt=""></div>
        <div><img src="<?php echo G5_THEME_IMG_URL ?>/mobile/main_slide3.jpg" alt=""></div>
        <div><img src="<?php echo G5_THEME_IMG_URL ?>/mobile/main_slide4.jpg" alt=""></div>
    </div>
    <div class="main_slide_btn mon">
        <a href="#none" data-slide="1" class="active">
            <span class="slide_circle"></span><span>01</span>
        </a>
        <a href="#none" data-slide="2">
            <span class="slide_circle"></span><span>02</span>
        </a>
        <a href="#none" data-slide="3">
            <span class="slide_circle"></span><span>03</span>
        </a>
        <a href="#none" data-slide="4">
            <span class="slide_circle"></span><span>04</span>
        </a>
    </div>
</div>

$('.main_slide').on('afterChange', function(event, slick, currentSlide, nextSlide){ //슬라이드가 바뀔때
        var slide_no_pc =  $('.pc_on .slick-active').data('slick-index')+1; // 활성화 된 슬라이드의 data + 1
        var slide_no_mo = $('.mo_on .slick-active').data('slick-index')+1; // 활성화 된 슬라이드의 data + 1
        $('[data-slide]').removeClass('active'); //data-slide(탭)를 갖고있는 active를 다 지워라
        $('[data-slide='+slide_no_pc+']').addClass('active'); // data-slide와 data-slick-index를 비교하여 동일하다면 addClass
        $('[data-slide='+slide_no_mo+']').addClass('active'); // data-slide와 data-slick-index를 비교하여 동일하다면 addClass
    });