<section class="history-carousel" data-carousel>
<div class="history-carousel__slides" data-slides-wrapper-element>
</div>
<div class="history-carousel__navigation">
<button class="history-carousel__controls-previous" data-carousel-controls-previous>
<span class="history-carousel__controls-label">Go to previous slide</span>
<span class="history-carousel__controls-icon-previous"><svg class="left-chevron" xmlns="http://www.w3.org/2000/svg" width="8" height="16" viewBox="0 0 8 16">
<path class="_mark left-chevron__shape" fill="#E84A27" fill-rule="nonzero" d="M7.768 1.65c.346-.419.3-1.05-.104-1.41a.937.937 0 0 0-1.356.11L0 8l6.308 7.65a.937.937 0 0 0 1.356.11c.403-.36.45-.991.104-1.41L2.534 8l5.234-6.35z"/>
</svg>
</span>
</button>
<ul class="history-carousel__indicators">
</ul>
<button class="history-carousel__controls-next" data-carousel-controls-next>
<span class="history-carousel__controls-label">Go to next slide</span>
<span class="history-carousel__controls-icon-next"><svg class="right-chevron" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="8" height="16" viewBox="0 0 8 16">
<path class="_mark right-chevron__shape" fill="#FF552E" fill-rule="nonzero" d="M.232 1.65A1.028 1.028 0 0 1 .336.24a.937.937 0 0 1 1.356.11L8 8l-6.308 7.65a.937.937 0 0 1-1.356.11c-.403-.36-.45-.991-.104-1.41L5.466 8 .232 1.65z"/>
</svg>
</span>
</button>
</div>
</section>
{% import "bits/macros/imageSource.twig" as imageMacros %}
<section class="history-carousel" data-carousel>
<div class="history-carousel__slides" data-slides-wrapper-element>
{% for slide in slides %}
<div class="history-carousel-slide" data-slide data-is-current-slide="{{ loop.first ? 'true' : 'false' }}">
<div class="history-carousel-item__image-container">
{{ imageMacros.createAlwaysFullWidth(slide.image, 1600, 1120, background) }}
</div>
<div class="history-carousel-item__text-wrap">
<div class="history-carousel-item__text-container">
<div class="history-carousel-item__text-content">
<div class="history-carousel-item__caption">
{{ slide.heading }}
</div>
<div class="history-carousel-item__description">
{{ slide.description | raw }}
</div>
</div>
</div>
</div>
</div>
{% endfor %}
</div>
<div class="history-carousel__navigation">
<button class="history-carousel__controls-previous" data-carousel-controls-previous>
<span class="history-carousel__controls-label">Go to previous slide</span>
<span class="history-carousel__controls-icon-previous">{% include 'bits/icons/left-chevron.twig' %}</span>
</button>
<ul class="history-carousel__indicators">
{% for slide in slides %}
<li class="history-carousel__indicator-wrap" data-carousel-indicator
data-is-indicator-active="{{ loop.first ? 'true' : 'false' }}">
<button class="history-carousel__indicator">
<span
class="history-carousel__indicator-text">Go to slide number {{ loop.index }}: {{ slide.image.heading }}</span>
</button>
</li>
{% endfor %}
</ul>
<button class="history-carousel__controls-next" data-carousel-controls-next>
<span class="history-carousel__controls-label">Go to next slide</span>
<span class="history-carousel__controls-icon-next">{% include 'bits/icons/right-chevron.twig' %}</span>
</button>
</div>
</section>
{
"siteUnit": "network",
"departmentName": "Network",
"background": "light"
}
module.exports = {
status: 'ready',
context: {
item: {
image: {
src: 'https://picsum.photos/1488/1040?random=1',
alt: 'A cute kitten',
},
}
}
};
There are no notes for this item.