slider

The slider macro is used to render a tile slider containing various elements.

Definition

{% slider(sliderItemsTemplate, options) %}

Input parameters

sliderItemsTemplate

html represents a template of items being passed to a slider. It is usually created with the help of tile macros like product_tile or article and with data types like Product List or Blog Articles List which get fetched from the Object Api. Keep in mind that it is important to use <li> elements as wrappers to your tiles because of the html structure of a slider. Wrapping in <li> elements is also shown in the examples below.

options

object represents an object of slider options and attributes

Option key	Type	Default	Required	Description
options.id	string	""	yes	Unique id of the slider
options.classNames	string	""	no	Additional classes that will be added to the slider element
options.sliderConfig	object	null	no	Object of slider configuration options

options.sliderConfig

object represents an object of slider configuration options

Option key	Type	Default	Required	Description
options.sliderConfig.mountOnConnectedCallback	boolean	true	no	if set to true the slider will be rendered when page loads
options.sliderConfig.perPage	number	4	no	Number of products on a single page on desktop resolution
options.sliderConfig.perMove	number	1	no	Number of products slid through on a slider move
options.sliderConfig.arrows	boolean	true	no	If set to true slider arrows will appear on desktop resolution
options.sliderConfig.gap	string	1.25rem	no	Represents the gap between slider elements
options.sliderConfig.omitEnd	boolean	true	no	If set to true there will be no arrow at the end of the slider
options.sliderConfig.hasArrowsOnMobile	boolean	false	no	If set to true slider arrows will appear on mobile resolution
options.sliderConfig.breakpoints	object	null	no	Object of custom configuration for chosen breakpoints

options.sliderConfig.breakpoints

Object of custom configuration for chosen breakpoints. Each breakpoint is represented by a number and can contain various properties. Default values of those properties are different for different breakpoints.

Option key	Type	Default	Required	Description
options.sliderConfig.breakpoints[number].perPage	string	3 or 2	no	Number of products on a single page on a chosen resolution
options.sliderConfig.breakpoints[number].arrows	boolean	false	no	If set to true slider arrows will appear on a chosen resolution
options.sliderConfig.breakpoints[number].gap	string	"" or 0.5rem	no	Represents the gap between slider elements on a chosen resolution
options.sliderConfig.breakpoints[number].padding	string	"" or 1rem	no	Represents the additional padding for each slider element on a chosen resolution

Example

In this example we render a list of product tiles from the list of related products. We use a product_tile macro to achieve this as well as the getProduct() ObjectApi method.

{% from "@macros/slider.twig" import slider %}
{% from "@macros/product_tile.twig" import product_tile %}

{% set product = ObjectApi.getProduct(1) %}
{% set relatedProducts = product.relatedProducts %}

{% set sliderItemsTemplate %}
    {% for product in relatedProducts %}
        <li class="splide__slide">
            {{ product_tile(product, moduleConfig.productTileSettings) }}
        </li>
    {% endfor %}
{% endset %}

{{
    slider({
        sliderItemsTemplate: sliderItemsTemplate,
        options: {
            id: 'slider-1'
        }
    })
}}

Example

In this example we render a similar list but this time we set custom breakpoints for 1440 and 576 pixels wide resolutions where we set a custom of tiles that we want to display on one page. We also set arrows for the 1440 pixels wide resolution.

{% from "@macros/slider.twig" import slider %}
{% from "@macros/product_tile.twig" import product_tile %}

{% set product = ObjectApi.getProduct(1) %}
{% set relatedProducts = product.relatedProducts %}

{% set sliderItemsTemplate %}
    {% for product in relatedProducts %}
        <li class="splide__slide">
            {{ product_tile(product, moduleConfig.productTileSettings) }}
        </li>
    {% endfor %}
{% endset %}

{{
    slider({
        sliderItemsTemplate: sliderItemsTemplate,
        options: {
            id: 'slider-1',
            breakpoints: {
                1440: {
                    perPage: 5,
                    arrows: true
                },
                576: {
                    perPage: 4
                }
            }
        }
    })
}}

Macro source code

{% macro slider(sliderItemsTemplate, options) %}
    {% from "@macros/slider_arrow_left.twig" import slider_arrow_left %}
    {% from "@macros/slider_arrow_right.twig" import slider_arrow_right %}

    {% set sliderConfigProps = options.sliderConfig %}

    {%
        set sliderSettings = {
            "mountOnConnectedCallback": sliderConfigProps.mountOnConnectedCallback ?? true,
            "perPage": sliderConfigProps.perPage ?? 4,
            "perMove": sliderConfigProps.perMove ?? 1,
            "arrows": sliderConfigProps.arrows ?? true,
            "pagination": sliderConfigProps.pagination ?? false,
            "gap": sliderConfigProps.gap ?? "1.25rem",
            "omitEnd": sliderConfigProps.omitEnd ?? true,
            "hasArrowsOnMobile": sliderConfigProps.hasArrowsOnMobile ?? false,
            "rewind": true,
            "breakpoints": {
                1440: {
                    "perPage": sliderConfigProps.breakpoints[1440].perPage ?? 3,
                    "arrows": sliderConfigProps.breakpoints[1440].arrows ?? false
                },
                1000: {
                    "perPage":  sliderConfigProps.breakpoints[1000].perPage ?? 2,
                    "gap": sliderConfigProps.breakpoints[1000].gap ?? "0.5rem",
                    "padding": sliderConfigProps.breakpoints[1000].padding ?? "1rem",
                    "arrows": sliderConfigProps.breakpoints[1000].arrows ?? false
                },
                576: {
                    "perPage":  sliderConfigProps.breakpoints[576].perPage ?? 1,
                    "padding": sliderConfigProps.breakpoints[576].padding ?? "1rem",
                    "gap": sliderConfigProps.breakpoints[576].gap ?? "0.5rem",
                    "pagination": false
                }
            }
        }
    %}

    <h-slider
            id="slider-{{ options.id }}"
            class="
                slider
                splide
                {% if sliderSettings.pagination %} slider_has-pagination {% endif %}
                {{ options.classNames|join(' ') }}
            "
            settings="{{ sliderSettings | json_encode }}"
    >
        <div class="
            slider__content 
            {% if sliderConfigProps.arrows %} slider__content_with-arrows-desktop {% endif %}
            {% if sliderConfigProps.breakpoints[1440].arrows %} slider__content_with-arrows-laptop {% endif %}
            {% if sliderConfigProps.breakpoints[1000].arrows %} slider__content_with-arrows-tablet {% endif %}
            {% if sliderSettings.hasArrowsOnMobile %} slider__content_with-arrows-mobile {% endif %}"
        >
            <div class="splide__arrows {% if not sliderSettings.hasArrowsOnMobile %}hidden-xs-only hidden-sm-only{% endif %}">
                {{ slider_arrow_left({ alignment: 'content' }) }}
                {{ slider_arrow_right({ alignment: 'content' }) }}
            </div>
            <div class="splide__track">
                <ul class="splide__list">
                    {{ sliderItemsTemplate }}
                </ul>
            </div>
        </div>
        <ul class="splide__pagination"></ul>
    </h-slider>
{% endmacro %}

Macros reference

• product_tile

Webcomponents reference

• h-slider

Objects reference

• Product List
• Blog Articles List