現在表示されているスライド(slick)のidを取得したい

Question

現在表示されているスライドのidを取得したいです。
スライドの実装はslickを使用しています。

ブラウザレンダリング後にslickで用意されているクラスが付与されます。
現在表示されてるスライドに、slick-currentのクラスが付与されるので、
それを用いて現在表示されているスライド要素（li要素）が持つid（例：id="first"等）を取得したいのですが、undefinedとなってしまいます。

しばらく試してみたのですが、解決の糸口が見つけられなかったため投稿させていただきました。orz

下記にコードを記載いたします。

※src、pathなどに格納される任意の値は{src}、{path}と記載しています。

<-- ソース -->
    <div id="slide_area" class="slide_area">
        <ul class="slider">
            <li id="first"><img src="{path}" alt="{hoge}"></li>
            <li id="second"><img src="{path}" alt="{hoge}"></li>
            <li id="third"><img src="{path}" alt="{hoge}"></li>
        </ul>
    </div>

<-- ブラウザレンダリング後 -->
http://dogsearch.jp/img/inu-sam.jpg


<div id="slide_area" class="slide_area">
    <ul class="slider slick-initialized slick-slider">
        <!-- prev arrow -->
        <a class="slick-prev slick-arrow" href="#"><img src="https://cdn.icon-icons.com/icons2/685/PNG/512/left_icon-icons.com_61213.png" alt="左矢印SVG画像"></a>

        <!-- slide -->
        <div class="slick-list draggable">
            <div class="slick-track">
                <!-- ↓slide-currentがある箇所↓ -->
                <li id="first" class="slick-slide slick-current slick-active" data-slick-index="-1" aria-hidden="false" tabindex="-1">
                    <img src="http://dogsearch.jp/img/inu-sam.jpg" alt="可愛い犬の写真">
                </li>
                <li id="second" class="slick-slide slick-cloned" data-slick-index="-1" aria-hidden="true" tabindex="-1">
                    <img src="http://dogsearch.jp/img/inu-sam.jpg" alt="可愛い犬の写真">
                </li>
                <li id="third" class="slick-slide slick-cloned" data-slick-index="-1" aria-hidden="true" tabindex="-1">
                    <img src="http://dogsearch.jp/img/inu-sam.jpg" alt="可愛い犬の写真">
                </li>
            </div>
        </div>

        <!-- next arrow  -->
        <a class="slick-next slick-arrow" href="#"><img src="https://cdn.icon-icons.com/icons2/685/PNG/512/right_icon-icons.com_61212.png" alt="右矢印SVG画像"></a>
    </ul>
</div>

$('#slide_area').on('click', function () {
    console.log('クリックされました！');
    //戻り値：クリックされました！
    console.log($('.slick_current')); 
    //戻り値：jQuery.fn.init [prevObject: jQuery.fn.init(1), context: document, selector: ".slick_current"]が返る。
　　 //（要素が取得できているはず。。）
    console.log($('.slick_current').attr('id')); //戻り値：undefinedが返る
    console.log($('.slick_current').prop('id')); //戻り値：undefinedが返る
})

Answer 1

https://tr.you84815.space/slick/methods/slickCurrentSlide.html

    console.log($('.slider').slick('slickCurrentSlide'));

一旦こちらのslick内のメソッドで対処しました。

※何故js,jQueryで取得できなかったのかきちんと理解しておきたい。
（わかったら追記します。）
e.g. 「レンダリングの順番？」