slider_arrow_left¶

The slider_arrow_left macro is used to render a left arrow used to navigate through slider.

Definition¶

{% slider_arrow_left(options) %}

Input parameters¶

options¶

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

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

{{ slider_arrow_left() }}

Example¶

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

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

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

Example¶

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

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

{{ slider_arrow_left({
    title: 'Left arrow',
    class: 'hidden-xs-only'
}) }}

Macro source code¶

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

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