Hilbert Component Library

Values Carousel 

<div class="values_carousel js-values-carousel">
    <div class="values_carousel_inner">
        <div class="js-carousel-embla embla__overlay-controls" data-carousel-embla='{"loop":true,"autoplay":{"delay":4000,"playOnInit":false,"stopOnMouseEnter":false,"stopOnInteraction":true,"stopOnFocusIn":true}}'>
            <div class="embla">
                <div id="values-carousel-viewport-3" class="embla__viewport" data-js="viewport">
                    <ul class="embla__container" data-js="container">
                    </ul>
                </div>

                <div class="embla__controls" aria-controls="values-carousel-viewport-3">
                    <button class="embla__button embla__button--prev" type="button" data-js="btn-prev" aria-label="Previous Slide">
                        <div class="embla__button-inner">
                            <svg class="icon icon_arrow_carousel_left">
                                <use href="/images/icons.svg#arrow_carousel_left" />
                            </svg>
                        </div>
                    </button>

                    <button class="embla__button embla__button--next" type="button" data-js="btn-next" aria-label="Next Slide">
                        <div class="embla__button-inner">
                            <svg class="icon icon_arrow_carousel_right">
                                <use href="/images/icons.svg#arrow_carousel_right" />
                            </svg>
                        </div>
                    </button>
                </div>

                <div class="values_carousel_toggle_btn_wrap">
                    <button type="button" class="values_carousel_toggle_btn" aria-label="Toggle Slider and Videos" aria-controls="values-carousel-viewport-3" data-js="btn-toggle">
                        <span class="values_carousel_toggle_btn_icon is_pause" disabled data-type="pause">
                            <svg class="icon icon_video_pause_alt">
                                <use href="/images/icons.svg#video_pause_alt" />
                            </svg>
                        </span>

                        <span class="values_carousel_toggle_btn_icon is_play" data-type="play">
                            <svg class="icon icon_video_play_alt">
                                <use href="/images/icons.svg#video_play_alt" />
                            </svg>
                        </span>
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>
 
{% set uuid_viewport = uniqid("values-carousel-viewport") %}
{% set carousel_json = {
	loop: true,
	autoplay: {
		delay: 4000,
		playOnInit: false,
		stopOnMouseEnter: false,
		stopOnInteraction: true,
		stopOnFocusIn: true
	}
}|json_encode %}

<div class="values_carousel js-values-carousel">
	<div class="values_carousel_inner">
		<div class="js-carousel-embla embla__overlay-controls" data-carousel-embla='{{ carousel_json }}'>
			<div class="embla">
				<div id="{{ uuid_viewport }}" class="embla__viewport" data-js="viewport">
					<ul class="embla__container" data-js="container">
						{% for item in items %}
							<li class="embla__slide">
								<div class="values_carousel_item">
									<h3 class="values_carousel_title">{{ item.title }}</h3>

									<div class="values_carousel_duration_bar"></div>
									
									<div class="values_carousel_desc">
										<p>{{ item.description }}</p>
									</div>
								</div>
							</li>
						{% endfor %}
					</ul>
				</div>

				<div class="embla__controls" aria-controls="{{ uuid_viewport }}">
					<button class="embla__button embla__button--prev" type="button" data-js="btn-prev" aria-label="Previous Slide">
						<div class="embla__button-inner">
							{{ icon("arrow_carousel_left") }}
						</div>
					</button>

					<button class="embla__button embla__button--next" type="button" data-js="btn-next" aria-label="Next Slide">
						<div class= "embla__button-inner">
							{{ icon("arrow_carousel_right") }}
						</div>
					</button>
				</div>

				<div class="values_carousel_toggle_btn_wrap">
					<button type="button" class="values_carousel_toggle_btn" aria-label="Toggle Slider and Videos" aria-controls="{{ uuid_viewport }}" data-js="btn-toggle">
						<span class="values_carousel_toggle_btn_icon is_pause" disabled data-type="pause">
							{{ icon("video_pause_alt")}}
						</span>

						<span class="values_carousel_toggle_btn_icon is_play" data-type="play">
							{{ icon("video_play_alt")}}
						</span>
					</button>
				</div>
			</div>
		</div>
	</div>
</div>

No notes defined.