Destruction and Cleanup

/**
 * Destroy Slick instance and restore original markup
 * Removes all Slick-added elements, classes, and event listeners
 */
$('.slider').slick('unslick');

// Basic destruction
$('.slider').slick('unslick');

// Destroy on page unload
$(window).on('beforeunload', function() {
  $('.slider').slick('unslick');
});

// Destroy and reinitialize with new settings
$('.slider').slick('unslick');
$('.slider').slick({
  // New configuration
  slidesToShow: 2,
  autoplay: true
});

// Conditional destruction
if ($('.slider').hasClass('slick-initialized')) {
  $('.slider').slick('unslick');
}

// Destroy multiple sliders
$('.slider').each(function() {
  if ($(this).hasClass('slick-initialized')) {
    $(this).slick('unslick');
  }
});

// What happens during destruction:
// 1. Triggers 'destroy' event
// 2. Clears autoplay timers
// 3. Removes all event listeners
// 4. Removes cloned slides
// 5. Removes navigation elements (arrows, dots)
// 6. Restores original slide markup and styles
// 7. Removes Slick CSS classes
// 8. Cleans up internal state

// Listen for destruction event to perform custom cleanup
$('.slider').on('destroy', function(event, slick) {
  console.log('Carousel being destroyed');
  
  // Clean up custom event listeners
  $(window).off('resize.customSlider');
  $(document).off('keydown.customSlider');
  
  // Clear custom timers
  clearInterval(customProgressTimer);
  clearTimeout(customDelayTimer);
  
  // Remove custom elements
  $('.custom-controls').remove();
  $('.custom-progress-bar').remove();
  
  // Clean up third-party integrations
  if (window.analytics) {
    analytics.cleanup();
  }
  
  // Clear stored references
  customSliderInstance = null;
});

// Trigger destruction
$('.slider').slick('unslick');

// Destroy at specific breakpoints using responsive settings
$('.slider').slick({
  slidesToShow: 3,
  responsive: [
    {
      breakpoint: 768,
      settings: {
        slidesToShow: 2
      }
    },
    {
      breakpoint: 480,
      settings: 'unslick' // Destroys Slick at this breakpoint
    }
  ]
});

// Manual responsive destruction
function handleResponsiveDestruction() {
  if (window.innerWidth < 480 && $('.slider').hasClass('slick-initialized')) {
    $('.slider').slick('unslick');
  } else if (window.innerWidth >= 480 && !$('.slider').hasClass('slick-initialized')) {
    $('.slider').slick({
      // Reinitialize with settings
    });
  }
}

$(window).resize(handleResponsiveDestruction);

// Proper cleanup pattern for dynamic sliders
class SliderManager {
  constructor() {
    this.sliders = new Map();
    this.eventHandlers = new Map();
  }
  
  createSlider(selector, options = {}) {
    // Clean up existing slider if present
    this.destroySlider(selector);
    
    const $slider = $(selector);
    const handlers = this.setupEventHandlers($slider);
    
    // Store references for cleanup
    this.sliders.set(selector, $slider);
    this.eventHandlers.set(selector, handlers);
    
    // Initialize slider
    $slider.slick(options);
    
    return $slider;
  }
  
  destroySlider(selector) {
    const $slider = this.sliders.get(selector);
    const handlers = this.eventHandlers.get(selector);
    
    if ($slider && $slider.hasClass('slick-initialized')) {
      // Clean up custom handlers first
      if (handlers) {
        handlers.forEach(handler => handler.cleanup());
      }
      
      // Destroy Slick instance
      $slider.slick('unslick');
      
      // Clean up references
      this.sliders.delete(selector);
      this.eventHandlers.delete(selector);
    }
  }
  
  destroyAll() {
    this.sliders.forEach((slider, selector) => {
      this.destroySlider(selector);
    });
  }
  
  setupEventHandlers($slider) {
    const handlers = [];
    
    // Custom handlers with cleanup functions
    const resizeHandler = {
      handler: () => this.handleResize($slider),
      cleanup: () => $(window).off('resize.slider', this.handler)
    };
    
    $(window).on('resize.slider', resizeHandler.handler);
    handlers.push(resizeHandler);
    
    return handlers;
  }
}

// Usage
const sliderManager = new SliderManager();

// Create slider
sliderManager.createSlider('.hero-slider', {
  autoplay: true,
  dots: true
});

// Clean up on page unload
$(window).on('beforeunload', () => {
  sliderManager.destroyAll();
});

// React useEffect cleanup
useEffect(() => {
  const $slider = $('.slider');
  $slider.slick({
    dots: true,
    infinite: true
  });
  
  // Cleanup function
  return () => {
    if ($slider.hasClass('slick-initialized')) {
      $slider.slick('unslick');
    }
  };
}, []);

// Angular component cleanup
export class SliderComponent implements OnDestroy {
  ngOnDestroy() {
    if (this.sliderElement && $(this.sliderElement).hasClass('slick-initialized')) {
      $(this.sliderElement).slick('unslick');
    }
  }
}

// Vue component cleanup
export default {
  beforeDestroy() {
    if (this.$refs.slider && $(this.$refs.slider).hasClass('slick-initialized')) {
      $(this.$refs.slider).slick('unslick');
    }
  }
}

// Check if slider is initialized before destruction
function safeDestroy(selector) {
  const $slider = $(selector);
  
  if ($slider.length === 0) {
    console.warn(`No elements found for selector: ${selector}`);
    return false;
  }
  
  if (!$slider.hasClass('slick-initialized')) {
    console.warn(`Slider not initialized: ${selector}`);
    return false;
  }
  
  try {
    $slider.slick('unslick');
    console.log(`Successfully destroyed slider: ${selector}`);
    return true;
  } catch (error) {
    console.error(`Error destroying slider: ${selector}`, error);
    return false;
  }
}

// Batch destruction with error handling
function destroyAllSliders() {
  const sliders = $('.slick-initialized');
  let successCount = 0;
  let errorCount = 0;
  
  sliders.each(function() {
    try {
      $(this).slick('unslick');
      successCount++;
    } catch (error) {
      console.error('Error destroying slider:', error);
      errorCount++;
    }
  });
  
  console.log(`Destroyed ${successCount} sliders, ${errorCount} errors`);
  return { success: successCount, errors: errorCount };
}

// Memory leak detection helper
function checkForMemoryLeaks() {
  const activeSliders = $('.slick-initialized').length;
  const slickElements = $('[class*="slick-"]').length;
  
  console.log(`Active sliders: ${activeSliders}`);
  console.log(`Elements with slick classes: ${slickElements}`);
  
  if (activeSliders === 0 && slickElements > 0) {
    console.warn('Potential memory leak: Slick elements found without active sliders');
    return false;
  }
  
  return true;
}

// 1. Always check initialization status
if ($slider.hasClass('slick-initialized')) {
  $slider.slick('unslick');
}

// 2. Use try-catch for error handling
try {
  $slider.slick('unslick');
} catch (error) {
  console.error('Destruction failed:', error);
}

// 3. Clean up custom event listeners first
$slider.on('destroy', function() {
  // Custom cleanup before Slick's cleanup
  $(window).off('.customNamespace');
  clearInterval(customTimer);
});

// 4. Nullify references after destruction
$slider.slick('unslick');
$slider = null;
sliderInstance = null;

// 5. Use namespaced events for easier cleanup
$(window).on('resize.mySlider', handleResize);
$(document).on('keydown.mySlider', handleKeydown);

// Later...
$(window).off('.mySlider');
$(document).off('.mySlider');