Lightslider刷新和销毁不起作用

时间:2020-07-08 12:25:57

标签: jquery slider

我在巫婆显示的属性图像滑块中针对网格视图中的所有属性详细信息创建了ajax响应后调用lighslider的函数。

    
  if(typeof propertySliderCustom != 'function') { 
    function propertySliderCustom(){
        var slider = jQuery(".property_pagecustom_gallery_Slider").lightSlider();
        slider.destroy();
        
        jQuery(".property_pagecustom_gallery_Slider").lightSlider({
                item: 1,
                slideMargin: 0,
                slideMove:1,
                autoWidth:false,
                mode: 'slide',
                pager: false,
                loop:true,
                adaptiveHeight: false
            });
      
    }
}
 
    jQuery(window).on('load resize ready', function() {
      propertySliderCustom();
    });

但是销毁和刷新无效。给出“破坏不是功能”或“刷新不是功能”之类的错误。

下面是Ajax调用:

jQuery.ajax({
                        async: true,
                        type: "POST",
                        url: "<?php echo admin_url('admin-ajax.php'); ?>",
                        data:params,
                        success: function(msg){
                            eval(msg);
                            bottomOffset = 1;
                            getEqualHeightGrid();
                            propertySliderCustom();
                        }
                    });

1 个答案:

答案 0 :(得分:0)

答案很简单。将Lightslider附加到非id选择器时,它会出现一些错误,例如:

var slider = jQuery(".property_pagecustom_gallery_Slider").lightSlider();

它将初始化,但是之后的方法将不起作用。 不必使用类,而必须通过将其附加到ID为选择器的选择器进行初始化:

var slider = jQuery("#property_pagecustom_gallery_Slider_1").lightSlider();

然后销毁,刷新和其他方法将起作用。

对于同一页面上的多个滑块,应为每个滑块分配一个唯一的ID,并使用该类遍历元素(以获取ID),如下所示:

jQuery(".clients-slider").each(function() {
     var el = '#'+jQuery(this).attr('id');
});

拥有这些ID时,可以将其用作选择器,并在其上附加光标尺。为了以后使用,您可以将以下lightslider实例存储在全局变量中:

var $i = 0, $sliders = {};
jQuery(".clients-slider").each(function() {
     var el = '#'+jQuery(this).attr('id');
     $sliders[$i] = jQuery(el).lightslider();
     $i++;
});

拥有了所有这些之后,您就可以使用代码销毁(或做任何事情)它们:

    for($r=0;$r<3;$r++) {
       $sliders[$r].destroy();
    }