slider_arrow_down¶

The slider_arrow_down macro is used to render a down arrow used to navigate through slider.

Definition¶

{% slider_arrow_down(options) %}

Input parameters¶

options¶

object represents an object of slider arrow down options

Option key	Type	Default	Required	Description
options.title	`string`	""	no	Title attribute of the arrow icon's `<svg>` element
options.alignment	`string`	""	no	Determines the custom alignment of the arrow, possible values are `pagination` and `content`
options.class	`string`	""	no	Additional classes that will be added to the main `<div>` element of the slider icon

Example¶

In this example we render a basic down arrow for the slider.

{% from "@macros/slider_arrow_down.twig" import slider_arrow_down %}

{{ slider_arrow_down() }}

Example¶

In this example we render a down arrow for the slider that has a centered-with-content alignment.

{% from "@macros/slider_arrow_down.twig" import slider_arrow_down %}

{{ slider_arrow_down({
    alignment: 'content'
}) }}

Example¶

In this example we render a down arrow for the slider with an additional title and a custom class making it visible only all devices but mobile.

{% from "@macros/slider_arrow_down.twig" import slider_arrow_down %}

{{ slider_arrow_down({
    title: 'Down arrow',
    class: 'hidden-xs-only'
}) }}

Macro source code¶

{% macro slider_arrow_down(options) %}
    {% from "@macros/icon.twig" import icon %}

    <div class="slider__arrow slider__arrow_down {{ options.class }}">
        <button class="
            splide__arrow splide__arrow--next 
            {% if options.alignment %}
                slider__arrow_centered-with-{{ options.alignment }}
                slider__arrow_centered-with-{{ options.alignment }}-down
            {% endif %}
        ">      
            {{ icon('icon-chevron-down', {
                size: 'l',
                title: options.title
            }) }}
        </button>
    </div>
{% endmacro %}