<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 tabindex="0" aria-label="Description of Image">
<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 tabindex="0" aria-label="Description of Image">
<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 tabindex="0" aria-label="Description of Image">
<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 tabindex="0" aria-label="Description of Image">
<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 tabindex="0" aria-label="Description of Image">
<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 tabindex="0" aria-label="Description of Image">
<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 tabindex="0" aria-label="Description of Image">
<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 {
// @include rte();
&.container {
width: 100%;
max-width: 100%;
.container__content {
padding-left: 0;
padding-right: 0;
max-width: unset;
}
}
&__heading {
@extend .efl-heading-3;
max-width: 105.8rem;
margin: 0 auto;
text-align: left;
color: var(--brand-primary);
padding: 0 2.4rem;
&::after {
content: '';
padding-top: 0.8rem;
display: block;
width: 3.2rem;
height: 0.2rem;
border-bottom: 2px solid $red;
}
}
&__link {
text-decoration: none;
}
&__img {
object-fit: cover;
object-position: center;
width: 100%;
height: auto;
max-height: 22rem;
}
&__caption {
@extend .efl-p-small;
color: $black;
white-space: pre-line;
visibility: hidden;
margin-top: 6.8rem;
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;
}
}
}
.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: 4rem !important;
background-color: $white;
color: #000;
border-radius: 0 0.4rem 0.4rem 0;
cursor: pointer;
svg {
position: inherit;
}
}
&--next {
position: absolute;
right: 0;
width: 5.2rem;
height: 4rem;
background-color: $white;
border-radius: 0 0.4rem 0.4rem 0;
color: #000;
cursor: pointer;
svg {
position: inherit;
}
}
}
&__totalslides {
@include text-l;
pointer-events: none;
font-family: $text-font-ef;
font-size: 1.6rem;
font-weight: 400;
line-height: 2.2rem;
letter-spacing: 0.02em;
text-align: center;
display: flex;
justify-content: center;
width: 100%;
top: 530px;
&--count {
color: $color-interface-light;
&::before {
content: 'Images';
padding-left: 3rem;
background-image: url('./assets/images/gallery-slideshow.svg');
background-size: 1.6rem;
background-position: left center;
background-repeat: no-repeat;
display: inline;
color: $blue;
}
}
span {
background-color: $white;
border-radius: 0.4rem;
display: flex;
gap: 0.5rem;
padding: 0.9rem 0.9rem 0.7rem 1.1rem;
min-width: 8rem;
justify-content: center;
filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.25));
}
}
&__navigation {
top: 35px;
width: 100%;
left: 0;
right: 0;
margin: 0 auto;
}
.glide-carousel__pagination {
margin-top: 1.6rem;
}
.carousel-nav-block.align-pagination {
margin-top: 6.8rem;
}
@media screen and (min-width: 768px) and (max-width: 819px) {
&__img {
height: 42rem;
max-height: 42rem;
}
}
@media screen and (min-width: $mq-medium) and (max-width: 956px) {
&__navigation {
width: 100% !important;
}
}
@media screen and (min-width: $mq-medium) {
&__heading {
text-align: left;
padding: 0 5.2rem;
margin-bottom: 3.2rem;
&::after {
content: '';
padding-top: 0.8rem;
display: block;
width: 3.2rem;
height: 0.2rem;
border-bottom: 2px solid #e1261c;
}
}
&__img {
height: 53.6rem;
max-height: 53.6rem;
}
&__caption {
margin-top: 1.6rem;
padding: 0 1.8rem;
}
&__navigation {
position: absolute;
width: 95.4rem;
top: 193px;
}
&__cta {
&--prev,
&--next {
height: 15rem !important;
&:hover {
background-color: $blue;
color: $white;
}
}
}
&__totalslides {
position: absolute;
top: 5.5rem;
left: 0;
right: 0;
justify-content: right;
width: 95.4rem;
margin: 0 auto;
max-width: 100%;
span {
margin-right: 1.7rem;
position: absolute;
right: 0;
filter: none;
}
}
.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 tabindex="0" aria-label="Description of Image">
<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>