Home > widget-integration > RecommendationWidgetController > attachCarouselButtonHandlers

RecommendationWidgetController.attachCarouselButtonHandlers() method

Attaches click event handlers to carousel navigation buttons (Previous/Next).

Binds click events to circular navigation buttons based on their aria-label attributes. Override this method to customize button behavior, add additional navigation controls, or implement custom navigation logic.

Signature:

protected attachCarouselButtonHandlers(container: HTMLElement, slider: SlickInstance): void;

Parameters

Returns:

void

Example 1

Override to add keyboard shortcuts for navigation:

protected attachCarouselButtonHandlers(container, slider) {
  super.attachCarouselButtonHandlers(container, slider);

  // Add keyboard navigation
  container.addEventListener('keydown', (e) => {
    if (e.key === 'ArrowLeft') {
      slider.slick('slickPrev');
    } else if (e.key === 'ArrowRight') {
      slider.slick('slickNext');
    }
  });
}

Example 2

Override to add analytics tracking to navigation:

protected attachCarouselButtonHandlers(container, slider) {
  const buttons = container.querySelectorAll('.boost-sd__button--circle');
  buttons.forEach((button) => {
    button.addEventListener('click', () => {
      const direction = button.getAttribute('aria-label');
      this.analytics.track('carousel_navigation', { direction });

      if (direction === 'Next') {
        slider.slick('slickNext');
      } else if (direction === 'Previous') {
        slider.slick('slickPrev');
      }
    });
  });
}