Enable 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, we 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 using the arrows for scrolling.


Before beginning

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 WebSphere Commerce site-level widgets in Best practices for developing Commerce Composer assets.


Task info

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


Procedure

  1. Start WebSphere Commerce Developer. Switch to the Enterprise Explorer view.

  2. Open our 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. We can use a different number to shorten or lengthen the time.

  5. Save and close the ContentCarousel_UI.jspf file.


Related concepts
Content Carousel widget