jquery - JQueryプラグインSlick、動的に作成されたときに1枚の写真しか表示されない

Question

jQueryダイアログでslickを使用しています。メイン ページには小さな写真のリストがあり、ユーザーが写真の 1 つをクリックすると、このグループ内のすべての写真を含むダイアログが表示されます。

ダイアログのhtml部分は次のとおりです。

<div id="divPhotoDetails">
    <table cellpadding="0" cellspacing="10px" style="font-size: 0.8em">
        <tr>
            <td style="width: 640px;" id="tdPhotos"></td>
            <td class="photo-details">
                <h3><label id="lbCakeTitle" /></h3>
                <p><label id="lbCakeDescription" /></p><br />
                <h4><asp:label ID="lbCakeOccasions" runat="server" meta:resourcekey="lbCakeOccasions" /></h4>    
                <ul id="ulCakeOccasions"></ul>
                <div class="button-order">
                    <asp:Button ID="btnOrder" runat="server" meta:resourcekey = "btnOrder" CssClass="button"/>
                </div>
            </td>
        </tr>
    </table>
</div>

これが私のJavaScriptです：

    $(function () {
        $("#divPhotoDetails").dialog({
           autoOpen: false,
           title: "taart",
           modal: true,
           width: 1100,
           close: ClosePhotoDetails
        });
    });

    function InitPhotoSlicks(photo) {
        $('#tdPhotos').append('<div class="slider-nav" style="float: left; width: 610px;"></div>');

//Init the slider navigator
$('.slider-nav').slick({
    // # of slides to show at a time
    slidesToShow: 5,
    // # of slides to scroll
    slidesToScroll: 1,
    // Enable Next/Prev arrows
    arrows: true,
    // Enables centered view with partial prev/next slides.
    // Use with odd numbered slidesToShow counts.
    centerMode: true,
    // Side padding when in center mode. (px or %)
    centerPadding: '4px',
    focusOnSelect: true,
    //asNavFor: '.slider-show'
});

    for (var i = 0; i < photo.PhotoNames.length; i++) {
        $('.slider-nav').slick('slickAdd', '<div><h1><img src="' +  photo.ThumbnailPhotoPath + photo.PhotoNames[i] + '" alt="" /></h1></div>');
    }
}

    function CloseCakeDetails() {
        $('#tdPhotos').empty();
    }

ここで 2 つの問題が発生しました。

1. ダイアログが開いているときに表示される写真は 1 つだけです。次のボタンをクリックすると、おそらく他の写真が表示されます。
2. ボタン (前、次) は、そのグループに 5 枚以上の写真がある場合にのみ作成され、それ以外の場合は作成されません。

誰かがこれらの問題について私を助けることができますか? どうもありがとう。

私の場合、スライドの削除メソッドも機能していないように見えるため、 jQuery.empty()メソッドを使用してスライダーをクリアしています。

シン