Scrollable Horizontal List

Product Images

This example showcases the use of a horizontal scrollable list. It's like a carousel without slides/pagination.

HTML

<div class="t-content">
<div class="c-scrollableHorizontalList c-scrollableHorizontalList--interactive" style="width: 675px; border: 1px solid red;">
    <div class="c-scrollableHorizontalList-track">
        <div class="c-scrollableHorizontalList-list">
            <div class="c-scrollableHorizontalList-listItem">
                <div><img src="http://via.placeholder.com/128x186" alt=""></div>
            </div>
            <div class="c-scrollableHorizontalList-listItem">
                <div><img src="http://via.placeholder.com/128x186" alt=""></div>
            </div>
            <div class="c-scrollableHorizontalList-listItem">
                <div><img src="http://via.placeholder.com/128x186" alt=""></div>
            </div>
            <div class="c-scrollableHorizontalList-listItem">
                <div><img src="http://via.placeholder.com/128x186" alt=""></div>
            </div>
            <div class="c-scrollableHorizontalList-listItem">
                <div><img src="http://via.placeholder.com/128x186" alt=""></div>
            </div>
            <div class="c-scrollableHorizontalList-listItem">
                <div><img src="http://via.placeholder.com/128x186" alt=""></div>
            </div>
            <div class="c-scrollableHorizontalList-listItem">
                <div><img src="http://via.placeholder.com/128x186" alt=""></div>
            </div>
        </div>
    </div>
</div>
</div>

Attribute Directive - No Scrollbar

Optional directive to add paging buttons for programmatic scrolling.

HTML

<div class="t-content">
    <div scrollable-horizontal-list class="c-scrollableHorizontalList c-scrollableHorizontalList--interactive" style="width: 675px; border: 1px solid red;">
        <div class="c-scrollableHorizontalList-track">
            <div class="c-scrollableHorizontalList-list">
                <div class="c-scrollableHorizontalList-listItem">
                    <div><img src="http://via.placeholder.com/128x186" alt=""></div>
                </div>
                <div class="c-scrollableHorizontalList-listItem">
                    <div><img src="http://via.placeholder.com/128x186" alt=""></div>
                </div>
                <div class="c-scrollableHorizontalList-listItem">
                    <div><img src="http://via.placeholder.com/128x186" alt=""></div>
                </div>
                <div class="c-scrollableHorizontalList-listItem">
                    <div><img src="http://via.placeholder.com/128x186" alt=""></div>
                </div>
                <div class="c-scrollableHorizontalList-listItem">
                    <div><img src="http://via.placeholder.com/128x186" alt=""></div>
                </div>
                <div class="c-scrollableHorizontalList-listItem">
                    <div><img src="http://via.placeholder.com/128x186" alt=""></div>
                </div>
                <div class="c-scrollableHorizontalList-listItem">
                    <div><img src="http://via.placeholder.com/128x186" alt=""></div>
                </div>
            </div>
        </div>
    </div>
</div>