slider_arrow_right¶

The slider_arrow_right macro is used to render a right arrow used to navigate through slider.

Definition¶

{% slider_arrow_right(options) %}

Input parameters¶

options¶

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

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

{{ slider_arrow_right() }}

Example¶

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

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

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

Example¶

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

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

{{ slider_arrow_right({
    title: 'Right arrow',
    class: 'hidden-xs-only'
}) }}

Macro source code¶

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

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