<div class="tabbed-carousel" data-behavior="tabs-with-carousel">
<div class="tabbed-carousel__navigation">
<div class="tabbed-carousel__tab-list" role="tablist" aria-label="">
<a href="#panel-latest-videos" role="tab" aria-selected="false" aria-controls="panel-latest-videos" id="tab-latest-videos" tabindex="0" data-behavior="latest-videos">
latest videos
</a>
<a href="#panel-highlights" role="tab" aria-selected="false" aria-controls="panel-highlights" id="tab-highlights" tabindex="0" data-behavior="highlights">
highlights
</a>
<a href="#panel-live" role="tab" aria-selected="true" aria-controls="panel-live" id="tab-live" tabindex="0" data-behavior="live">
live
</a>
<a href="#panel-archive" role="tab" aria-selected="false" aria-controls="panel-archive" id="tab-archive" tabindex="0" data-behavior="archive">
archive
</a>
</div>
<div class="tabbed-carousel__select-list">
<select data-behavior="tabbed-carousel-select-list">
<option value="latest-videos">latest videos</option>
<option value="highlights">highlights</option>
<option selected value="live">live</option>
<option value="archive">archive</option>
</select>
</div>
</div>
<div class="tabbed-carousel__tab-panels">
<div id="panel-latest-videos" role="tabpanel" tabindex="0" aria-labelledby="tab-latest-videos" data-tab-label="latest videos">
<div class="carousel" data-behavior="carousel-latest-videos">
<div>
<a target="_blank" href="/" class="content-card content-card--article">
<div class="content-card__image-bg">
<img src="/assets/example-content/article-card-image.png" />
</div>
<div class="time">5 min <span>read</span></div>
<div class="content-card__content">
<div class="content-card__content--dark-gradient">
<div class="sponsor-logo">
<img src="/assets/example-content/content-card-sponsor.svg" alt="sponsor">
</div>
</div>
<div class="content-card__content--info">
<div class="sponsored-label">Men's Senior</div>
<p class="title">head & shoulders present: Jack grealish, The heard yeards</p>
<hr />
<div class="dateduration-wrap">
<span class="date">11 Oct 2020</span>
</div>
</div>
</div>
</a>
<a target="_blank" href="/" class="content-card content-card--article">
<div class="content-card__image-bg">
<img src="/assets/example-content/article-card-image.png" />
</div>
<div class="time">5 min <span>read</span></div>
<div class="content-card__content">
<div class="content-card__content--dark-gradient">
<div class="sponsor-logo">
<img src="/assets/example-content/content-card-sponsor.svg" alt="sponsor">
</div>
</div>
<div class="content-card__content--info">
<div class="sponsored-label">Men's Senior</div>
<p class="title">head & shoulders present: Jack grealish, The heard yeards</p>
<hr />
<div class="dateduration-wrap">
<span class="date">11 Oct 2020</span>
</div>
</div>
</div>
</a>
<a target="_blank" href="/" class="content-card content-card--article">
<div class="content-card__image-bg">
<img src="/assets/example-content/article-card-image.png" />
</div>
<div class="time">5 min <span>read</span></div>
<div class="content-card__content">
<div class="content-card__content--dark-gradient">
<div class="sponsor-logo">
<img src="/assets/example-content/content-card-sponsor.svg" alt="sponsor">
</div>
</div>
<div class="content-card__content--info">
<div class="sponsored-label">Men's Senior</div>
<p class="title">head & shoulders present: Jack grealish, The heard yeards</p>
<hr />
<div class="dateduration-wrap">
<span class="date">11 Oct 2020</span>
</div>
</div>
</div>
</a>
<a target="_blank" href="/" class="content-card content-card--article">
<div class="content-card__image-bg">
<img src="/assets/example-content/article-card-image.png" />
</div>
<div class="time">5 min <span>read</span></div>
<div class="content-card__content">
<div class="content-card__content--dark-gradient">
<div class="sponsor-logo">
<img src="/assets/example-content/content-card-sponsor.svg" alt="sponsor">
</div>
</div>
<div class="content-card__content--info">
<div class="sponsored-label">Men's Senior</div>
<p class="title">head & shoulders present: Jack grealish, The heard yeards</p>
<hr />
<div class="dateduration-wrap">
<span class="date">11 Oct 2020</span>
</div>
</div>
</div>
</a>
</div>
<div>
<a target="_blank" href="/" class="content-card content-card--article">
<div class="content-card__image-bg">
<img src="/assets/example-content/article-card-image.png" />
</div>
<div class="time">5 min <span>read</span></div>
<div class="content-card__content">
<div class="content-card__content--dark-gradient">
<div class="sponsor-logo">
<img src="/assets/example-content/content-card-sponsor.svg" alt="sponsor">
</div>
</div>
<div class="content-card__content--info">
<div class="sponsored-label">Men's Senior</div>
<p class="title">head & shoulders present: Jack grealish, The heard yeards</p>
<hr />
<div class="dateduration-wrap">
<span class="date">11 Oct 2020</span>
</div>
</div>
</div>
</a>
<a target="_blank" href="/" class="content-card content-card--article">
<div class="content-card__image-bg">
<img src="/assets/example-content/article-card-image.png" />
</div>
<div class="time">5 min <span>read</span></div>
<div class="content-card__content">
<div class="content-card__content--dark-gradient">
<div class="sponsor-logo">
<img src="/assets/example-content/content-card-sponsor.svg" alt="sponsor">
</div>
</div>
<div class="content-card__content--info">
<div class="sponsored-label">Men's Senior</div>
<p class="title">head & shoulders present: Jack grealish, The heard yeards</p>
<hr />
<div class="dateduration-wrap">
<span class="date">11 Oct 2020</span>
</div>
</div>
</div>
</a>
<a target="_blank" href="/" class="content-card content-card--article">
<div class="content-card__image-bg">
<img src="/assets/example-content/article-card-image.png" />
</div>
<div class="time">5 min <span>read</span></div>
<div class="content-card__content">
<div class="content-card__content--dark-gradient">
<div class="sponsor-logo">
<img src="/assets/example-content/content-card-sponsor.svg" alt="sponsor">
</div>
</div>
<div class="content-card__content--info">
<div class="sponsored-label">Men's Senior</div>
<p class="title">head & shoulders present: Jack grealish, The heard yeards</p>
<hr />
<div class="dateduration-wrap">
<span class="date">11 Oct 2020</span>
</div>
</div>
</div>
</a>
<a target="_blank" href="/" class="content-card content-card--article">
<div class="content-card__image-bg">
<img src="/assets/example-content/article-card-image.png" />
</div>
<div class="time">5 min <span>read</span></div>
<div class="content-card__content">
<div class="content-card__content--dark-gradient">
<div class="sponsor-logo">
<img src="/assets/example-content/content-card-sponsor.svg" alt="sponsor">
</div>
</div>
<div class="content-card__content--info">
<div class="sponsored-label">Men's Senior</div>
<p class="title">head & shoulders present: Jack grealish, The heard yeards</p>
<hr />
<div class="dateduration-wrap">
<span class="date">11 Oct 2020</span>
</div>
</div>
</div>
</a>
</div>
</div>
</div>
<div id="panel-highlights" role="tabpanel" tabindex="0" aria-labelledby="tab-highlights" data-tab-label="highlights">
<div class="carousel" data-behavior="carousel-highlights">
<div>
<a target="_blank" href="/" class="content-card content-card--article">
<div class="content-card__image-bg">
<img src="/assets/example-content/article-card-image.png" />
</div>
<div class="time">5 min <span>read</span></div>
<div class="content-card__content">
<div class="content-card__content--dark-gradient">
<div class="sponsor-logo">
<img src="/assets/example-content/content-card-sponsor.svg" alt="sponsor">
</div>
</div>
<div class="content-card__content--info">
<div class="sponsored-label">Men's Senior</div>
<p class="title">head & shoulders present: Jack grealish, The heard yeards</p>
<hr />
<div class="dateduration-wrap">
<span class="date">11 Oct 2020</span>
</div>
</div>
</div>
</a>
<a target="_blank" href="/" class="content-card content-card--article">
<div class="content-card__image-bg">
<img src="/assets/example-content/article-card-image.png" />
</div>
<div class="time">5 min <span>read</span></div>
<div class="content-card__content">
<div class="content-card__content--dark-gradient">
<div class="sponsor-logo">
<img src="/assets/example-content/content-card-sponsor.svg" alt="sponsor">
</div>
</div>
<div class="content-card__content--info">
<div class="sponsored-label">Men's Senior</div>
<p class="title">head & shoulders present: Jack grealish, The heard yeards</p>
<hr />
<div class="dateduration-wrap">
<span class="date">11 Oct 2020</span>
</div>
</div>
</div>
</a>
<a target="_blank" href="/" class="content-card content-card--article">
<div class="content-card__image-bg">
<img src="/assets/example-content/article-card-image.png" />
</div>
<div class="time">5 min <span>read</span></div>
<div class="content-card__content">
<div class="content-card__content--dark-gradient">
<div class="sponsor-logo">
<img src="/assets/example-content/content-card-sponsor.svg" alt="sponsor">
</div>
</div>
<div class="content-card__content--info">
<div class="sponsored-label">Men's Senior</div>
<p class="title">head & shoulders present: Jack grealish, The heard yeards</p>
<hr />
<div class="dateduration-wrap">
<span class="date">11 Oct 2020</span>
</div>
</div>
</div>
</a>
<a target="_blank" href="/" class="content-card content-card--article">
<div class="content-card__image-bg">
<img src="/assets/example-content/article-card-image.png" />
</div>
<div class="time">5 min <span>read</span></div>
<div class="content-card__content">
<div class="content-card__content--dark-gradient">
<div class="sponsor-logo">
<img src="/assets/example-content/content-card-sponsor.svg" alt="sponsor">
</div>
</div>
<div class="content-card__content--info">
<div class="sponsored-label">Men's Senior</div>
<p class="title">head & shoulders present: Jack grealish, The heard yeards</p>
<hr />
<div class="dateduration-wrap">
<span class="date">11 Oct 2020</span>
</div>
</div>
</div>
</a>
</div>
<div>
<a target="_blank" href="/" class="content-card content-card--article">
<div class="content-card__image-bg">
<img src="/assets/example-content/article-card-image.png" />
</div>
<div class="time">5 min <span>read</span></div>
<div class="content-card__content">
<div class="content-card__content--dark-gradient">
<div class="sponsor-logo">
<img src="/assets/example-content/content-card-sponsor.svg" alt="sponsor">
</div>
</div>
<div class="content-card__content--info">
<div class="sponsored-label">Men's Senior</div>
<p class="title">head & shoulders present: Jack grealish, The heard yeards</p>
<hr />
<div class="dateduration-wrap">
<span class="date">11 Oct 2020</span>
</div>
</div>
</div>
</a>
<a target="_blank" href="/" class="content-card content-card--article">
<div class="content-card__image-bg">
<img src="/assets/example-content/article-card-image.png" />
</div>
<div class="time">5 min <span>read</span></div>
<div class="content-card__content">
<div class="content-card__content--dark-gradient">
<div class="sponsor-logo">
<img src="/assets/example-content/content-card-sponsor.svg" alt="sponsor">
</div>
</div>
<div class="content-card__content--info">
<div class="sponsored-label">Men's Senior</div>
<p class="title">head & shoulders present: Jack grealish, The heard yeards</p>
<hr />
<div class="dateduration-wrap">
<span class="date">11 Oct 2020</span>
</div>
</div>
</div>
</a>
<a target="_blank" href="/" class="content-card content-card--article">
<div class="content-card__image-bg">
<img src="/assets/example-content/article-card-image.png" />
</div>
<div class="time">5 min <span>read</span></div>
<div class="content-card__content">
<div class="content-card__content--dark-gradient">
<div class="sponsor-logo">
<img src="/assets/example-content/content-card-sponsor.svg" alt="sponsor">
</div>
</div>
<div class="content-card__content--info">
<div class="sponsored-label">Men's Senior</div>
<p class="title">head & shoulders present: Jack grealish, The heard yeards</p>
<hr />
<div class="dateduration-wrap">
<span class="date">11 Oct 2020</span>
</div>
</div>
</div>
</a>
<a target="_blank" href="/" class="content-card content-card--article">
<div class="content-card__image-bg">
<img src="/assets/example-content/article-card-image.png" />
</div>
<div class="time">5 min <span>read</span></div>
<div class="content-card__content">
<div class="content-card__content--dark-gradient">
<div class="sponsor-logo">
<img src="/assets/example-content/content-card-sponsor.svg" alt="sponsor">
</div>
</div>
<div class="content-card__content--info">
<div class="sponsored-label">Men's Senior</div>
<p class="title">head & shoulders present: Jack grealish, The heard yeards</p>
<hr />
<div class="dateduration-wrap">
<span class="date">11 Oct 2020</span>
</div>
</div>
</div>
</a>
</div>
</div>
</div>
<div id="panel-live" role="tabpanel" tabindex="0" aria-labelledby="tab-live" data-tab-label="live">
<div class="carousel" data-behavior="carousel-live">
<div>
<a target="_blank" href="/" class="content-card content-card--article">
<div class="content-card__image-bg">
<img src="/assets/example-content/article-card-image.png" />
</div>
<div class="time">5 min <span>read</span></div>
<div class="content-card__content">
<div class="content-card__content--dark-gradient">
<div class="sponsor-logo">
<img src="/assets/example-content/content-card-sponsor.svg" alt="sponsor">
</div>
</div>
<div class="content-card__content--info">
<div class="sponsored-label">Men's Senior</div>
<p class="title">head & shoulders present: Jack grealish, The heard yeards</p>
<hr />
<div class="dateduration-wrap">
<span class="date">11 Oct 2020</span>
</div>
</div>
</div>
</a>
<a target="_blank" href="/" class="content-card content-card--article">
<div class="content-card__image-bg">
<img src="/assets/example-content/article-card-image.png" />
</div>
<div class="time">5 min <span>read</span></div>
<div class="content-card__content">
<div class="content-card__content--dark-gradient">
<div class="sponsor-logo">
<img src="/assets/example-content/content-card-sponsor.svg" alt="sponsor">
</div>
</div>
<div class="content-card__content--info">
<div class="sponsored-label">Men's Senior</div>
<p class="title">head & shoulders present: Jack grealish, The heard yeards</p>
<hr />
<div class="dateduration-wrap">
<span class="date">11 Oct 2020</span>
</div>
</div>
</div>
</a>
<a target="_blank" href="/" class="content-card content-card--article">
<div class="content-card__image-bg">
<img src="/assets/example-content/article-card-image.png" />
</div>
<div class="time">5 min <span>read</span></div>
<div class="content-card__content">
<div class="content-card__content--dark-gradient">
<div class="sponsor-logo">
<img src="/assets/example-content/content-card-sponsor.svg" alt="sponsor">
</div>
</div>
<div class="content-card__content--info">
<div class="sponsored-label">Men's Senior</div>
<p class="title">head & shoulders present: Jack grealish, The heard yeards</p>
<hr />
<div class="dateduration-wrap">
<span class="date">11 Oct 2020</span>
</div>
</div>
</div>
</a>
<a target="_blank" href="/" class="content-card content-card--article">
<div class="content-card__image-bg">
<img src="/assets/example-content/article-card-image.png" />
</div>
<div class="time">5 min <span>read</span></div>
<div class="content-card__content">
<div class="content-card__content--dark-gradient">
<div class="sponsor-logo">
<img src="/assets/example-content/content-card-sponsor.svg" alt="sponsor">
</div>
</div>
<div class="content-card__content--info">
<div class="sponsored-label">Men's Senior</div>
<p class="title">head & shoulders present: Jack grealish, The heard yeards</p>
<hr />
<div class="dateduration-wrap">
<span class="date">11 Oct 2020</span>
</div>
</div>
</div>
</a>
</div>
<div>
<a target="_blank" href="/" class="content-card content-card--article">
<div class="content-card__image-bg">
<img src="/assets/example-content/article-card-image.png" />
</div>
<div class="time">5 min <span>read</span></div>
<div class="content-card__content">
<div class="content-card__content--dark-gradient">
<div class="sponsor-logo">
<img src="/assets/example-content/content-card-sponsor.svg" alt="sponsor">
</div>
</div>
<div class="content-card__content--info">
<div class="sponsored-label">Men's Senior</div>
<p class="title">head & shoulders present: Jack grealish, The heard yeards</p>
<hr />
<div class="dateduration-wrap">
<span class="date">11 Oct 2020</span>
</div>
</div>
</div>
</a>
<a target="_blank" href="/" class="content-card content-card--article">
<div class="content-card__image-bg">
<img src="/assets/example-content/article-card-image.png" />
</div>
<div class="time">5 min <span>read</span></div>
<div class="content-card__content">
<div class="content-card__content--dark-gradient">
<div class="sponsor-logo">
<img src="/assets/example-content/content-card-sponsor.svg" alt="sponsor">
</div>
</div>
<div class="content-card__content--info">
<div class="sponsored-label">Men's Senior</div>
<p class="title">head & shoulders present: Jack grealish, The heard yeards</p>
<hr />
<div class="dateduration-wrap">
<span class="date">11 Oct 2020</span>
</div>
</div>
</div>
</a>
<a target="_blank" href="/" class="content-card content-card--article">
<div class="content-card__image-bg">
<img src="/assets/example-content/article-card-image.png" />
</div>
<div class="time">5 min <span>read</span></div>
<div class="content-card__content">
<div class="content-card__content--dark-gradient">
<div class="sponsor-logo">
<img src="/assets/example-content/content-card-sponsor.svg" alt="sponsor">
</div>
</div>
<div class="content-card__content--info">
<div class="sponsored-label">Men's Senior</div>
<p class="title">head & shoulders present: Jack grealish, The heard yeards</p>
<hr />
<div class="dateduration-wrap">
<span class="date">11 Oct 2020</span>
</div>
</div>
</div>
</a>
<a target="_blank" href="/" class="content-card content-card--article">
<div class="content-card__image-bg">
<img src="/assets/example-content/article-card-image.png" />
</div>
<div class="time">5 min <span>read</span></div>
<div class="content-card__content">
<div class="content-card__content--dark-gradient">
<div class="sponsor-logo">
<img src="/assets/example-content/content-card-sponsor.svg" alt="sponsor">
</div>
</div>
<div class="content-card__content--info">
<div class="sponsored-label">Men's Senior</div>
<p class="title">head & shoulders present: Jack grealish, The heard yeards</p>
<hr />
<div class="dateduration-wrap">
<span class="date">11 Oct 2020</span>
</div>
</div>
</div>
</a>
</div>
</div>
</div>
<div id="panel-archive" role="tabpanel" tabindex="0" aria-labelledby="tab-archive" data-tab-label="archive">
<div class="carousel" data-behavior="carousel-archive">
<div>
<a target="_blank" href="/" class="content-card content-card--article">
<div class="content-card__image-bg">
<img src="/assets/example-content/article-card-image.png" />
</div>
<div class="time">5 min <span>read</span></div>
<div class="content-card__content">
<div class="content-card__content--dark-gradient">
<div class="sponsor-logo">
<img src="/assets/example-content/content-card-sponsor.svg" alt="sponsor">
</div>
</div>
<div class="content-card__content--info">
<div class="sponsored-label">Men's Senior</div>
<p class="title">head & shoulders present: Jack grealish, The heard yeards</p>
<hr />
<div class="dateduration-wrap">
<span class="date">11 Oct 2020</span>
</div>
</div>
</div>
</a>
<a target="_blank" href="/" class="content-card content-card--article">
<div class="content-card__image-bg">
<img src="/assets/example-content/article-card-image.png" />
</div>
<div class="time">5 min <span>read</span></div>
<div class="content-card__content">
<div class="content-card__content--dark-gradient">
<div class="sponsor-logo">
<img src="/assets/example-content/content-card-sponsor.svg" alt="sponsor">
</div>
</div>
<div class="content-card__content--info">
<div class="sponsored-label">Men's Senior</div>
<p class="title">head & shoulders present: Jack grealish, The heard yeards</p>
<hr />
<div class="dateduration-wrap">
<span class="date">11 Oct 2020</span>
</div>
</div>
</div>
</a>
<a target="_blank" href="/" class="content-card content-card--article">
<div class="content-card__image-bg">
<img src="/assets/example-content/article-card-image.png" />
</div>
<div class="time">5 min <span>read</span></div>
<div class="content-card__content">
<div class="content-card__content--dark-gradient">
<div class="sponsor-logo">
<img src="/assets/example-content/content-card-sponsor.svg" alt="sponsor">
</div>
</div>
<div class="content-card__content--info">
<div class="sponsored-label">Men's Senior</div>
<p class="title">head & shoulders present: Jack grealish, The heard yeards</p>
<hr />
<div class="dateduration-wrap">
<span class="date">11 Oct 2020</span>
</div>
</div>
</div>
</a>
<a target="_blank" href="/" class="content-card content-card--article">
<div class="content-card__image-bg">
<img src="/assets/example-content/article-card-image.png" />
</div>
<div class="time">5 min <span>read</span></div>
<div class="content-card__content">
<div class="content-card__content--dark-gradient">
<div class="sponsor-logo">
<img src="/assets/example-content/content-card-sponsor.svg" alt="sponsor">
</div>
</div>
<div class="content-card__content--info">
<div class="sponsored-label">Men's Senior</div>
<p class="title">head & shoulders present: Jack grealish, The heard yeards</p>
<hr />
<div class="dateduration-wrap">
<span class="date">11 Oct 2020</span>
</div>
</div>
</div>
</a>
</div>
<div>
<a target="_blank" href="/" class="content-card content-card--article">
<div class="content-card__image-bg">
<img src="/assets/example-content/article-card-image.png" />
</div>
<div class="time">5 min <span>read</span></div>
<div class="content-card__content">
<div class="content-card__content--dark-gradient">
<div class="sponsor-logo">
<img src="/assets/example-content/content-card-sponsor.svg" alt="sponsor">
</div>
</div>
<div class="content-card__content--info">
<div class="sponsored-label">Men's Senior</div>
<p class="title">head & shoulders present: Jack grealish, The heard yeards</p>
<hr />
<div class="dateduration-wrap">
<span class="date">11 Oct 2020</span>
</div>
</div>
</div>
</a>
<a target="_blank" href="/" class="content-card content-card--article">
<div class="content-card__image-bg">
<img src="/assets/example-content/article-card-image.png" />
</div>
<div class="time">5 min <span>read</span></div>
<div class="content-card__content">
<div class="content-card__content--dark-gradient">
<div class="sponsor-logo">
<img src="/assets/example-content/content-card-sponsor.svg" alt="sponsor">
</div>
</div>
<div class="content-card__content--info">
<div class="sponsored-label">Men's Senior</div>
<p class="title">head & shoulders present: Jack grealish, The heard yeards</p>
<hr />
<div class="dateduration-wrap">
<span class="date">11 Oct 2020</span>
</div>
</div>
</div>
</a>
<a target="_blank" href="/" class="content-card content-card--article">
<div class="content-card__image-bg">
<img src="/assets/example-content/article-card-image.png" />
</div>
<div class="time">5 min <span>read</span></div>
<div class="content-card__content">
<div class="content-card__content--dark-gradient">
<div class="sponsor-logo">
<img src="/assets/example-content/content-card-sponsor.svg" alt="sponsor">
</div>
</div>
<div class="content-card__content--info">
<div class="sponsored-label">Men's Senior</div>
<p class="title">head & shoulders present: Jack grealish, The heard yeards</p>
<hr />
<div class="dateduration-wrap">
<span class="date">11 Oct 2020</span>
</div>
</div>
</div>
</a>
<a target="_blank" href="/" class="content-card content-card--article">
<div class="content-card__image-bg">
<img src="/assets/example-content/article-card-image.png" />
</div>
<div class="time">5 min <span>read</span></div>
<div class="content-card__content">
<div class="content-card__content--dark-gradient">
<div class="sponsor-logo">
<img src="/assets/example-content/content-card-sponsor.svg" alt="sponsor">
</div>
</div>
<div class="content-card__content--info">
<div class="sponsored-label">Men's Senior</div>
<p class="title">head & shoulders present: Jack grealish, The heard yeards</p>
<hr />
<div class="dateduration-wrap">
<span class="date">11 Oct 2020</span>
</div>
</div>
</div>
</a>
</div>
</div>
</div>
<div class="carousel-nav-block">
<div class="carousel-nav-wrapper">
<div class="tabbed-carousel__navigation-bottom">
<div role="tablist" class="tabbed-carousel__pagination carousel__pagination"></div>
</div>
<div class="tabbed-carousel__arrows-wrap">
<button aria-label="Previous" class="carousel__cta carousel__prev tabbed-carousel__prev disabled">
<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="carousel__cta carousel__next tabbed-carousel__next">
<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>
</div>
</div>
</div>
(data-behavior="carousel-additional-cta-next").addEventListener('click' => {
// trigger click on original button
});disable state of additional buttons following way.gliderElement.addEventListener('glider-slide-visible', event => {
// disable next button when event.detail.slide == 2
// disable prev button when event.detail.slide == 1
});We need to display 4 cards in a column on smaller device and 4 cards in a row on larger device - there is a glitch from Glider (assumption) in which the last card of a row overlaps with first card of next slide at 1200px or creates fractional slide as container width is not sufficient. We don’t have solution for this at the moment.
Do not destroy carousel. Glider removes inline styles for all the children element when destroyed and we will lose inline style for Content Card which is used to set a background image.
Select List - We need to have a separate method to change selected panel’s visibility along with ARIA attributes.
{
"pagination": true,
"tabs": [
{
"id": "latest-videos",
"tab": "latest videos",
"selected": false,
"withNewsArticles": true
},
{
"id": "highlights",
"tab": "highlights",
"selected": false,
"withNewsArticles": true
},
{
"id": "live",
"tab": "live",
"selected": true,
"withNewsArticles": true
},
{
"id": "archive",
"tab": "archive",
"selected": false,
"withNewsArticles": true
}
]
}
import tabs from '../../behaviours/tabs/tabs';
import Glider from '../../behaviours/carousel/glider/glider';
import videoLightBox from '../dynamic-video-dialog/generate-lightbox';
import vimeoVideoLightBox from '../dynamic-video-dialog/generate-vimeo-lightbox';
const getCarouselElement = parentElement => {
if (!parentElement) {
return false;
}
const selectedTab = parentElement.querySelector(
'[role="tab"][aria-selected="true"]'
);
const carouselId = selectedTab.getAttribute('data-behavior');
const carouselElement = parentElement.querySelector(
`[data-behavior=carousel-${carouselId}]`
);
return carouselElement;
};
export const setUpGlider = ({ parentElement }) => {
const element = getCarouselElement(parentElement);
if (!element) {
return false;
}
const prevButton = parentElement.querySelector('.tabbed-carousel__prev');
const nextButton = parentElement.querySelector('.tabbed-carousel__next');
const pagination = parentElement.querySelector(
'.tabbed-carousel__pagination'
);
const defaultSettings = {
slidesToShow: 1,
slidesToScroll: 1,
scrollLock: true,
draggable: true,
arrows: {
prev: prevButton,
next: nextButton,
},
dots: pagination,
responsive: [
{
breakpoint: 600,
settings: {
slidesToShow: 1,
slidesToScroll: 1,
},
},
{
breakpoint: 900,
settings: {
slidesToShow: 1,
slidesToScroll: 1,
},
},
{
breakpoint: 1200,
settings: {
slidesToShow: 1,
slidesToScroll: 1,
},
},
],
};
// When our tabs are changed we destroy the current carousel and create a new one.
// However, we want to be able to reuse the arrows for the new carousel, but glider
// does not properly detach events when a carousel is destroyed. To get around this we are
// listening for the destroy event, removing the current arrows (with events attached) and
// replacing them with new ones so that, when a new carousel is created it has the correct
// events attached.
element.addEventListener('glider-destroy', () => {
const arrowContainer = parentElement.querySelector(
'.tabbed-carousel__arrows-wrap'
);
[prevButton, nextButton].forEach(button => {
const clone = button.cloneNode(true);
arrowContainer.appendChild(clone);
button.remove();
});
});
// added condtion to hide pagination when only one page available
if (element.children.length < 2) {
// eslint-disable-next-line no-param-reassign
parentElement.querySelector('.carousel-nav-block').style.display = 'none';
} else {
// eslint-disable-next-line no-param-reassign
parentElement.querySelector('.carousel-nav-block').style.display = 'block';
}
return new Glider(element, {
...defaultSettings,
});
};
const setUpSelectList = parentElement => {
const selectList = parentElement.querySelector(
'[data-behavior=tabbed-carousel-select-list]'
);
if (!selectList) {
return false;
}
selectList.addEventListener('change', event => {
const tabId = event.target.value;
parentElement.querySelector(`[data-behavior=${tabId}]`).click();
});
return true;
};
const reInitiateLightbox = () => {
const videoLightBoxElements = document.querySelectorAll(
'[data-behavior=video-lightbox]'
);
if (videoLightBoxElements) {
videoLightBoxElements.forEach(videoLightBoxElement =>
videoLightBox(videoLightBoxElement)
);
}
};
const reInitiateVimeoLightbox = () => {
const vimeoLightBoxElements = document.querySelectorAll(
'[data-behavior=vimeo-video-lightbox]'
);
if (vimeoLightBoxElements) {
vimeoLightBoxElements.forEach(vimeoLightBoxElement =>
vimeoVideoLightBox(vimeoLightBoxElement)
);
}
};
export default parentElement => {
if (
!parentElement.querySelectorAll('.tabbed-carousel__tab-list > a').length
) {
return false;
}
setUpSelectList(parentElement);
// initialize default carousel based on default active tab.
let carousel = setUpGlider({ parentElement });
if (parentElement) {
tabs(parentElement, () => {
carousel.destroy();
carousel = setUpGlider({ parentElement });
carousel.updateControls();
// reinitiate the lightbox video object - EF-1797 issue fix
reInitiateLightbox();
reInitiateVimeoLightbox();
});
}
return true;
};
.tabbed-carousel {
&__navigation {
display: flex;
justify-content: space-around;
align-items: center;
margin-bottom: 2.4rem;
.label {
@include text-s--narrow;
letter-spacing: 0.01em;
color: $blue;
text-transform: uppercase;
}
}
&__tab-list {
display: none;
}
&__select-list {
position: relative;
select {
@include text-s--narrow;
width: 34.3rem;
color: $blue;
letter-spacing: 0.01em;
border: 0;
padding: 0.6rem 0.5rem;
text-transform: uppercase;
text-indent: 0.5rem;
cursor: pointer;
height: 4.3rem;
background-color: $grey-light;
line-height: 2rem;
}
}
&__arrows-wrap {
display: flex;
flex-direction: row;
justify-content: flex-end;
}
&__tab-panels {
.glider-slide {
.content-card {
margin: 0 auto;
margin-bottom: 1.6rem;
justify-content: center;
}
}
}
&__navigation-bottom {
margin-top: 4rem;
.tabbed-carousel__pagination {
margin: 0;
}
}
@media screen and (min-width: $mq-medium) {
&__navigation {
justify-content: center;
height: 4.3rem;
margin-bottom: 2rem;
.label {
display: none;
}
}
&__tab-list {
display: inline-block;
& > [role='tab'] {
@include text-s;
display: inline;
color: $color-interface-light;
letter-spacing: 0.01em;
text-decoration: none;
text-transform: uppercase;
padding-bottom: 0.9rem;
border-bottom: 1px solid transparent;
&:hover {
color: $blue;
}
}
& > [aria-selected='true'] {
border-bottom: 2px solid $bold-red;
color: $blue;
}
& > [role='tab']:not(:first-child) {
margin-left: 3.2rem;
}
}
&__select-list {
display: none;
}
&__arrows-wrap {
display: flex;
flex-direction: row;
justify-content: flex-end;
}
&__tab-panels {
.glider-slide {
display: flex;
justify-content: center;
width: 100% !important;
.content-card {
margin: 0;
margin-bottom: 24px;
justify-content: unset;
&:not(:first-child) {
margin-left: 1.5rem;
}
}
}
}
&__navigation-bottom {
display: flex;
justify-content: center;
margin-top: 4rem;
.tabbed-carousel__pagination {
margin: 0;
}
// .tabbed-carousel__cta-prev {
// margin-right: 0;
// }
}
}
}
:root [data-brand='englandfootball'],
:root [data-brand='englandfootball--supplimentary'] {
.tabbed-carousel {
&__select-list {
select {
font-family: $text-font-ef;
line-height: 2.2rem;
}
}
&__tab-list {
& > [role='tab'] {
font-family: $text-font-ef;
font-weight: 500;
font-size: 1.6rem;
line-height: 2.4rem;
}
}
.heading-section {
text-transform: uppercase;
}
}
}
<div class="tabbed-carousel" data-behavior="tabs-with-carousel">
<div class="tabbed-carousel__navigation">
<div class="tabbed-carousel__tab-list" role="tablist" aria-label="">
{{#each tabs}}
<a href="#panel-{{id}}" role="tab" aria-selected="{{selected}}" aria-controls="panel-{{id}}" id="tab-{{id}}"
tabindex="0" data-behavior="{{id}}">
{{tab}}
</a>
{{/each}}
</div>
<div class="tabbed-carousel__select-list">
<select data-behavior="tabbed-carousel-select-list">
{{#each tabs}}
<option {{#if selected}}selected{{/if}} value="{{id}}">{{tab}}</option>
{{/each}}
</select>
</div>
</div>
<div class="tabbed-carousel__tab-panels">
{{#each tabs}}
<div id="panel-{{id}}" role="tabpanel" tabindex="0" aria-labelledby="tab-{{id}}" data-tab-label="{{tab}}">
<div class="carousel" data-behavior="carousel-{{id}}">
{{#if withVideos}}
<div>
{{render '@content-card--dynamic-video'}}
{{render '@content-card--default'}}
{{render '@content-card--dynamic-vimeo-video'}}
{{render '@content-card--default'}}
</div>
<div>
{{render '@content-card--video-card-youtube'}}
{{render '@content-card--default'}}
{{render '@content-card--video-card-youtube'}}
{{render '@content-card--default'}}
</div>
<div>
{{render '@content-card--video-card-youtube'}}
{{render '@content-card--default'}}
{{render '@content-card--video-card-youtube'}}
{{render '@content-card--default'}}
</div>
{{/if}}
{{#if withNewsArticles}}
<div>
{{render '@content-card--default'}}
{{render '@content-card--default'}}
{{render '@content-card--default'}}
{{render '@content-card--default'}}
</div>
<div>
{{render '@content-card--default'}}
{{render '@content-card--default'}}
{{render '@content-card--default'}}
{{render '@content-card--default'}}
</div>
{{/if}}
</div>
</div>
{{/each}}
{{#if pagination}}
<div class="carousel-nav-block">
<div class="carousel-nav-wrapper">
<div class="tabbed-carousel__navigation-bottom">
<div role="tablist" class="tabbed-carousel__pagination carousel__pagination"></div>
</div>
<div class="tabbed-carousel__arrows-wrap">
<button aria-label="Previous" class="carousel__cta carousel__prev tabbed-carousel__prev disabled">
<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="carousel__cta carousel__next tabbed-carousel__next">
<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>
</div>
{{/if}}
</div>
</div>