Configuration

/**
 * Initialize Slick carousel on selected elements
 * @param options - Configuration object with carousel settings
 * @returns jQuery object for chaining
 */
$('.slider').slick(options);

// Basic initialization
$('.slider').slick();

// With custom options
$('.slider').slick({
  dots: true,
  infinite: true,
  speed: 300,
  slidesToShow: 3,
  slidesToScroll: 1,
  responsive: [
    {
      breakpoint: 768,
      settings: {
        slidesToShow: 2
      }
    },
    {
      breakpoint: 480,
      settings: {
        slidesToShow: 1
      }
    }
  ]
});

// Declarative configuration via data attributes
// HTML: <div class="slider" data-slick='{"slidesToShow": 4, "dots": true}'>
$('.slider').slick(); // Reads configuration from data-slick attribute

/**
 * Get current value of a configuration option
 * @param option - Name of the option to retrieve
 * @returns Current value of the specified option
 */
$('.slider').slick('slickGetOption', option);

// Get current speed setting
var speed = $('.slider').slick('slickGetOption', 'speed');

// Get slides to show setting
var slidesToShow = $('.slider').slick('slickGetOption', 'slidesToShow');

// Get autoplay status
var autoplay = $('.slider').slick('slickGetOption', 'autoplay');

/**
 * Set single configuration option
 * @param option - Name of the option to set
 * @param value - New value for the option
 * @param refresh - Whether to refresh the carousel (default: false)
 */
$('.slider').slick('slickSetOption', option, value, refresh);

/**
 * Set multiple configuration options
 * @param options - Object containing multiple option key-value pairs
 * @param refresh - Whether to refresh the carousel (default: false)
 */
$('.slider').slick('slickSetOption', options, refresh);

/**
 * Set responsive configuration
 * @param 'responsive' - Literal string 'responsive'
 * @param responsiveArray - Array of responsive breakpoint configurations
 * @param refresh - Whether to refresh the carousel (default: false)
 */
$('.slider').slick('slickSetOption', 'responsive', responsiveArray, refresh);

// Change single option
$('.slider').slick('slickSetOption', 'speed', 1000, true);

// Change multiple options
$('.slider').slick('slickSetOption', {
  speed: 800,
  autoplay: true,
  autoplaySpeed: 2000
}, true);

// Update responsive settings
$('.slider').slick('slickSetOption', 'responsive', [
  {
    breakpoint: 1024,
    settings: {
      slidesToShow: 3,
      infinite: true
    }
  },
  {
    breakpoint: 600,
    settings: {
      slidesToShow: 2,
      dots: true
    }
  }
], true);

interface DisplayOptions {
  /** Number of slides to show at once (default: 1) */
  slidesToShow?: number;
  
  /** Number of slides to scroll at once (default: 1) */
  slidesToScroll?: number;
  
  /** Enable infinite looping (default: true) */
  infinite?: boolean;
  
  /** Starting slide index (default: 0) */
  initialSlide?: number;
  
  /** Number of rows in grid mode (default: 1) */
  rows?: number;
  
  /** Slides per row in grid mode (default: 1) */
  slidesPerRow?: number;
  
  /** Enable variable slide widths (default: false) */
  variableWidth?: boolean;
  
  /** Enable center mode with partial slides (default: false) */
  centerMode?: boolean;
  
  /** Side padding in center mode (default: '50px') */
  centerPadding?: string;
  
  /** Enable vertical sliding (default: false) */
  vertical?: boolean;
  
  /** Adapt height to current slide (default: false) */
  adaptiveHeight?: boolean;
  
  /** Right-to-left direction (default: false) */
  rtl?: boolean;
}

interface AnimationOptions {
  /** Transition speed in milliseconds (default: 500) */
  speed?: number;
  
  /** Enable fade transitions (default: false) */
  fade?: boolean;
  
  /** CSS3 easing function (default: 'ease') */
  cssEase?: string;
  
  /** jQuery easing fallback (default: 'linear') */
  easing?: string;
  
  /** Enable CSS transitions (default: true) */
  useCSS?: boolean;
  
  /** Enable CSS transforms (default: true) */
  useTransform?: boolean;
  
  /** Wait for animation before new commands (default: true) */
  waitForAnimate?: boolean;
  
  /** Base z-index for slides (default: 1000) */
  zIndex?: number;
}

interface NavigationOptions {
  /** Show prev/next arrows (default: true) */
  arrows?: boolean;
  
  /** Previous arrow HTML or selector (default: button element) */
  prevArrow?: string | HTMLElement | JQuery;
  
  /** Next arrow HTML or selector (default: button element) */
  nextArrow?: string | HTMLElement | JQuery;
  
  /** Where to append arrows (default: slider element) */
  appendArrows?: string | HTMLElement | JQuery;
  
  /** Show dot indicators (default: false) */
  dots?: boolean;
  
  /** CSS class for dots container (default: 'slick-dots') */
  dotsClass?: string;
  
  /** Where to append dots (default: slider element) */
  appendDots?: string | HTMLElement | JQuery;
  
  /** Custom dot content function */
  customPaging?: (slider: any, i: number) => JQuery;
}

interface InteractionOptions {
  /** Enable mouse dragging (default: true) */
  draggable?: boolean;
  
  /** Enable touch/swipe (default: true) */
  swipe?: boolean;
  
  /** Enable slide moving with touch (default: true) */
  touchMove?: boolean;
  
  /** Swipe sensitivity threshold (default: 5) */
  touchThreshold?: number;
  
  /** Allow swiping to any slide (default: false) */
  swipeToSlide?: boolean;
  
  /** Enable vertical swiping (default: false) */
  verticalSwiping?: boolean;
  
  /** Resistance at non-infinite edges (default: 0.35) */
  edgeFriction?: number;
  
  /** Focus on slide when clicked (default: false) */
  focusOnSelect?: boolean;
  
  /** Focus on slide after change (default: false) */
  focusOnChange?: boolean;
}

interface AutoplayOptions {
  /** Enable autoplay (default: false) */
  autoplay?: boolean;
  
  /** Autoplay interval in milliseconds (default: 3000) */
  autoplaySpeed?: number;
  
  /** Pause autoplay on hover (default: true) */
  pauseOnHover?: boolean;
  
  /** Pause autoplay when focused (default: true) */
  pauseOnFocus?: boolean;
  
  /** Pause autoplay on dot hover (default: false) */
  pauseOnDotsHover?: boolean;
}

interface ResponsiveOptions {
  /** Responsive breakpoint settings */
  responsive?: ResponsiveOption[];
  
  /** Mobile-first responsive breakpoints (default: false) */
  mobileFirst?: boolean;
  
  /** What to respond to: 'window', 'slider', or 'min' (default: 'window') */
  respondTo?: 'window' | 'slider' | 'min';
}

interface ResponsiveOption {
  /** Screen width breakpoint */
  breakpoint: number;
  
  /** Settings to apply at this breakpoint, or 'unslick' to disable */
  settings: Partial<SlickOptions> | 'unslick';
}

interface AccessibilityOptions {
  /** Enable keyboard navigation and ARIA (default: true) */
  accessibility?: boolean;
  
  /** Slide element query selector (default: '') */
  slide?: string;
}

interface AdvancedOptions {
  /** Sync with another slider (selector or jQuery object) */
  asNavFor?: string | JQuery;
  
  /** Lazy loading mode: 'ondemand' or 'progressive' (default: 'ondemand') */
  lazyLoad?: 'ondemand' | 'progressive';
}