Information
<div class="ecl-news-ticker" data-ecl-news-ticker="true" data-ecl-auto-init="NewsTicker">
<div class="ecl-news-ticker__container"><svg class="ecl-icon ecl-icon--m ecl-news-ticker__icon" focusable="false"
aria-hidden="true">
<use xlink:href="/dist/media/icons.df9fbcbe.svg#information"></use>
</svg>
<div class="ecl-news-ticker__content">
<ul class="ecl-news-ticker__slides" id="news-ticker-example-content">
<li class="ecl-news-ticker__slide"><a href="/example" class="ecl-link ecl-news-ticker__slide-text">Lorem ipsum
dolor sit amet, consectetur adipiscing elit</a></li>
<li class="ecl-news-ticker__slide"><a href="/example"
class="ecl-link ecl-link--icon ecl-link--icon-before ecl-news-ticker__slide-text"><svg
class="ecl-icon ecl-icon--xs ecl-link__icon" focusable="false" aria-hidden="true">
<use xlink:href="/dist/media/icons.df9fbcbe.svg#external"></use>
</svg><span class="ecl-link__label">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat</span></a></li>
<li class="ecl-news-ticker__slide"><a href="/example" class="ecl-link ecl-news-ticker__slide-text">Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur</a></li>
<li class="ecl-news-ticker__slide"><a href="/example" class="ecl-link ecl-news-ticker__slide-text">Excepteur
sint occaecat cupidatat officia deserunt mollit anim id est laborum</a></li>
<li class="ecl-news-ticker__slide"><a href="/example" class="ecl-link ecl-news-ticker__slide-text">Sed ut
perspiciatis unde omnis iste natus error sit voluptatem accusantium</a></li>
<li class="ecl-news-ticker__slide"><a href="/example" class="ecl-link ecl-news-ticker__slide-text">Nemo enim
ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit sed quia consequuntur magni dolores</a>
</li>
</ul>
</div>
</div>
<div class="ecl-news-ticker__controls"><button class="ecl-news-ticker__prev" data-ecl-news-ticker-prev=""
aria-label="Prev item"><svg
class="ecl-icon ecl-icon--l ecl-icon--rotate-270 ecl-icon--inverted ecl-news-ticker__icon-default"
focusable="false" aria-hidden="true">
<use xlink:href="/dist/media/icons.df9fbcbe.svg#corner-arrow"></use>
</svg><span class="ecl-u-sr-only"></span></button><button class="ecl-news-ticker__next"
data-ecl-news-ticker-next="" aria-label="Next item"><svg
class="ecl-icon ecl-icon--l ecl-icon--rotate-90 ecl-icon--inverted ecl-news-ticker__icon-default"
focusable="false" aria-hidden="true">
<use xlink:href="/dist/media/icons.df9fbcbe.svg#corner-arrow"></use>
</svg><span class="ecl-u-sr-only"></span></button><button class="ecl-news-ticker__play"
data-ecl-news-ticker-play=""><svg class="ecl-icon ecl-icon--l ecl-icon--inverted ecl-news-ticker__icon-default"
focusable="false" aria-hidden="true">
<use xlink:href="/dist/media/icons.df9fbcbe.svg#play"></use>
</svg><svg class="ecl-icon ecl-icon--l ecl-icon--inverted ecl-news-ticker__icon-active" focusable="false"
aria-hidden="true">
<use xlink:href="/dist/media/icons.df9fbcbe.svg#play-filled"></use>
</svg><span class="ecl-u-sr-only">Play news ticker</span></button><button class="ecl-news-ticker__pause"
data-ecl-news-ticker-pause=""><svg class="ecl-icon ecl-icon--l ecl-icon--inverted ecl-news-ticker__icon-default"
focusable="false" aria-hidden="true">
<use xlink:href="/dist/media/icons.df9fbcbe.svg#pause"></use>
</svg><svg class="ecl-icon ecl-icon--l ecl-icon--inverted ecl-news-ticker__icon-active" focusable="false"
aria-hidden="true">
<use xlink:href="/dist/media/icons.df9fbcbe.svg#pause-filled"></use>
</svg><span class="ecl-u-sr-only">Pause news ticker</span></button>
<div class="ecl-news-ticker__counter"><span class="ecl-news-ticker__counter--current">1</span> of <span
class="ecl-news-ticker__counter--max">6</span></div>
</div>
</div>Try it yourself on the playground
Playground