<!-- Testimonial -->
<div class="callout_carousel">
<div class="fs-row">
<div class="fs-cell">
<div class="callout_carousel_inner">
<div class="js-carousel callout_carousel_items" data-carousel-options='{"contained":false,"controls":true,"single":true,"pagination":false}'>
<div class="callout_carousel_item">
<h2 class="callout_carousel_item_title">Featured Season or Series Title Lorem Ipsum</h2>
<div class="callout_carousel_item_action">
<a href="#" class="callout_carousel_item_link">
<span class="callout_carousel_item_link_inner">
<span class="callout_carousel_item_link_label">Call to Action</span>
<span class="callout_carousel_item_link_icon" aria-hidden="true">
<svg class="icon icon_arrow_out">
<use href="/images/icons.svg#arrow_out" />
</svg>
</span>
</span>
</a>
</div>
<div class="callout_carousel_item_media">
<picture class="callout_carousel_item_picture">
<source media="(min-width: 1394px)" srcset="https://images.fastspot.com/fim/980x654/1" width="980" height="654">
<source media="(min-width: 1220px)" srcset="https://images.fastspot.com/fim/980x980/1" width="980" height="980">
<source media="(min-width: 980px)" srcset="https://images.fastspot.com/fim/735x980/1" width="735" height="980">
<source media="(min-width: 500px)" srcset="https://images.fastspot.com/fim/740x494/1" width="740" height="494">
<source media="(min-width: 0px)" srcset="https://images.fastspot.com/fim/500x334/1" width="500" height="334">
<img class="callout_carousel_item_image" src="//images.fastspot.com/fim/x/1" alt="" loading="lazy" width="" height="">
</picture>
</div>
<span class="callout_carousel_item_index">1 of 3
</div>
<div class="callout_carousel_item">
<h2 class="callout_carousel_item_title">Alligators Zebras and a Hippo to Love</h2>
<div class="callout_carousel_item_action">
<a href="#" class="callout_carousel_item_link">
<span class="callout_carousel_item_link_inner">
<span class="callout_carousel_item_link_label">Buy Tickets</span>
<span class="callout_carousel_item_link_icon" aria-hidden="true">
<svg class="icon icon_arrow_out">
<use href="/images/icons.svg#arrow_out" />
</svg>
</span>
</span>
</a>
</div>
<div class="callout_carousel_item_media">
<picture class="callout_carousel_item_picture">
<source media="(min-width: 1394px)" srcset="https://images.fastspot.com/fim/980x654/2" width="980" height="654">
<source media="(min-width: 1220px)" srcset="https://images.fastspot.com/fim/980x980/2" width="980" height="980">
<source media="(min-width: 980px)" srcset="https://images.fastspot.com/fim/735x980/2" width="735" height="980">
<source media="(min-width: 500px)" srcset="https://images.fastspot.com/fim/740x494/2" width="740" height="494">
<source media="(min-width: 0px)" srcset="https://images.fastspot.com/fim/500x334/2" width="500" height="334">
<img class="callout_carousel_item_image" src="//images.fastspot.com/fim/x/2" alt="" loading="lazy" width="" height="">
</picture>
</div>
<span class="callout_carousel_item_index">2 of 3
</div>
<div class="callout_carousel_item">
<h2 class="callout_carousel_item_title">Gravity Falls</h2>
<div class="callout_carousel_item_action">
<a href="#" class="callout_carousel_item_link">
<span class="callout_carousel_item_link_inner">
<span class="callout_carousel_item_link_label">Learn More</span>
<span class="callout_carousel_item_link_icon" aria-hidden="true">
<svg class="icon icon_arrow_out">
<use href="/images/icons.svg#arrow_out" />
</svg>
</span>
</span>
</a>
</div>
<div class="callout_carousel_item_media">
<picture class="callout_carousel_item_picture">
<source media="(min-width: 1394px)" srcset="https://images.fastspot.com/fim/980x654/4" width="980" height="654">
<source media="(min-width: 1220px)" srcset="https://images.fastspot.com/fim/980x980/4" width="980" height="980">
<source media="(min-width: 980px)" srcset="https://images.fastspot.com/fim/735x980/4" width="735" height="980">
<source media="(min-width: 500px)" srcset="https://images.fastspot.com/fim/740x494/4" width="740" height="494">
<source media="(min-width: 0px)" srcset="https://images.fastspot.com/fim/500x334/4" width="500" height="334">
<img class="callout_carousel_item_image" src="//images.fastspot.com/fim/x/4" alt="" loading="lazy" width="" height="">
</picture>
</div>
<span class="callout_carousel_item_index">3 of 3
</div>
</div>
</div>
</div>
</div>
</div>
<!-- END: Testimonial -->
{#
{% include '@component-testimonial' with {
quote: '"Quote"',
name: 'Name',
job_title: 'Job Title',
image: '1'
} %}
#}
{%
set carousel_options = {
contained: false,
controls: true,
single: true,
pagination: false
}
%}
{% set carousel_options = carousel_options|json_encode %}
<!-- Testimonial -->
<div class="callout_carousel">
<div class="fs-row">
<div class="fs-cell">
<div class="callout_carousel_inner">
<div class="js-carousel callout_carousel_items" data-carousel-options='{{ carousel_options }}'>
{% for item in items %}
<div class="callout_carousel_item">
<h2 class="callout_carousel_item_title">{{ item.title }}</h2>
<div class="callout_carousel_item_action">
{% include '@partial-link' with {
class: 'callout_carousel_item',
title: item.link.label,
url: item.link.url,
icon: 'arrow_out',
aria: item.link.aria
} %}
</div>
<div class="callout_carousel_item_media">
{% include '@partial-picture' with {
class: 'callout_carousel_item',
alt: '',
image: item.image,
loading: 'lazy',
sources: {
'1394px': img.classic.med,
'1220px': img.square.med,
'980px': img.portraitFull.med,
'500px': img.classic.sml,
'0px': img.classic.xsml,
}
} %}
</div>
<span class="callout_carousel_item_index">{{ loop.index }} of {{ items|length }}
</div>
{% endfor %}
</div>
</div>
</div>
</div>
</div>
<!-- END: Testimonial -->
No notes defined.