<div class="hero_carousel js-hero-carousel">
<div class="hero_carousel_inner">
<div class="hero_carousel_content">
<div class="js-carousel-embla embla__autoplay-controls" data-carousel-embla='{"loop":true,"autoplay":{"delay":8000,"playOnInit":false,"stopOnMouseEnter":false,"stopOnInteraction":true,"stopOnFocusIn":true},"fade":{}}'>
<div class="embla">
<div id="hero-carousel-viewport-1" class="embla__viewport" data-js="viewport">
<ul class="embla__container" data-js="container">
<li class="embla__slide">
<div class="hero_carousel_item is_type_centered">
<div class="hero_carousel_item_grid">
<div class="hero_carousel_item_grid_item is_media">
<div class="hero_carousel_item_media_wrap">
<picture class="hero_carousel_item_picture">
<div class="hero_carousel_item_image_wrap">
<img class="hero_carousel_item_image" srcset="https://images.fastspot.com/hilbert/300x169/1 300w, https://images.fastspot.com/hilbert/500x282/1 500w, https://images.fastspot.com/hilbert/740x416/1 740w, https://images.fastspot.com/hilbert/980x552/1 980w, https://images.fastspot.com/hilbert/1220x686/1 1220w, https://images.fastspot.com/hilbert/1440x810/1 1440w" sizes="100vw" src="https://images.fastspot.com/hilbert/1440x810/1" alt="" loading="eager" width="1440" height="810">
</div>
</picture>
<div class="hero_carousel_item_lazy_video lazy_video js-video-lazy-load " data-video-lazy-load='{"id":"XPjQhvjQbSM","type":"youtube","title":"Fastspot, Our Methodology","display":"background","autoplay":false,"load_strategy":"none","playerVars":{}}'>
<div class="lazy_video_iframe_wrap">
<div class="lazy_video_iframe_target js-iframe-target"></div>
</div>
</div>
</div>
</div>
<div class="hero_carousel_item_grid_item is_content">
<div class="hero_carousel_item_content">
<div class="fs-row">
<div class="fs-cell">
<div class="hero_carousel_item_content_inner">
<h2 class="hero_carousel_item_title">
Hilbert encourages and empowers students <strong>at all stages for success</strong>
</h2>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="embla__slide">
<div class="hero_carousel_item is_type_staggered">
<div class="hero_carousel_item_grid">
<div class="hero_carousel_item_grid_item is_media">
<div class="hero_carousel_item_media_wrap">
<picture class="hero_carousel_item_picture">
<div class="hero_carousel_item_image_wrap">
<img class="hero_carousel_item_image" srcset="https://images.fastspot.com/hilbert/300x169/2 300w, https://images.fastspot.com/hilbert/500x282/2 500w, https://images.fastspot.com/hilbert/740x416/2 740w, https://images.fastspot.com/hilbert/980x552/2 980w, https://images.fastspot.com/hilbert/1220x686/2 1220w, https://images.fastspot.com/hilbert/1440x810/2 1440w" sizes="100vw" src="https://images.fastspot.com/hilbert/1440x810/2" alt="" loading="eager" width="1440" height="810">
</div>
</picture>
</div>
</div>
<div class="hero_carousel_item_grid_item is_content">
<div class="hero_carousel_item_content">
<div class="fs-row">
<div class="fs-cell">
<div class="hero_carousel_item_content_inner">
<h2 class="hero_carousel_item_title">
cultivating a<br><strong>diverse</strong> community
</h2>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="embla__slide">
<div class="hero_carousel_item is_type_centered">
<div class="hero_carousel_item_grid">
<div class="hero_carousel_item_grid_item is_media">
<div class="hero_carousel_item_media_wrap">
<picture class="hero_carousel_item_picture">
<div class="hero_carousel_item_image_wrap">
<img class="hero_carousel_item_image" srcset="https://images.fastspot.com/hilbert/300x169/3 300w, https://images.fastspot.com/hilbert/500x282/3 500w, https://images.fastspot.com/hilbert/740x416/3 740w, https://images.fastspot.com/hilbert/980x552/3 980w, https://images.fastspot.com/hilbert/1220x686/3 1220w, https://images.fastspot.com/hilbert/1440x810/3 1440w" sizes="100vw" src="https://images.fastspot.com/hilbert/1440x810/3" alt="" loading="eager" width="1440" height="810">
</div>
</picture>
<div class="hero_carousel_item_lazy_video lazy_video js-video-lazy-load " data-video-lazy-load='{"id":"XPjQhvjQbSM","type":"youtube","title":"Fastspot, Our Methodology","display":"background","autoplay":false,"load_strategy":"none","playerVars":{}}'>
<div class="lazy_video_iframe_wrap">
<div class="lazy_video_iframe_target js-iframe-target"></div>
</div>
</div>
</div>
</div>
<div class="hero_carousel_item_grid_item is_content">
<div class="hero_carousel_item_content">
<div class="fs-row">
<div class="fs-cell">
<div class="hero_carousel_item_content_inner">
<h2 class="hero_carousel_item_title">
Non veniam nulla ullamco <strong>eu culpa occaecat aute</strong> ea ullamco aute aliquip et anim qui.
</h2>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="embla__slide">
<div class="hero_carousel_item is_type_staggered">
<div class="hero_carousel_item_grid">
<div class="hero_carousel_item_grid_item is_media">
<div class="hero_carousel_item_media_wrap">
<picture class="hero_carousel_item_picture">
<div class="hero_carousel_item_image_wrap">
<img class="hero_carousel_item_image" srcset="https://images.fastspot.com/hilbert/300x169/4 300w, https://images.fastspot.com/hilbert/500x282/4 500w, https://images.fastspot.com/hilbert/740x416/4 740w, https://images.fastspot.com/hilbert/980x552/4 980w, https://images.fastspot.com/hilbert/1220x686/4 1220w, https://images.fastspot.com/hilbert/1440x810/4 1440w" sizes="100vw" src="https://images.fastspot.com/hilbert/1440x810/4" alt="" loading="eager" width="1440" height="810">
</div>
</picture>
</div>
</div>
<div class="hero_carousel_item_grid_item is_content">
<div class="hero_carousel_item_content">
<div class="fs-row">
<div class="fs-cell">
<div class="hero_carousel_item_content_inner">
<h2 class="hero_carousel_item_title">
<strong>amplifying</strong><br>good in the world
</h2>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
<div class="hero_carousel_meta_grid">
<div class="hero_carousel_meta_grid_item is_pagination">
<div class="embla__controls" aria-controls="hero-carousel-viewport-1">
<div class="embla__dots" data-js="dots" role="navigation"></div>
</div>
</div>
<div class="hero_carousel_meta_grid_item is_toggle_btn" data-js="btn-toggle">
<button type="button" class="hero_carousel_toggle_btn" aria-label="Toggle Slider and Videos" aria-controls="hero-carousel-viewport-1">
<span class="hero_carousel_toggle_btn_icon is_pause" disabled data-type="pause">
<svg class="icon icon_video_pause">
<use href="/images/icons.svg#video_pause" />
</svg>
</span>
<span class="hero_carousel_toggle_btn_icon is_play" data-type="play">
<svg class="icon icon_video_play">
<use href="/images/icons.svg#video_play" />
</svg>
</span>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
{% set carousel_json = {
loop: true,
autoplay: {
delay: 8000,
playOnInit: false,
stopOnMouseEnter: false,
stopOnInteraction: true,
stopOnFocusIn: true
},
fade: {}
}|json_encode %}
{% set uuid_viewport = uniqid("hero-carousel-viewport") %}
<div class="hero_carousel js-hero-carousel">
<div class="hero_carousel_inner">
<div class="hero_carousel_content">
<div class="js-carousel-embla embla__autoplay-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">
{% include "@partial-hero-carousel-item" with {
item: item
} %}
</li>
{% endfor %}
</ul>
</div>
</div>
<div class="hero_carousel_meta_grid">
<div class="hero_carousel_meta_grid_item is_pagination">
<div class="embla__controls" aria-controls="{{ uuid_viewport }}">
<div class="embla__dots" data-js="dots" role="navigation"></div>
</div>
</div>
<div class="hero_carousel_meta_grid_item is_toggle_btn" data-js="btn-toggle">
<button type="button" class="hero_carousel_toggle_btn" aria-label="Toggle Slider and Videos" aria-controls="{{ uuid_viewport }}">
<span class="hero_carousel_toggle_btn_icon is_pause" disabled data-type="pause">
{{ icon("video_pause")}}
</span>
<span class="hero_carousel_toggle_btn_icon is_play" data-type="play">
{{ icon("video_play")}}
</span>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
No notes defined.