<div class="c-image-gallery" data-bkg-theme="">
<div class="c-image-gallery__wrapper o-container">
<div class="o-row c-image-gallery__header">
<h2 class="c-image-gallery__title f-title--h3 o-col o-col-8" id="small-content-carousel-995">Exhibit Highlights</h2>
<div class="c-image-gallery__slides-nav swiper-button-row o-col o-col-4">
<button class="swiper-button-prev o-btn o-btn--round">
<span class="u-sr-only">Next</span>
<span class="o-btn__icon-center o-btn__icon-180" aria-hidden="true"><svg width="21" height="16" viewBox="0 0 21 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path class="u-ct-stroke" d="M0 8L20 8" />
<path class="u-ct-stroke" d="M13 1L20 8L13 15" />
</svg>
</span>
</button>
<button class="swiper-button-next o-btn o-btn--round">
<span class="u-sr-only">Next</span>
<span class="o-btn__icon-center" aria-hidden="true"><svg width="21" height="16" viewBox="0 0 21 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path class="u-ct-stroke" d="M0 8L20 8" />
<path class="u-ct-stroke" d="M13 1L20 8L13 15" />
</svg>
</span>
</button>
</div>
</div>
<div class="c-image-gallery__slides-wrapper swiper-container">
<ul class="c-image-gallery__slides swiper-wrapper" aria-labelledby="small-content-carousel-995">
<li class="c-image-gallery__slide swiper-slide">
<div class="c-image-gallery__image">
<img src="https://source.unsplash.com/collection/4761698/1" alt="random unsplash image" />
</div>
<div class="c-image-gallery__image-info">
<p class="c-image-gallery__caption f-text--caption">Lorem ipsum dolor set amet</p>
<p class="c-image-gallery__credit f-text--credit">Lorem ipsum dolor set amet</p>
</div>
</li>
<li class="c-image-gallery__slide swiper-slide">
<div class="c-image-gallery__image">
<img src="https://source.unsplash.com/collection/4761698/2" alt="random unsplash image" />
</div>
<div class="c-image-gallery__image-info">
<p class="c-image-gallery__caption f-text--caption">Lorem ipsum dolor set amet</p>
</div>
</li>
<li class="c-image-gallery__slide swiper-slide">
<div class="c-image-gallery__image">
<img src="https://source.unsplash.com/collection/4761698/3" alt="random unsplash image" />
</div>
<div class="c-image-gallery__image-info">
<p class="c-image-gallery__credit f-text--credit"></p>
</div>
</li>
<li class="c-image-gallery__slide swiper-slide">
<div class="c-image-gallery__image">
<img src="https://source.unsplash.com/collection/4761698/4" alt="random unsplash image" />
</div>
</li>
<li class="c-image-gallery__slide swiper-slide">
<div class="c-image-gallery__image">
<img src="https://source.unsplash.com/collection/4761698/5" alt="random unsplash image" />
</div>
<div class="c-image-gallery__image-info">
<p class="c-image-gallery__caption f-text--caption">Lorem ipsum dolor set amet</p>
<p class="c-image-gallery__credit f-text--credit">Lorem ipsum dolor set amet</p>
</div>
</li>
</ul>
</div>
</div>
</div>
{% set panelColorTheme = panelColorTheme ? panelColorTheme : 'base' %}
{% set hID = 'small-content-carousel-' ~ random(5000) %}
{% set hClass = hiddenTitle ? 'u-sr-only' : 'c-image-gallery__title f-title--h3 o-col o-col-8' %}
{% set btnColClass = hiddenTitle ? 'o-col-4 o-col--offset-8' : 'o-col-4' %}
<div class="c-image-gallery" data-bkg-theme="{{ panelColorTheme }}">
<div class="c-image-gallery__wrapper o-container">
<div class="o-row c-image-gallery__header">
<h2 class="{{ hClass }}" id="{{ hID}}">{{ title }}</h2>
<div class="c-image-gallery__slides-nav swiper-button-row o-col {{ btnColClass }}">
<button class="swiper-button-prev o-btn o-btn--round">
<span class="u-sr-only">Next</span>
<span class="o-btn__icon-center o-btn__icon-180" aria-hidden="true">{% include "03/icons/arrow-slider" %}</span>
</button>
<button class="swiper-button-next o-btn o-btn--round">
<span class="u-sr-only">Next</span>
<span class="o-btn__icon-center" aria-hidden="true">{% include "03/icons/arrow-slider" %}</span>
</button>
</div>
</div>
<div class="c-image-gallery__slides-wrapper swiper-container">
<ul class="c-image-gallery__slides swiper-wrapper" aria-labelledby="{{ hID }}">
{% for slide in slides %}
<li class="c-image-gallery__slide swiper-slide">
<div class="c-image-gallery__image">
{{ slide.image|raw }}
</div>
{% if slide.caption or slide.credit %}
<div class="c-image-gallery__image-info">
{% if slide.caption %}
<p class="c-image-gallery__caption f-text--caption">{{ slide.caption }}</p>
{% endif %}
{% if slide.credit %}
<p class="c-image-gallery__credit f-text--credit">{{ slide.caption }}</p>
{% endif %}
</div>
{% endif %}
</li>
{% endfor %}
</ul>
</div>
</div>
</div>
{
"pageColorTheme": "teal",
"title": "Exhibit Highlights",
"slides": [
{
"image": "<img src=\"https://source.unsplash.com/collection/4761698/1\" alt=\"random unsplash image\" />",
"caption": "Lorem ipsum dolor set amet",
"credit": "Image credit"
},
{
"image": "<img src=\"https://source.unsplash.com/collection/4761698/2\" alt=\"random unsplash image\" />",
"caption": "Lorem ipsum dolor set amet"
},
{
"image": "<img src=\"https://source.unsplash.com/collection/4761698/3\" alt=\"random unsplash image\" />",
"credit": "Image credit"
},
{
"image": "<img src=\"https://source.unsplash.com/collection/4761698/4\" alt=\"random unsplash image\" />"
},
{
"image": "<img src=\"https://source.unsplash.com/collection/4761698/5\" alt=\"random unsplash image\" />",
"caption": "Lorem ipsum dolor set amet",
"credit": "Image credit"
}
]
}
.c-image-gallery {
margin: 8rem 0;
overflow: hidden;
@include break($sm){
margin: 10rem 0;
}
&[data-bkg-theme="light"] {
margin-top: 0;
padding-top: 8rem;
@include break($sm){
margin-top: 0;
padding-top: 10rem;
margin-bottom: 0;
padding-bottom: 10rem;
}
}
}
.c-image-gallery__slides-wrapper {
overflow: visible;
}
.c-image-gallery__header {
margin-bottom: 5.4rem;
}
.c-image-gallery__slides-nav {
justify-content: flex-end;
}
.c-image-gallery__slide {
max-width: 80%;
width: auto;
}
.c-image-gallery__image {
display: inline-block;
img {
max-height: 80vh;
object-fit: contain;
@include break($sm-md) {
max-height: 60rem;
}
@include break($md) {
max-height: 70rem;
}
}
}
.c-image-gallery__image-info {
margin-top: 2rem;
}
.c-image-gallery__caption + .c-image-gallery__credit {
margin-top: 0.3rem;
}
No notes defined.