Product Gallery¶

This webcomponent is responsible for syncing two separate h-slider webcomponents. It is used to create Product Gallery module. Syncing sliders means moving one sliders moves the other slider.

Note: This webcomponent use specific css classes and settings to adjust how the gallery is displayed. You may use your own classes or settings, to change that behaviour.

Attributes¶

Attribute name	Type	Description
main	string	ID of the main slider
thumbnails	string	ID of the thumbnails slider

Event Bus events¶

This webcomponent listens to the following events with the Event Bus:

product.stockChanged

Example¶

<product-gallery main="main-slider" thumbnails="thumbnails-slider" class="product-gallery">
    <h-slider id="main-slider">
        <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>
    </h-slider>

    <h-slider id="thumbnails-slider">
        <ul class="splide__list">
            <li class="splide__slide">
                Slide 1 thumbnail
            </li>

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

            <li class="splide__slide">
                Slide 3 thumbnail
            </li>
        </ul>
    </h-slider>
</product-gallery>