Skip to content

h-slider

The h-slider webcomponent provides a foundation for creating customizable sliders. It uses https://splidejs.com/ under the hood.

Note: h- stands for headless. This is naming convention used for every webcomponent as they must have a two-part name.

Features:

  • Keyboard support
  • Adds appropriaate ARIA roles
  • Supports lazy loading
  • Provides default styles

Basic slider

Slider
{%
    set settings = {

        "type": "loop",
        "rewind": true,
        "pagination": false,
        "arrows" :true,
        "keyboard": "global",
        "lazyLoad": "nearby",
        "breakpoints": {
            768: {
                "pagination": true,
                "padding": "2rem"
            }
        }
    }
%}

<h-slider 
    class="splide" 
    settings="{{ settings | json_encode }}">
        {{ slider_arrow_left() }}

        <div class="splide__track">
            <ul class="splide__list">
                <li class="splide__slide"> 
                    Slide 1
                </li>

                <li class="splide__slide"> 
                    Slide 2
                </li>

                <li class="splide__slide"> 
                    Slide 3
                </li>
            </ul>
        </div>

        {{ slider_arrow_right() }}
</h-slider>

As seen in this example, You may provide settings with json. All the settings from splide.js are accepted. You may also provide arrows for slider with usage of slider_arrow_* macro or custom html that is compatible with splide.js.

Random products slider example

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

{% set product = ObjectApi.getProduct(30) %}
{% set product2 = ObjectApi.getProduct(98) %}
{% set product3 = ObjectApi.getProduct(97) %}
{% set product4 = ObjectApi.getProduct(95) %}
{% set product5 = ObjectApi.getProduct(92) %}

{%
    set productsSliderSettings = {
        "mountOnConnectedCallback": true,
        "perPage": 4,
        "perMove": 1,
        "gap": "1.25rem",
        "type": "loop",
        "breakpoints": {
            1440: {
                "perPage": 3
            },
            768: {
                "perPage": 2,
                "gap": "0.5rem",
            }
        }
    }
%}

<h-slider class="splide"settings="{{ productsSliderSettings | json_encode }}">
    {{
        slider_arrow_left({
            isAbsolute: true,
        })
    }}

    <div class="splide__track">
        <ul class="splide__list">
            <li class="splide__slide">
                {{ product_tile(product) }}
            </li>

            <li class="splide__slide">
                {{ product_tile(product2) }}
            </li>

            <li class="splide__slide">
                {{ product_tile(product3) }}
            </li>

            <li class="splide__slide">
                {{ product_tile(product4) }}
            </li>

            <li class="splide__slide">
                {{ product_tile(product5) }}
            </li>
        </ul>
    </div>

    {{
        slider_arrow_right({
            isAbsolute: true,
        })
    }}
</h-slider>