<div class="media_slider component_has_radius component_has_bg_media">
<div class="media_slider_wrap">
<header class="media_slider_header">
<div class="fs-row fs-lg-justify-center">
<div class="fs-cell fs-lg-8">
<div class="media_slider_header_inner">
<h2 class="media_slider_title">
Gallery Header
</h2>
<div class="media_slider_desc">
<p> Optional description. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Curabitur blandit tempus porttitor.</p>
</div>
</div>
</div>
</div>
</header>
<div class="media_slider_content">
<div class="fs-row">
<div class="fs-cell">
<div class="media_slider_content_inner">
<div class="embla embla__default-controls embla__default-progress js-carousel-embla" data-carousel-embla='{"loop":false}'>
<div class="embla__viewport" data-js="viewport">
<ul class="embla__container" data-js="container">
<li class="embla__slide embla__slide--type-video">
<div class="media_slider_item">
<div class="media_slider_item">
<div class="media_slider_item_media">
<picture class="media_slider_item_picture">
<img class="media_slider_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" sizes="(min-width: 1220px) 870px, (min-width: 980px) 920px, (min-width: 740px) 690px, 95vw" src="https://images.fastspot.com/hilbert/980x552/1" alt="" loading="lazy" width="980" height="552">
</picture>
<div class="media_slider_item_lazy_video lazy_video js-video-lazy-load " data-video-lazy-load='{"id":"XPjQhvjQbSM","type":"youtube","title":"Fastspot, Our Methodology","display":"inline","autoplay":false,"load_strategy":"intersect","playerVars":{}}'>
<a class="lazy_video_toggle_btn js-play-btn" href="https://www.youtube.com/watch?v=XPjQhvjQbSM" aria-label="Play Fastspot, Our Methodology">
<span class="lazy_video_toggle_btn_label">Watch Video</span>
<span class="lazy_video_toggle_btn_icon"><svg class="icon icon_video_play_alt">
<use href="/images/icons.svg#video_play_alt" />
</svg></span>
</a>
<div class="lazy_video_iframe_wrap">
<div class="lazy_video_iframe_target js-iframe-target"></div>
</div>
</div>
</div>
<div class="media_slider_item_caption">
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Curabitur blandit tempus porttitor. Etiam porta sem malesuada magna mollis euismod. Donec <a href="#">ullamcorper nulla non metus auctor fringilla</a>.</p>
</div>
</div>
</div>
</li>
<li class="embla__slide embla__slide--type-image">
<div class="media_slider_item">
<div class="media_slider_item">
<div class="media_slider_item_media">
<picture class="media_slider_item_picture">
<img class="media_slider_item_image" srcset="https://images.fastspot.com/hilbert/225x300/2 225w, https://images.fastspot.com/hilbert/375x500/2 375w, https://images.fastspot.com/hilbert/555x740/2 555w, https://images.fastspot.com/hilbert/735x980/2 735w" sizes="(min-width: 1220px) 425px, (min-width: 980px) 450px, (min-width: 740px) 690px, 95vw" src="https://images.fastspot.com/hilbert/735x980/2" alt="" loading="lazy" width="735" height="980">
</picture>
</div>
<div class="media_slider_item_caption">
<p>Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus.</p>
</div>
</div>
</div>
</li>
<li class="embla__slide embla__slide--type-video">
<div class="media_slider_item">
<div class="media_slider_item">
<div class="media_slider_item_media">
<picture class="media_slider_item_picture">
<img class="media_slider_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" sizes="(min-width: 1220px) 870px, (min-width: 980px) 920px, (min-width: 740px) 690px, 95vw" src="https://images.fastspot.com/hilbert/980x552/3" alt="" loading="lazy" width="980" height="552">
</picture>
<div class="media_slider_item_lazy_video lazy_video js-video-lazy-load " data-video-lazy-load='{"id":"XPjQhvjQbSM","type":"youtube","title":"Fastspot, Our Methodology","display":"inline","autoplay":false,"load_strategy":"intersect","playerVars":{}}'>
<a class="lazy_video_toggle_btn js-play-btn" href="https://www.youtube.com/watch?v=XPjQhvjQbSM" aria-label="Play Fastspot, Our Methodology">
<span class="lazy_video_toggle_btn_label">Watch Video</span>
<span class="lazy_video_toggle_btn_icon"><svg class="icon icon_video_play_alt">
<use href="/images/icons.svg#video_play_alt" />
</svg></span>
</a>
<div class="lazy_video_iframe_wrap">
<div class="lazy_video_iframe_target js-iframe-target"></div>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="embla__slide embla__slide--type-video">
<div class="media_slider_item">
<div class="media_slider_item">
<div class="media_slider_item_media">
<picture class="media_slider_item_picture">
<img class="media_slider_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" sizes="(min-width: 1220px) 870px, (min-width: 980px) 920px, (min-width: 740px) 690px, 95vw" src="https://images.fastspot.com/hilbert/980x552/4" alt="" loading="lazy" width="980" height="552">
</picture>
<div class="media_slider_item_lazy_video lazy_video js-video-lazy-load " data-video-lazy-load='{"id":"XPjQhvjQbSM","type":"youtube","title":"Fastspot, Our Methodology","display":"inline","autoplay":false,"load_strategy":"intersect","playerVars":{}}'>
<a class="lazy_video_toggle_btn js-play-btn" href="https://www.youtube.com/watch?v=XPjQhvjQbSM" aria-label="Play Fastspot, Our Methodology">
<span class="lazy_video_toggle_btn_label">Watch Video</span>
<span class="lazy_video_toggle_btn_icon"><svg class="icon icon_video_play_alt">
<use href="/images/icons.svg#video_play_alt" />
</svg></span>
</a>
<div class="lazy_video_iframe_wrap">
<div class="lazy_video_iframe_target js-iframe-target"></div>
</div>
</div>
</div>
<div class="media_slider_item_caption">
<p>Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus.</p>
</div>
</div>
</div>
</li>
<li class="embla__slide embla__slide--type-image">
<div class="media_slider_item">
<div class="media_slider_item">
<div class="media_slider_item_media">
<picture class="media_slider_item_picture">
<img class="media_slider_item_image" srcset="https://images.fastspot.com/hilbert/225x300/5 225w, https://images.fastspot.com/hilbert/375x500/5 375w, https://images.fastspot.com/hilbert/555x740/5 555w, https://images.fastspot.com/hilbert/735x980/5 735w" sizes="(min-width: 1220px) 425px, (min-width: 980px) 450px, (min-width: 740px) 690px, 95vw" src="https://images.fastspot.com/hilbert/735x980/5" alt="" loading="lazy" width="735" height="980">
</picture>
</div>
<div class="media_slider_item_caption">
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Curabitur blandit tempus porttitor. Etiam porta sem malesuada magna mollis euismod. Donec <a href="#">ullamcorper nulla non metus auctor fringilla</a>.</p>
</div>
</div>
</div>
</li>
<li class="embla__slide embla__slide--type-image">
<div class="media_slider_item">
<div class="media_slider_item">
<div class="media_slider_item_media">
<picture class="media_slider_item_picture">
<img class="media_slider_item_image" srcset="https://images.fastspot.com/hilbert/225x300/6 225w, https://images.fastspot.com/hilbert/375x500/6 375w, https://images.fastspot.com/hilbert/555x740/6 555w, https://images.fastspot.com/hilbert/735x980/6 735w" sizes="(min-width: 1220px) 425px, (min-width: 980px) 450px, (min-width: 740px) 690px, 95vw" src="https://images.fastspot.com/hilbert/735x980/6" alt="" loading="lazy" width="735" height="980">
</picture>
</div>
<div class="media_slider_item_caption">
<p>Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus.</p>
</div>
</div>
</div>
</li>
</ul>
</div>
<div class="embla__controls" aria-controls="">
<button class="embla__button embla__button--prev" type="button" data-js="btn-prev" aria-label="Previous Slide">
<svg class="icon icon_arrow_carousel_left">
<use href="/images/icons.svg#arrow_carousel_left" />
</svg>
</button>
<button class="embla__button embla__button--next" type="button" data-js="btn-next" aria-label="Next Slide">
<svg class="icon icon_arrow_carousel_right">
<use href="/images/icons.svg#arrow_carousel_right" />
</svg>
</button>
</div>
<div class="embla__progress">
<div class="embla__progress__bar" data-js="progress-bar"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
{% set carousel_json = {
loop: false
}|json_encode %}
<div class="media_slider component_has_radius component_has_bg_media">
<div class="media_slider_wrap">
<header class="media_slider_header">
<div class="fs-row fs-lg-justify-center">
<div class="fs-cell fs-lg-8">
<div class="media_slider_header_inner">
<h2 class="media_slider_title">
{{ title }}
</h2>
{% if description %}
<div class="media_slider_desc">
<p>{{ description }}</p>
</div>
{% endif %}
</div>
</div>
</div>
</header>
<div class="media_slider_content">
<div class="fs-row">
<div class="fs-cell">
<div class="media_slider_content_inner">
<div class="embla embla__default-controls embla__default-progress js-carousel-embla" data-carousel-embla='{{ carousel_json }}'>
<div class="embla__viewport" data-js="viewport">
<ul class="embla__container" data-js="container">
{% for item in items %}
{% set type = item.video.id ? 'video' : 'image' %}
<li class="embla__slide embla__slide--type-{{ type }}">
<div class="media_slider_item">
{% include "@partial-media-slider-item" with {
item: item
} %}
</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">
{{ icon("arrow_carousel_left") }}
</button>
<button class="embla__button embla__button--next" type="button" data-js="btn-next" aria-label="Next Slide">
{{ icon("arrow_carousel_right") }}
</button>
</div>
<div class="embla__progress">
<div class="embla__progress__bar" data-js="progress-bar"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
No notes defined.