Ticker

News-like Horizontal Scrolling List

How to

The Ticker component is used to create a list of horizontally scrolling items.

By default, the list translates from right to left. To reverse the direction of the animation, add the .ticker--reverse class to the .ticker element.

If you want to pause the animation on hover, add a data-ticker-pause-hover="on" attribute to the .js-ticker element:

<div class="ticker js-ticker" data-ticker-pause-hover="on">
  <!-- ... -->
</div>

Horizontal Gap #

To control the horizontal gap among the list items, use the --ticker-gap-x custom property:

<div class="ticker js-ticker" style="--ticker-gap-x: var(--space-md);">
  <!-- ... -->
</div>

Pause Button #

The Ticker comes with the option of adding a pause/play button. Make sure to add, to the control button, an aria-controls attribute equal to the id of the ticker element:

<button class="js-ticker-control js-tab-focus" aria-controls="ticker" aria-label="pause animation" aria-pressed="false">Toggle Ticker</button>

<div class="ticker js-ticker" id="ticker">
  <ul class="ticker__list">
    <!-- list items here -->
  </ul>
</div>

Image Width #

If you're using the plugin to animated a list of images, make sure to add the .ticker__img class to each image element, and set the --ticker-img-width custom property to control the width of the images (see --v3 demo).

If you're using inline SVG images, make sure to set the inline width on the SVG element. Optionally, you can control the color of the SVG elements by using the fill and color utility classes (see --v2 demo).

Categories

• Data Display > List
• Plugins > Carousel

Bug report & feedback

Component Github page ↗