使用光滑滑块作为另一个滑块的导航，该滑块在ajax加载方法调用时打开

Question

我正在使用的滑块是光滑的滑块。 http://kenwheeler.github.io/slick/

我在页面上有一个滑块，当单击一个图像时，打开一个灯箱（通过ajax加载方法），该灯箱包含另一个滑块，其中相同的图像具有相同的顺序，但是更大但没有裁剪，因此观众可以查看完整的大小的图像。

我希望用户能够通过选择导航点，单击图像来导航主页面上的滑块，并在加载后将相同的图像作为灯箱滑块内的活动图像。

Problem

我遇到的问题是因为'.lightbox-slider'尚未加载，'。home-slider'无法告诉它要去哪个幻灯片。

主页滑块的html

<div class="media-slider slider single-item-rtl tall-slider" dir="rtl">
    <div class="article-media select-media slick-active">
       <img src="/images/test/16-example.jpg" />
    </div>
    <div class="article-media select-media">
       <img class="slider-img" src="/images/test/17-example.jpg" />
    </div>
    <div class="article-media select-media">
        <img class="slider-img" src="/images/test/18-example.jpg" />
    </div>
    <div class="article-media select-media">
        <img class="slider-img" src="/images/test/19-example.jpg" />
    </div>
</div>

滑块的HTML显示在灯箱内

<div class="lighbox-slider">
    <div class="article-media select-media slick-active">
       <img src="/images/test/16-example.jpg" />
    </div>
    <div class="article-media select-media">
       <img class="slider-img" src="/images/test/17-example.jpg" />
    </div>
    <div class="article-media select-media">
        <img class="slider-img" src="/images/test/18-example.jpg" />
    </div>
    <div class="article-media select-media">
        <img class="slider-img" src="/images/test/19-example.jpg" />
    </div>
</div>

两个灯箱的JS

var load_slider = function() {
  $('.home-slider').slick({
    rtl: true,
    dots: true, 
    arrows: false, 
    focusOnSelect: true,
    asNavFor: '.lightbox-slider'
  });
}; 

var load_lightbox_slider = function() {
  $('.lightbox-slider').slick({
    dots: false,
    speed: 300,
    fade: false,
    arrows: true, 
    cssEase: 'linear',
    asNavFor: '.home-slider'
 });
};

JS用于打开灯箱并加载灯箱滑块

$(".select-media").click(function() {

    if ($(this).hasClass("article-media")) {

        $(".display_media").load("/images/toggle-media/" + $(this).attr("data-example"));

      $(document).ajaxComplete(function(event, xhr, settings) {
          load_lightbox_slider();
      });
    }
});