The slider block adds the ability to create a horizontal sliders - which can be control based on a device width.

The slide object is a dynamic method of showcasing relevant information in an interactive pattern, which only part of the content is revealed and further information is available either based on an auto scroll method, or by user interaction.

The most common use case of sliders are:

  • To display a set of logo's of partners.
  • To create a slider of initiaitves.
  • To create a slider with news articles or blog posts.
  • To encapsulate a horizontal scrolling section of any card element.


Where to use or not to use a slider is the decision of the enity, based on user research and the layout of the page. However, it is recommend to use a slider when the information to be displayed is not critical.

Key elements to note

  • Avoid using too many auto scrolling elements on a single page.
  • You may choose to display the elements without a scroller on a desktop and turn it into a slider on mobile to maintain an aesthetic look towards the layout.
  • When using an auto scroll feature on a slider, do not change the elements quickly. Maintain a minimum timer of 7 seconds before shifting the layout.
  • Always allow for touch based gestures for scrolling elements.
  • Even though a touch based gesture is available, you must provide the ability to paginate the elements in a slider manually.
This block depends on Javascript to run as slider

To utilize this block, please ensure that you are using a Slider Animation Library. For the purpose of demo, this block uses the Slick Slider - a library bundled to be used along with jQuery.

You may use any other slider library - as long as you follow the rules on how to place elements within the hero object.


Variations are different versions of this block that you may use within your website. The choice of what variation is useful should be based on the user experience study and layout design applied to the page of your website.

Logo slider

Initiatives slide

News slider

Page rating