Home > widget-integration > RecommendationWidgetController > getMobileCarouselConfig

RecommendationWidgetController.getMobileCarouselConfig() method

Gets the Slick carousel configuration for mobile view.

Defines mobile-specific carousel behavior when viewport width is below the mobile breakpoint. Override this method to customize mobile carousel experience for specific shops or device requirements.

Signature:

protected getMobileCarouselConfig(): Partial<SlickOptions>;

Returns:

Partial<SlickOptions>

Partial Slick carousel configuration for mobile devices

Remarks

The default mobile configuration: - Shows 2 slides at a time - Scrolls 2 slides per interaction - Enables dots navigation - Enables infinite scrolling and dragging - Disables accessibility features (handled separately)

Example 1

Override to show single slide on mobile:

protected getMobileCarouselConfig() {
  return {
    ...super.getMobileCarouselConfig(),
    slidesToShow: 1,
    slidesToScroll: 1,
    dots: false // Hide dots for single slide
  };
}

Example 2

Override to enable vertical scrolling on mobile:

protected getMobileCarouselConfig() {
  return {
    dots: false,
    vertical: true,
    verticalSwiping: true,
    slidesToShow: 2,
    slidesToScroll: 1
  };
}