<h3>Standard</h3>

<p>
    The <code>nds_card_carouosel</code> is a wrapper around collection of <code>nds_card_carousel_item</code>,
    which is an alias for <code>card</code> with additional markup required
    by carousel.
</p>

{%- call ui.util.call(show_example) -%}
    {%- raw %}
        {%- call ui.util.call(ui.nds_card_carousel) -%}
            {{ ui.nds_card_carousel_item(lipsum(1)) }}
            {{ ui.nds_card_carousel_item(lipsum(1)) }}
            {{ ui.nds_card_carousel_item(lipsum(1)) }}
            {{ ui.nds_card_carousel_item(lipsum(1)) }}
            {{ ui.nds_card_carousel_item(lipsum(1)) }}
        {%- endcall %}
    {%- endraw %}
{%- endcall %}

<p>
    The carousel component can be configured via:

    <ul>
        <li><strong>title</strong>: add a heading above the list of tiles</li>
        <li><strong>drag</strong>: make carousel draggable</li>
        <li><strong>navigation</strong>: expose navigation for tiles.</li>
        <li><strong>loop</strong>: allow infinite loop of tiles. Cannot be used with <code>navigation</code></li>
        <li><strong>pagination</strong>: render pager instead of dots under the list of tiles</li>
    </ul>
</p>

{%- call ui.util.call(show_example) -%}
    {%- raw %}
        {%- call ui.util.call(ui.nds_card_carousel, title="Title", drag=true, loop=true) -%}
            {{ ui.nds_card_carousel_item(lipsum(1)) }}
            {{ ui.nds_card_carousel_item(lipsum(1)) }}
            {{ ui.nds_card_carousel_item(lipsum(1)) }}
            {{ ui.nds_card_carousel_item(lipsum(1)) }}
            {{ ui.nds_card_carousel_item(lipsum(1)) }}
        {%- endcall %}
    {%- endraw %}
{%- endcall %}

<p>
    The <code>navigation</code> parameter adds dot-icons under the list for
    quick page selection. The <code>loop</code> parameter has no effect when
    navigation enabled.
</p>

{%- call ui.util.call(show_example) -%}
    {%- raw %}
        {%- call ui.util.call(ui.nds_card_carousel, navigation=true) -%}
            {{ ui.nds_card_carousel_item(lipsum(1)) }}
            {{ ui.nds_card_carousel_item(lipsum(1)) }}
            {{ ui.nds_card_carousel_item(lipsum(1)) }}
            {{ ui.nds_card_carousel_item(lipsum(1)) }}
            {{ ui.nds_card_carousel_item(lipsum(1)) }}
        {%- endcall %}
    {%- endraw %}
{%- endcall %}

<p>
    The <code>pagination</code> parameter replaces dot-navigation with numbered items.
</p>

{%- call ui.util.call(show_example) -%}
    {%- raw %}
        {%- call ui.util.call(ui.nds_card_carousel, pagination=true) -%}
            {{ ui.nds_card_carousel_item(lipsum(1)) }}
            {{ ui.nds_card_carousel_item(lipsum(1)) }}
            {{ ui.nds_card_carousel_item(lipsum(1)) }}
            {{ ui.nds_card_carousel_item(lipsum(1)) }}
            {{ ui.nds_card_carousel_item(lipsum(1)) }}
        {%- endcall %}
    {%- endraw %}
{%- endcall %}