Home > widget-integration > RecommendationWidgetController > getCarouselConfig

RecommendationWidgetController.getCarouselConfig() method

Gets the Slick carousel configuration for desktop view.

Configures carousel behavior including slides to show/scroll, navigation arrows, dots, and responsive breakpoints. The configuration respects RTL (right-to-left) layout direction from the document. Override this method to customize carousel behavior for specific shops or add features like autoplay.

Signature:

protected getCarouselConfig(model: RecommendationModel): SlickOptions;

Parameters

Returns:

SlickOptions

Slick carousel configuration object with desktop and responsive settings

Remarks

The default configuration: - Shows/scrolls number of products based on widget settings (default 4) - Enables dots navigation, disables arrows - Enables infinite scrolling and dragging - Disables accessibility features for keyboard navigation (handled separately) - Includes mobile breakpoint with different settings - Respects RTL layout direction

Example 1

Override to add autoplay and customize for shop:

protected getCarouselConfig(model) {
  const config = super.getCarouselConfig(model);
  return {
    ...config,
    autoplay: true,
    autoplaySpeed: 5000,
    pauseOnHover: true,
    arrows: true // Show navigation arrows
  };
}

Example 2

Override to customize slides for shop layout:

protected getCarouselConfig(model) {
  return {
    ...super.getCarouselConfig(model),
    slidesToShow: 3, // Always show 3 products
    slidesToScroll: 1, // Scroll one at a time
    centerMode: true,
    centerPadding: '60px'
  };
}