slider_arrow_up¶

The slider_arrow_up macro is used to render an upwards arrow used to navigate through slider.

Definition¶

{% slider_arrow_up(options) %}

Input parameters¶

options¶

object represents an object of slider arrow up 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 upwards arrow for the slider.

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

{{ slider_arrow_up() }}

Example¶

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

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

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

Example¶

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

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

{{ slider_arrow_up({
    title: 'Up arrow',
    class: 'hidden-xs-only'
}) }}

Macro source code¶

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

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