使用光滑滑块作为另一个滑块的导航，该滑块在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();
      });
    }
});

Answer 1

我想留下这个评论，但是Stack Overflow规则的bc，我必须做这个作为回应。

首先，我建议使用.on而不是.click，因为您实际上可以在事件处理程序中指定if语句：

$(".select-media").on('click', '.display_media', function(event, xhr, settings) {
  // …
})

现在，至于事件本身，我不完全确定提供的代码，但似乎文档尚未加载。据我所知，这里有一些可能的选择：

A）您是否尝试将其包装在document.ready函数中？它可能还没有加载所有东西？

B）尝试从头开始调用load_lightbox_slider，但在.lightbox-slider类上添加display none或opacity：0，并在点击时将其更改为任何显示类型/不透明度100％。

C）使用promises进行AJAX调用，并在知道自己拥有数据后才安装滑块。

希望这可以帮助！