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

Question

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

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

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

问题

我遇到的问题是因为“.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 规则，我必须这样做作为回应。

首先，我建议使用.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) 为您的 AJAX 调用使用 Promise，并仅在您知道您拥有数据后才安装滑块。

希望这会有所帮助！

Answer 2

为什么不将滑块加载到灯箱后直接移动到当前位置？

首先从小滑块中获取当前幻灯片，将其传递给新滑块的初始化并跳转到同一张幻灯片：

    function load_lightbox_slider(currentslide){
 
         $('.lightbox-slider').slick({
            dots: false,
            speed: 300,
            fade: false,
            arrows: true, 
            cssEase: 'linear',
            asNavFor: '.home-slider'
        });
        // Move the new slider to the new position
        $('.lightbox-slider').slick('slickGoTo', currentslide);
    
    }
    
    
$(".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) {
         // Get the current slide
          var currentSlide = $('.home-slider').slick('slickCurrentSlide');
          // create new slider instance
          load_lightbox_slider(currentSlide);
      });
    }
});