Lightslider refresh and destroy not working

Question

I created function for call lighslider after ajax response in witch displayed property images slider for all property details in grid view.

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

But destroy and refresh not working. Give error like 'destroy not a function' or 'refresh not a function'.

Ajax call is below :

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

Answer 1

Answer is quite simple to this. Lightslider gets a bit buggy when you attach it to a non-id selector, like this:

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

It will initialize, but the methods of it will not work afterwards. Instead of using the class, you must initialize it by attaching it to a selector which is id:

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

Then the destroy, refresh and other methods will work.

For multiple sliders on the same page, you should assign an unique ID to each of them, and use the class to irretate through elements (to get the IDs) like this:

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

When you have those ids, you can use them as selectors and attach lightslider to them. For later use, you can store these lightslider instances in global variable:

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

And when you have all that, you can then use the code to destroy (or do whatever you do) them:

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