<section class="container image-gallery">
<h3 class="image-gallery__heading">England's Euro 2020 adventure in pictures</h3>
<div class="container__content">
<div class="carousel-container">
<div class="carousel" data-behavior="carousel-image-gallery">
<div data-glide-el="track">
<ul class="glide__slides">
<li>
<a class="image-gallery__link">
<img class="image-gallery__img" src="/assets/example-content/example-carousel-image-01.png" alt="">
<div class="image-gallery__caption">England 1-0 Croatia, June 13, 2021 - England started their Euro 2020 campaign by righting a few wrongs, with Raheem Sterling sealing an opening-day victory over 2018 World Cup conquerors Croatia at a jubilant Wembley.Photo by Glyn Kirk/Pool/AFP via Getty Images</div>
</a>
</li>
<li>
<a class="image-gallery__link">
<img class="image-gallery__img" src="/assets/example-content/example-carousel-image-02.png" alt="">
<div class="image-gallery__caption">England 1-0 Croatia, June 13, 2021 - England started their Euro 2020 campaign by righting a few wrongs, with Raheem Sterling sealing an opening-day victory over 2018 World Cup conquerors Croatia at a jubilant Wembley.Photo by Glyn Kirk/Pool/AFP via Getty Images</div>
</a>
</li>
<li>
<a class="image-gallery__link">
<img class="image-gallery__img" src="/assets/example-content/example-carousel-image-03.png" alt="">
<div class="image-gallery__caption">England 1-0 Croatia, June 13, 2021 - England started their Euro 2020 campaign by righting a few wrongs, with Raheem Sterling sealing an opening-day victory over 2018 World Cup conquerors Croatia at a jubilant Wembley.Photo by Glyn Kirk/Pool/AFP via Getty Images</div>
</a>
</li>
<li>
<a class="image-gallery__link">
<img class="image-gallery__img" src="/assets/example-content/example-carousel-image-04.png" alt="">
<div class="image-gallery__caption">England 1-0 Croatia, June 13, 2021 - England started their Euro 2020 campaign by righting a few wrongs, with Raheem Sterling sealing an opening-day victory over 2018 World Cup conquerors Croatia at a jubilant Wembley.Photo by Glyn Kirk/Pool/AFP via Getty Images</div>
</a>
</li>
<li>
<a class="image-gallery__link">
<img class="image-gallery__img" src="/assets/example-content/example-carousel-image-05.png" alt="">
<div class="image-gallery__caption">England 1-0 Croatia, June 13, 2021 - England started their Euro 2020 campaign by righting a few wrongs, with Raheem Sterling sealing an opening-day victory over 2018 World Cup conquerors Croatia at a jubilant Wembley.Photo by Glyn Kirk/Pool/AFP via Getty Images</div>
</a>
</li>
<li>
<a class="image-gallery__link">
<img class="image-gallery__img" src="/assets/example-content/example-carousel-image-06.png" alt="">
<div class="image-gallery__caption">England 1-0 Croatia, June 13, 2021 - England started their Euro 2020 campaign by righting a few wrongs, with Raheem Sterling sealing an opening-day victory over 2018 World Cup conquerors Croatia at a jubilant Wembley.Photo by Glyn Kirk/Pool/AFP via Getty Images</div>
</a>
</li>
<li>
<a class="image-gallery__link">
<img class="image-gallery__img" src="/assets/example-content/example-carousel-image-05.png" alt="">
<div class="image-gallery__caption">England 1-0 Croatia, June 13, 2021 - England started their Euro 2020 campaign by righting a few wrongs, with Raheem Sterling sealing an opening-day victory over 2018 World Cup conquerors Croatia at a jubilant Wembley.Photo by Glyn Kirk/Pool/AFP via Getty Images</div>
</a>
</li>
</ul>
</div>
<div class="image-gallery__navigation" data-glide-el="controls">
<button aria-label="Previous" class="image-gallery__cta image-gallery__cta--prev" data-glide-dir="<"><span class="visually-hidden">Previous
page</span><svg fill="none" viewBox="0 0 10 17" xmlns="http://www.w3.org/2000/svg">
<path d="m9.2722 9.3355-6.75 6.75c-0.46089 0.4609-1.2087 0.4609-1.6706 0-0.46089-0.4609-0.46089-1.2097 0-1.6706l5.9146-5.9146-5.9146-5.9146c-0.46089-0.46089-0.46089-1.2097 0-1.6706 0.46194-0.46089 1.2097-0.46089 1.6706 0l6.75 6.75c0.46194 0.46089 0.46194 1.2097 0 1.6706v-1.4e-4z" fill="currentColor" />
</svg></button>
<button aria-label="Next" class="image-gallery__cta image-gallery__cta--next" data-glide-dir=">"><span class="visually-hidden">Next
page</span><svg fill="none" viewBox="0 0 10 17" xmlns="http://www.w3.org/2000/svg">
<path d="m9.2722 9.3355-6.75 6.75c-0.46089 0.4609-1.2087 0.4609-1.6706 0-0.46089-0.4609-0.46089-1.2097 0-1.6706l5.9146-5.9146-5.9146-5.9146c-0.46089-0.46089-0.46089-1.2097 0-1.6706 0.46194-0.46089 1.2097-0.46089 1.6706 0l6.75 6.75c0.46194 0.46089 0.46194 1.2097 0 1.6706v-1.4e-4z" fill="currentColor" />
</svg></button>
</div>
<div class="image-gallery__totalslides">
<span class="image-gallery__totalslides--count">01/10</span>
</div>
<div class="carousel-nav-block">
<div class="carousel-nav-wrapper">
</div>
</div>
</div>
</div>
</div>
</section>
No notes defined.
{
"copy": "England's Euro 2020 adventure in pictures",
"images": [
{
"src": "/assets/example-content/example-carousel-image-01.png",
"caption": "England 1-0 Croatia, June 13, 2021 - England started their Euro 2020 campaign by righting a few wrongs, with Raheem Sterling sealing an opening-day victory over 2018 World Cup conquerors Croatia at a jubilant Wembley.Photo by Glyn Kirk/Pool/AFP via Getty Images"
},
{
"src": "/assets/example-content/example-carousel-image-02.png",
"caption": "England 1-0 Croatia, June 13, 2021 - England started their Euro 2020 campaign by righting a few wrongs, with Raheem Sterling sealing an opening-day victory over 2018 World Cup conquerors Croatia at a jubilant Wembley.Photo by Glyn Kirk/Pool/AFP via Getty Images"
},
{
"src": "/assets/example-content/example-carousel-image-03.png",
"caption": "England 1-0 Croatia, June 13, 2021 - England started their Euro 2020 campaign by righting a few wrongs, with Raheem Sterling sealing an opening-day victory over 2018 World Cup conquerors Croatia at a jubilant Wembley.Photo by Glyn Kirk/Pool/AFP via Getty Images"
},
{
"src": "/assets/example-content/example-carousel-image-04.png",
"caption": "England 1-0 Croatia, June 13, 2021 - England started their Euro 2020 campaign by righting a few wrongs, with Raheem Sterling sealing an opening-day victory over 2018 World Cup conquerors Croatia at a jubilant Wembley.Photo by Glyn Kirk/Pool/AFP via Getty Images"
},
{
"src": "/assets/example-content/example-carousel-image-05.png",
"caption": "England 1-0 Croatia, June 13, 2021 - England started their Euro 2020 campaign by righting a few wrongs, with Raheem Sterling sealing an opening-day victory over 2018 World Cup conquerors Croatia at a jubilant Wembley.Photo by Glyn Kirk/Pool/AFP via Getty Images"
},
{
"src": "/assets/example-content/example-carousel-image-06.png",
"caption": "England 1-0 Croatia, June 13, 2021 - England started their Euro 2020 campaign by righting a few wrongs, with Raheem Sterling sealing an opening-day victory over 2018 World Cup conquerors Croatia at a jubilant Wembley.Photo by Glyn Kirk/Pool/AFP via Getty Images"
},
{
"src": "/assets/example-content/example-carousel-image-05.png",
"caption": "England 1-0 Croatia, June 13, 2021 - England started their Euro 2020 campaign by righting a few wrongs, with Raheem Sterling sealing an opening-day victory over 2018 World Cup conquerors Croatia at a jubilant Wembley.Photo by Glyn Kirk/Pool/AFP via Getty Images"
}
]
}
.image-gallery {
&.container {
width: 100%;
max-width: 100%;
.container__content {
padding-left: 0;
padding-right: 0;
}
}
&__heading {
@extend .heading-1;
max-width: 95.2rem;
margin: 0 auto;
margin-bottom: 2.4rem;
text-align: center;
color: var(--brand-primary);
padding: 0 1.2rem;
}
&__link {
text-decoration: none;
}
&__img {
object-fit: cover;
object-position: center;
width: 100%;
height: 57.6rem;
max-height: 57.6rem;
}
&__caption {
font-family: var(--brand-text--font-family);
letter-spacing: var(--brand-p-2--letter-spacing);
font-size: var(--brand-p-2--font-size);
line-height: var(--brand-p-2--line-height);
color: $black;
white-space: pre-line;
visibility: hidden;
margin-top: 1.2rem;
padding: 0 1.2rem;
}
.carousel-container {
max-width: 100%;
}
.glide__slides > li {
opacity: 0.5;
transition: opacity 0.2s linear;
overflow: hidden;
flex-direction: column;
position: relative;
justify-content: flex-start;
&.glide__slide--active {
opacity: 1;
.image-gallery__caption {
visibility: visible;
}
.image-gallery__link {
position: absolute;
top: 0;
}
}
}
.glide__slides.singleslide {
opacity: 1;
justify-content: center;
}
.carousel {
position: relative;
}
&__cta {
align-items: center;
appearance: none;
background-color: $grey;
border: none;
color: #fff;
display: flex;
height: 0.8rem;
justify-content: center;
transition: background-color 0.2s ease-in;
width: 0.8rem;
white-space: nowrap;
svg {
width: 1.3rem;
height: 2.3rem;
}
&--prev {
position: absolute;
left: 0;
transform: rotate(180deg);
width: 5.2rem !important;
height: 15rem !important;
background-color: rgba(29, 29, 27, 0.4) !important;
color: $white !important;
border-radius: 4px 0 0 4px;
cursor: pointer;
svg {
position: inherit;
}
}
&--next {
position: absolute;
right: 0;
width: 5.2rem !important;
height: 15rem !important;
background-color: rgba(29, 29, 27, 0.4) !important;
border-radius: 4px 0 0 4px;
color: $white !important;
cursor: pointer;
svg {
position: inherit;
}
}
}
&__totalslides {
@include text-l;
line-height: 1.8rem;
letter-spacing: 0.01em;
color: $white;
position: absolute;
display: flex;
justify-content: center;
width: 100%;
top: 530px;
span {
background-color: rgba(29, 29, 27, 0.7);
border-radius: 0.4rem;
display: flex;
padding: 0.9rem 0.9rem 0.7rem 1.1rem;
min-width: 8rem;
justify-content: center;
}
}
&__navigation {
position: absolute;
top: 193px;
width: 100%;
left: 0;
right: 0;
margin: 0 auto;
}
@media screen and (min-width: $mq-medium) {
&__heading {
font-size: var(--brand-heading-3--font-size);
line-height: var(--brand-heading-3--line-height);
margin-bottom: 3.2rem;
}
&__img {
height: 53.6rem;
max-height: 53.6rem;
aspect-ratio: 954/536;
}
&__caption {
margin-top: 1.6rem;
padding: 0 1.8rem;
}
&__navigation {
width: 95.4rem;
}
&__totalslides {
top: 1.5rem;
left: 0;
right: 0;
justify-content: right;
width: 95.4rem;
margin: 0 auto;
span {
margin-right: 1.7rem;
}
}
.carousel__pagination button,
.glide-carousel__pagination button {
cursor: default;
}
}
}
[data-brand='mens'],
[data-brand='womens'] {
.image-gallery {
@media screen and (min-width: $mq-medium) {
&__heading {
font-size: 5.6rem;
line-height: 4rem;
}
}
}
}
<section class="container image-gallery">
<h3 class="image-gallery__heading">{{copy}}</h3>
<div class="container__content">
<div class="carousel-container">
<div class="carousel" data-behavior="carousel-image-gallery">
<div data-glide-el="track">
<ul class="glide__slides">
{{#each images}}
<li>
<a class="image-gallery__link">
<img class="image-gallery__img" src="{{src}}" alt="">
<div class="image-gallery__caption">{{caption}}</div>
</a>
</li>
{{/each}}
</ul>
</div>
<div class="image-gallery__navigation" data-glide-el="controls">
<button aria-label="Previous" class="image-gallery__cta image-gallery__cta--prev" data-glide-dir="<"><span
class="visually-hidden">Previous
page</span><svg fill="none" viewBox="0 0 10 17" xmlns="http://www.w3.org/2000/svg">
<path
d="m9.2722 9.3355-6.75 6.75c-0.46089 0.4609-1.2087 0.4609-1.6706 0-0.46089-0.4609-0.46089-1.2097 0-1.6706l5.9146-5.9146-5.9146-5.9146c-0.46089-0.46089-0.46089-1.2097 0-1.6706 0.46194-0.46089 1.2097-0.46089 1.6706 0l6.75 6.75c0.46194 0.46089 0.46194 1.2097 0 1.6706v-1.4e-4z"
fill="currentColor" />
</svg></button>
<button aria-label="Next" class="image-gallery__cta image-gallery__cta--next" data-glide-dir=">"><span
class="visually-hidden">Next
page</span><svg fill="none" viewBox="0 0 10 17" xmlns="http://www.w3.org/2000/svg">
<path
d="m9.2722 9.3355-6.75 6.75c-0.46089 0.4609-1.2087 0.4609-1.6706 0-0.46089-0.4609-0.46089-1.2097 0-1.6706l5.9146-5.9146-5.9146-5.9146c-0.46089-0.46089-0.46089-1.2097 0-1.6706 0.46194-0.46089 1.2097-0.46089 1.6706 0l6.75 6.75c0.46194 0.46089 0.46194 1.2097 0 1.6706v-1.4e-4z"
fill="currentColor" />
</svg></button>
</div>
<div class="image-gallery__totalslides">
<span class="image-gallery__totalslides--count">01/10</span>
</div>
<div class="carousel-nav-block">
<div class="carousel-nav-wrapper">
</div>
</div>
</div>
</div>
</div>
</section>