Home > widget-integration > RecommendationWidgetController > applyRecommendationCarouselEvent

RecommendationWidgetController.applyRecommendationCarouselEvent() method

Initializes and configures the Slick carousel with event handlers and accessibility features.

This method handles the complete carousel setup including: - Initializing Slick carousel with configuration - Setting up RTL (right-to-left) layout if needed - Configuring keyboard navigation with proper tabindex management - Attaching carousel navigation button handlers - Managing focus states for accessibility

Signature:

applyRecommendationCarouselEvent(model: RecommendationModel, container: HTMLElement): void;

Parameters

Returns:

void

Remarks

The carousel implements custom accessibility features: - Updates tabindex for slides based on visibility - Sets aria-label for each slide indicating position - Syncs focus after slide changes - Manages focusable elements within slides

Performance note: This method uses jQuery and Slick carousel which are lazy-loaded only when carousel layout is needed.

Example

Override to add custom carousel event tracking:

applyRecommendationCarouselEvent(model, container) {
  super.applyRecommendationCarouselEvent(model, container);

  // Track carousel interactions
  const slider = window.$appJQuery('.boost-sd__slider-container');
  slider.on('afterChange', (event, slick, currentSlide) => {
    this.analytics.track('carousel_slide_change', {
      widgetId: model.properties.widgetId,
      slideIndex: currentSlide
    });
  });
}