使用光滑滑块作为另一个滑块的导航，该滑块在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规则的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调用，并在知道自己拥有数据后才安装滑块。

希望这有帮助！

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);
      });
    }
});