Enabling auto-scrolling in the Content Carousel widget

You might want the Content Carousel widget to automatically scroll through the images rather than requiring the user to control the scrolling. If so, you can add an auto-scrolling property to the UI provider JSPF file for the widget and specify the scrolling speed.

With this feature enabled, the widget auto-scrolls until the shopper interacts with the widget, for example, by clicking an image or by using the arrows for scrolling.

Note: The following steps are applicable only if you are using the Dojo framework.

Before you begin

Instead of updating the default Content Carousel widget that is provided with WebSphere Commerce, create a custom version of the widget and then register the custom version. Follow the full set of recommended steps for updating HCL Commerce site-level widgets in Best practices for developing Commerce Composer assets.

About this task

When you enable auto-scrolling as described in the following steps, the Content Carousel widget does not meet accessibility guidelines.

Procedure

  1. Start HCL Commerce Developer. Switch to the Enterprise Explorer view.
  2. Open your custom ContentCarousel_UI.jspf file for the Content Carousel widget.
    Tip: For the default widget, the file is at the following path:
    • workspace_dir\Stores\WebContent\widgetdir\com.ibm.commerce.store.widgets.ContentCarousel
  3. Find the following line of code: 
    <div id="contentCarouselWidget${widgetSuffix}" class="contentCarouselWidget carousel" data-dojo-type="wc/widget/Carousel" 
data-dojo-props="speed:2000" >
  4. Add the following value to the data-dojo-props attribute: 
    ,auto:5000

    The result looks like this example

    <div id="contentCarouselWidget${widgetSuffix}" class="contentCarouselWidget carousel" data-dojo-type="wc/widget/Carousel" 
data-dojo-props="speed:2000,auto:5000" >
    Tip: The number 5000 specifies the number of milliseconds between each scroll, which means the widget will scroll every 5 seconds. You can use a different number to shorten or lengthen the time.
  5. Save and close the ContentCarousel_UI.jspf file.