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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了使用光滑滑块作为另一个滑块的导航,该滑块在ajax加载方法调用时打开相关的知识,希望对你有一定的参考价值。

我正在使用的滑块是光滑的滑块。 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();
      });
    }
});
答案

我想留下这个评论,但是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调用,并在知道自己拥有数据后才安装滑块。

希望这可以帮助!

以上是关于使用光滑滑块作为另一个滑块的导航,该滑块在ajax加载方法调用时打开的主要内容,如果未能解决你的问题,请参考以下文章

如何使用带有缩略图滑块的光滑滑块创建自定义滑块?

滑动滑块的自定义上一个和下一个按钮

如何在kivy python中使用滑块作为进度条并控制音频?

如何使用步进滑块在滑块拇指上添加 UILabel?

光滑的滑块拇指没有显示

光滑的滑块导航在某个断点处显示的项目少于预期的项目