Photo Slider

The photo-slider is responsible for adding dynamic progress bar and custom pagination to h-slider webcomponent. It is used to create Photo Slider module.

Example

<photo-slider name="photo-slider" class="photo-slider">
    <h-slider id="photo-slider" class="splide">
        <div class="splide__track">
            <ul class="splide__list">
                <li class="splide__slide photo-slider__slide">
                    Slide 1
                </li>

                <li class="splide__slide photo-slider__slide">
                    Slide 2
                </li>

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

        <div class="photo-slider__progress">
            <div class="photo-slider__progress-bar"></div>
        </div>

        <div class="splide__arrows photo-slider__arrows">
            <div class="slider__arrow slider__arrow_left">
                <button class="splide__arrow splide__arrow--prev slider__arrow_absolute slider__arrow_absolute-left">          
                    <svg class="icon>
                        <use xlink:href="/assets/img/icons/symbol-defs.svg#icon-chevron-left"></use>
                    </svg>
                </button>
            </div>

            <div class="photo-slider__pagination">
                <span class="photo-slider__pagination-current"></span>/
                <span class="photo-slider__pagination-length"></span>
            </div>

            <div class="slider__arrow slider__arrow_right ">
                <button class="splide__arrow splide__arrow--next slider__arrow_absolute slider__arrow_absolute-right">
                    <svg class="icon">
                        <use xlink:href="/assets/img/icons/symbol-defs.svg#icon-chevron-right"></use>
                    </svg>
                </button>
            </div>
        </div>
    </h-slider>
</photo-slider>

Attributes

Attribute name	Type	Description
name	string	unique ID of the slider