<div class="fixtures-results-carousel">
<div class="fixtures-results-carousel__desktop carousel-mobile">
<div class="mobiles-tabs">
<input type="radio" class="tab-toggle" name="tab-toggle" id="results" checked>
<input type="radio" class="tab-toggle" name="tab-toggle" id="fixtures">
<ul class="fixtures-results-carousel__tab-list">
<li class="tab-item">
<label class="tab-trigger" for="results">Results</label>
</li>
<li class="tab-item">
<label class="tab-trigger" for="fixtures">Fixtures</label>
</li>
</ul>
</div>
<div class="fixtures-results-carousel__header-content">
<div class="results-header">
<div class="title">Recent Results</div>
<a class="viewallcta" href="#">View all</a>
</div>
<div class="fixtures-header">
<div class="title">Fixtures</div>
<a class="viewallcta" href="#">View all</a>
</div>
</div>
<div class="fixture-result-container">
<div class="mobile-tab-container recent-result-list">
<div class="results-section">
<div class="fixture-result-card">
<div class="fixture-result-card__title">Mens Senior</div>
<div class="fixture-result-card__competition">
<div>Euro Champions Qualifier</div>
<span></span>
<div>Group A</div>
</div>
<div class="fixture-result-card__team">
<div class="fixture-result-card__hometeam">
<img src="/assets/example-content/prematch-home-team.svg" alt="" />
<p>Eng</p>
</div>
<div class="fixture-result-card__postmatch">
<div class="fixture-result-card__matchscore">
<div class="matchscore">
<div>3</div>
<span></span>
<div>1</div>
</div>
</div>
</div>
<div class="fixture-result-card__awayteam">
<img src="/assets/example-content/prematch-away-team.svg" alt="" />
<p>Ice</p>
</div>
</div>
<div class="fixture-result-card__match-widgets">
<div>ht: 1-1</div>
<div>eng win on pens 4:3</div>
<div></div>
</div>
<div class="fixture-result-card__match-cta">
<a href="/" class="cta cta--primary ">
<p>Match Report</p>
</a>
<a href="/" class="cta cta--tertiary ">
<p>Highlights</p>
</a>
</div>
</div>
</div>
<div class="results-section">
<div class="fixture-result-card">
<div class="fixture-result-card__title">Mens Senior</div>
<div class="fixture-result-card__competition">
<div>Euro Champions Qualifier</div>
<span></span>
<div>Group A</div>
</div>
<div class="fixture-result-card__team">
<div class="fixture-result-card__hometeam">
<img src="/assets/example-content/prematch-home-team.svg" alt="" />
<p>Eng</p>
</div>
<div class="fixture-result-card__postmatch">
<div class="fixture-result-card__matchscore">
<div class="matchscore">
<div>3</div>
<span></span>
<div>1</div>
</div>
</div>
</div>
<div class="fixture-result-card__awayteam">
<img src="/assets/example-content/prematch-away-team.svg" alt="" />
<p>Ice</p>
</div>
</div>
<div class="fixture-result-card__match-widgets">
<div>ht: 1-1</div>
<div>eng win on pens 4:3</div>
<div></div>
</div>
<div class="fixture-result-card__match-cta">
<a href="/" class="cta cta--primary ">
<p>Match Report</p>
</a>
<a href="/" class="cta cta--tertiary ">
<p>Highlights</p>
</a>
</div>
</div>
</div>
<div class="results-section">
<div class="fixture-result-card">
<div class="fixture-result-card__title">Mens Senior</div>
<div class="fixture-result-card__competition">
<div>Euro Champions Qualifier</div>
<span></span>
<div>Group A</div>
</div>
<div class="fixture-result-card__team">
<div class="fixture-result-card__hometeam">
<img src="/assets/example-content/prematch-home-team.svg" alt="" />
<p>Eng</p>
</div>
<div class="fixture-result-card__postmatch">
<div class="fixture-result-card__matchscore">
<div class="matchscore">
<div>3</div>
<span></span>
<div>1</div>
</div>
</div>
</div>
<div class="fixture-result-card__awayteam">
<img src="/assets/example-content/prematch-away-team.svg" alt="" />
<p>Ice</p>
</div>
</div>
<div class="fixture-result-card__match-widgets">
<div>ht: 1-1</div>
<div>eng win on pens 4:3</div>
<div></div>
</div>
<div class="fixture-result-card__match-cta">
<a href="/" class="cta cta--primary ">
<p>Match Report</p>
</a>
<a href="/" class="cta cta--tertiary ">
<p>Highlights</p>
</a>
</div>
</div>
</div>
</div>
<div class="carousel mobile-tab-container fixture-result-list results-show" data-behavior="fixture-result-list">
<div class="fixture-section">
<div class="fixture-result-card">
<div class="fixture-result-card__title">Mens Senior</div>
<div class="fixture-result-card__competition">
<div>Euro Champions Qualifier</div>
<span></span>
<div>Group A</div>
</div>
<div class="fixture-result-card__team">
<div class="fixture-result-card__hometeam">
<img src="/assets/example-content/prematch-home-team.svg" alt="" />
<p>Eng</p>
</div>
<div class="fixture-result-card__prematch">
<p class="time">17:30</p>
<p class="zone">GMT</p>
</div>
<div class="fixture-result-card__awayteam">
<img src="/assets/example-content/prematch-away-team.svg" alt="" />
<p>Ice</p>
</div>
</div>
<div class="fixture-result-card__date">SATURDAY 21 MAR</div>
<div class="fixture-result-card__match-cta">
<a href="/" class="cta cta--primary ">
<p>Match Report</p>
</a>
<a href="/" class="cta cta--tertiary ">
<p>Highlights</p>
</a>
</div>
</div>
</div>
<div class="fixture-section">
<div class="fixture-result-card">
<div class="fixture-result-card__title">Mens Senior</div>
<div class="fixture-result-card__competition">
<div>Euro Champions Qualifier</div>
<span></span>
<div>Group A</div>
</div>
<div class="fixture-result-card__team">
<div class="fixture-result-card__hometeam">
<img src="/assets/example-content/prematch-home-team.svg" alt="" />
<p>Eng</p>
</div>
<div class="fixture-result-card__prematch">
<p class="time">17:30</p>
<p class="zone">GMT</p>
</div>
<div class="fixture-result-card__awayteam">
<img src="/assets/example-content/prematch-away-team.svg" alt="" />
<p>Ice</p>
</div>
</div>
<div class="fixture-result-card__date">SATURDAY 21 MAR</div>
<div class="fixture-result-card__match-cta">
<a href="/" class="cta cta--primary ">
<p>Match Report</p>
</a>
<a href="/" class="cta cta--tertiary ">
<p>Highlights</p>
</a>
</div>
</div>
</div>
<div class="fixture-section">
<div class="fixture-result-card">
<div class="fixture-result-card__title">Mens Senior</div>
<div class="fixture-result-card__competition">
<div>Euro Champions Qualifier</div>
<span></span>
<div>Group A</div>
</div>
<div class="fixture-result-card__team">
<div class="fixture-result-card__hometeam">
<img src="/assets/example-content/prematch-home-team.svg" alt="" />
<p>Eng</p>
</div>
<div class="fixture-result-card__prematch">
<p class="time">17:30</p>
<p class="zone">GMT</p>
</div>
<div class="fixture-result-card__awayteam">
<img src="/assets/example-content/prematch-away-team.svg" alt="" />
<p>Ice</p>
</div>
</div>
<div class="fixture-result-card__date">SATURDAY 21 MAR</div>
<div class="fixture-result-card__match-cta">
<a href="/" class="cta cta--primary ">
<p>Match Report</p>
</a>
<a href="/" class="cta cta--tertiary ">
<p>Highlights</p>
</a>
</div>
</div>
</div>
<div class="fixture-section">
<div class="fixture-result-card">
<div class="fixture-result-card__title">Mens Senior</div>
<div class="fixture-result-card__competition">
<div>Euro Champions Qualifier</div>
<span></span>
<div>Group A</div>
</div>
<div class="fixture-result-card__team">
<div class="fixture-result-card__hometeam">
<img src="/assets/example-content/prematch-home-team.svg" alt="" />
<p>Eng</p>
</div>
<div class="fixture-result-card__prematch">
<p class="time">17:30</p>
<p class="zone">GMT</p>
</div>
<div class="fixture-result-card__awayteam">
<img src="/assets/example-content/prematch-away-team.svg" alt="" />
<p>Ice</p>
</div>
</div>
<div class="fixture-result-card__date">SATURDAY 21 MAR</div>
<div class="fixture-result-card__match-cta">
<a href="/" class="cta cta--primary ">
<p>Match Report</p>
</a>
<a href="/" class="cta cta--tertiary ">
<p>Highlights</p>
</a>
</div>
</div>
</div>
<div class="fixture-section">
<div class="fixture-result-card">
<div class="fixture-result-card__title">Mens Senior</div>
<div class="fixture-result-card__competition">
<div>Euro Champions Qualifier</div>
<span></span>
<div>Group A</div>
</div>
<div class="fixture-result-card__team">
<div class="fixture-result-card__hometeam">
<img src="/assets/example-content/prematch-home-team.svg" alt="" />
<p>Eng</p>
</div>
<div class="fixture-result-card__prematch">
<p class="time">17:30</p>
<p class="zone">GMT</p>
</div>
<div class="fixture-result-card__awayteam">
<img src="/assets/example-content/prematch-away-team.svg" alt="" />
<p>Ice</p>
</div>
</div>
<div class="fixture-result-card__date">SATURDAY 21 MAR</div>
<div class="fixture-result-card__match-cta">
<a href="/" class="cta cta--primary ">
<p>Match Report</p>
</a>
<a href="/" class="cta cta--tertiary ">
<p>Highlights</p>
</a>
</div>
</div>
</div>
<div class="fixture-section">
<div class="fixture-result-card">
<div class="fixture-result-card__title">Mens Senior</div>
<div class="fixture-result-card__competition">
<div>Euro Champions Qualifier</div>
<span></span>
<div>Group A</div>
</div>
<div class="fixture-result-card__team">
<div class="fixture-result-card__hometeam">
<img src="/assets/example-content/prematch-home-team.svg" alt="" />
<p>Eng</p>
</div>
<div class="fixture-result-card__prematch">
<p class="time">17:30</p>
<p class="zone">GMT</p>
</div>
<div class="fixture-result-card__awayteam">
<img src="/assets/example-content/prematch-away-team.svg" alt="" />
<p>Ice</p>
</div>
</div>
<div class="fixture-result-card__date">SATURDAY 21 MAR</div>
<div class="fixture-result-card__match-cta">
<a href="/" class="cta cta--primary ">
<p>Match Report</p>
</a>
<a href="/" class="cta cta--tertiary ">
<p>Highlights</p>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="carousel-navigation">
<button aria-label="Previous" class="filter-cta-prev fixture__prev">
<span class="visually-hidden">Previous page</span>
</button>
<button aria-label="Next" class="filter-cta-next fixture__next">
<span class="visually-hidden">Next page</span>
</button>
</div>
</div>
<div class="text-link text-link--white">
<div class="text-link__section">
<div class="text-link__text">VISIT SHOP</div>
<div class="text-link__copy">
<a href="/">MENS</a>
<div class="text-link__seperator"></div>
<a href="/">WOMENS</a>
<div class="text-link__seperator"></div>
<a href="/">YOUTH</a>
<div class="text-link__seperator"></div>
<a href="/">ELIONS</a>
<div class="text-link__seperator"></div>
<a href="/">PARA</a>
<div class="text-link__seperator"></div>
</div>
</div>
</div>
</div>
No notes defined.
/* No context defined. */
import Glider from '../../behaviours/carousel/glider/glider';
/*eslint-disable */
export default ({ fixtureResultElement, responsive = [], ...options }) => {
const prevButton = document.querySelector('.fixture__prev');
const nextButton = document.querySelector('.fixture__next');
const defaultOptions = {
slidesToShow: 1,
slidesToScroll: 1,
scrollLock: true,
draggable: true,
arrows: {
prev: prevButton,
next: nextButton,
},
responsive: [
{
breakpoint: 980,
settings: {
slidesToShow: 1.5,
slidesToScroll: 1,
},
},
{
breakpoint: 1150,
settings: {
slidesToShow: 2,
slidesToScroll: 1,
},
},
{
breakpoint: 1250,
settings: {
slidesToShow: 2.3,
slidesToScroll: 1,
},
},
{
breakpoint: 1350,
settings: {
slidesToShow: 2.5,
slidesToScroll: 1,
},
},
{
breakpoint: 1400,
settings: {
slidesToShow: 2.8,
slidesToScroll: 1,
},
},
{
breakpoint: 1500,
settings: {
slidesToShow: 3,
slidesToScroll: 1,
},
},
{
breakpoint: 1650,
settings: {
slidesToShow: 3.4,
slidesToScroll: 1,
},
},
{
breakpoint: 1700,
settings: {
slidesToShow: 3.5,
slidesToScroll: 1,
},
},
{
breakpoint: 1800,
settings: {
slidesToShow: 3.9,
slidesToScroll: 1,
},
},
...responsive,
],
};
if (window.innerWidth > 972) {
document
.querySelector('.mobile-tab-container')
.classList.remove('fixtures-show');
}
// For Hide and Show Fixture and Result Tab Content in Mobile
const mobileFixturesTab = document.getElementById('fixtures');
const mobileResultsTab = document.getElementById('results');
const tabMobileContent = document.querySelectorAll('.mobile-tab-container');
mobileFixturesTab.onclick = function() {
for (const x of tabMobileContent) {
x.classList.add('fixtures-show');
x.classList.remove('results-show');
}
};
mobileResultsTab.onclick = function() {
for (const x of tabMobileContent) {
x.classList.add('results-show');
x.classList.remove('fixtures-show');
}
};
// To Control CTA button Alignment
const getFixtureButton = document.getElementsByClassName(
'fixture-result-card__match-cta'
);
for (let i = 0; i < getFixtureButton.length; i++) {
if (getFixtureButton[i].childElementCount === 1) {
getFixtureButton[i].classList.add('one-fixture-result-cta');
}
}
// If Fixture Cards is Less than 4 or equal to 4 then carousel navigation
// will hide and also gilder carousel will not working then we can able
// to scroll with mouse pointer because with
// less no of cards glider.js carousel is not working properly
const gettotalfixtures = document.querySelectorAll('.fixture-section').length;
const addfixtureclass = document.querySelector('.fixture-result-list');
const hideNavigation = document.querySelector('.carousel-navigation');
if (gettotalfixtures <= 4) {
addfixtureclass.classList.add('less-no-fixtures');
hideNavigation.classList.add('hide-navigation');
let isDown = false;
let startX;
let scrollLeft;
addfixtureclass.addEventListener('mousedown', e => {
isDown = true;
startX = e.pageX - addfixtureclass.offsetLeft;
scrollLeft = addfixtureclass.scrollLeft;
});
addfixtureclass.addEventListener('mouseleave', () => {
isDown = false;
});
addfixtureclass.addEventListener('mouseup', () => {
isDown = false;
});
addfixtureclass.addEventListener('mousemove', e => {
if (!isDown) {
return;
}
e.preventDefault();
const x = e.pageX - addfixtureclass.offsetLeft;
const walk = x - startX;
addfixtureclass.scrollLeft = scrollLeft - walk;
});
}
// Carousel Glider Will Load Only On Mobile
if (window.innerWidth > 972 && gettotalfixtures > 4) {
return new Glider(fixtureResultElement, {
...defaultOptions,
...options,
});
}
return null;
};
.fixtures-results-carousel {
.mobiles-tabs {
margin: 3.2rem 0;
.tab-toggle {
display: none;
}
}
&__tab-list {
position: relative;
display: flex;
column-gap: 1.9rem;
margin-bottom: 2.4rem;
margin-left: 1.6rem;
&::before {
content: '';
display: block;
height: 0.3rem;
width: 5.4rem;
position: absolute;
bottom: 0;
background-color: $red;
transition: 0.3s;
margin-left: 0.1rem;
}
.tab-item {
font-family: $ef-font;
font-style: normal;
font-weight: 400;
font-size: 1.6rem;
line-height: 2.4rem;
letter-spacing: 0.01em;
transition: 0.3s;
color: $color-interface-light;
padding-bottom: 0.4rem;
text-transform: uppercase;
}
}
.tab-toggle:nth-child(1):checked
~ .fixtures-results-carousel__tab-list
.tab-item:nth-child(1),
.tab-toggle:nth-child(2):checked
~ .fixtures-results-carousel__tab-list
.tab-item:nth-child(2) {
color: $blue;
}
.tab-toggle:nth-child(2):checked
~ .fixtures-results-carousel__tab-list::before {
transform: translateX(132%);
}
.fixtures-show {
.fixture-section {
display: block;
}
.results-section {
display: none;
}
}
.results-show {
.fixture-section {
display: none;
}
.results-section {
display: block;
}
}
.carousel-navigation {
display: none;
}
&__header-content {
display: none;
}
@media screen and (min-width: 972px) {
position: relative;
.carousel-navigation {
display: block;
}
.mobiles-tabs {
display: none;
}
.results-section:not(:first-child) {
display: none;
}
.fixture-result-container {
display: flex;
margin-bottom: 3.5rem;
}
.results-section:first-child {
margin-left: 7.1rem;
border-right: 0.1rem dashed $light-blue;
margin-right: 2.4rem;
padding-right: 2.4rem;
}
.fixture-section:last-child {
padding-right: 4rem;
}
.results-show {
.fixture-section {
display: block;
}
}
.less-no-fixtures {
display: flex;
column-gap: 1.8rem;
overflow-x: auto;
}
.less-no-fixtures::-webkit-scrollbar {
height: 0.2rem;
}
.hide-navigation {
display: none;
}
.glider-slide > *:first-child {
margin-left: 0 !important;
}
.filter-cta-prev {
background: $color-interface-light;
opacity: 0.7;
box-shadow: 0 0 0.4rem rgba(0, 0, 0, 0.25);
border-radius: 0 0.2rem 0.2rem 0;
width: 5rem;
height: 13rem;
outline: none;
border: none;
position: absolute;
left: 0;
top: 8.8rem;
cursor: pointer;
transition: 0.3s;
&::after {
content: '';
background: url(./assets/images/glider-left-arrow.svg) no-repeat center;
display: block;
height: 0.9rem;
}
&:hover {
opacity: 1;
}
}
.filter-cta-next {
background: $color-interface-light;
opacity: 0.7;
box-shadow: 0 0 0.4rem rgba(0, 0, 0, 0.25);
border-radius: 0.2rem 0 0 0.2rem;
width: 5rem;
height: 13rem;
outline: none;
border: none;
position: absolute;
right: 0;
top: 8.8rem;
cursor: pointer;
transition: 0.3s;
&::after {
content: '';
background: url(./assets/images/glider-right-arrow.svg) no-repeat center;
display: block;
height: 0.9rem;
}
&:hover {
opacity: 1;
}
}
&__header-content {
display: flex;
margin-top: 2rem;
padding-bottom: 0.1rem;
.fixtures-header {
display: flex;
width: 100%;
max-width: 130rem;
justify-content: space-between;
margin-right: 12.3rem;
padding-bottom: 1.2rem;
.title {
font-family: $ef-font;
font-style: normal;
font-weight: 500;
font-size: 1.6rem;
line-height: 2.6rem;
display: flex;
align-items: center;
color: $color-interface-light;
margin-left: 2.5rem;
}
.viewallcta {
font-family: $ef-font;
font-style: normal;
font-weight: 500;
font-size: 1.6rem;
line-height: 2.6rem;
display: flex;
align-items: center;
color: $blue;
opacity: 0.4;
text-decoration: none;
&::after {
content: '';
background: url(./assets/images/fixture-result-arrow.svg) no-repeat
center;
height: 0.8rem;
width: 1.1rem;
margin-left: 0.6rem;
-webkit-transition: transform 0.3s ease-out;
-moz-transition: transform 0.3s ease-out;
-ms-transition: transform 0.3s ease-out;
-o-transition: transform 0.3s ease-out;
transition: transform 0.3s ease-out;
}
}
}
.results-header {
display: flex;
width: 100%;
max-width: 43.2rem;
justify-content: space-between;
padding-bottom: 1.2rem;
padding-right: 2.4rem;
border-right: 0.1rem dashed $light-blue;
.title {
font-family: $ef-font;
font-style: normal;
font-weight: 500;
font-size: 1.6rem;
line-height: 2.6rem;
display: flex;
align-items: center;
color: $color-interface-light;
margin-left: 7.5rem;
}
.viewallcta {
font-family: $ef-font;
font-style: normal;
font-weight: 500;
font-size: 1.6rem;
line-height: 2.6rem;
display: flex;
align-items: center;
color: $blue;
opacity: 0.4;
text-decoration: none;
&::after {
content: '';
background: url(./assets/images/fixture-result-arrow.svg) no-repeat
center;
height: 0.8rem;
width: 1.1rem;
margin-left: 0.6rem;
-webkit-transition: transform 0.3s ease-out;
-moz-transition: transform 0.3s ease-out;
-ms-transition: transform 0.3s ease-out;
-o-transition: transform 0.3s ease-out;
transition: transform 0.3s ease-out;
}
}
}
.viewallcta:hover::after {
-webkit-transform: translateX(0.4rem);
-moz-transform: translateX(0.4rem);
-ms-transform: translateX(0.4rem);
-o-transform: translateX(0.4rem);
transform: translateX(0.4rem);
}
}
}
@media screen and (max-width: 972px) {
.fixture-result-list {
display: flex;
column-gap: 0.8rem;
padding: 0 1.6rem;
overflow-x: auto;
}
.recent-result-list {
display: flex;
column-gap: 0.8rem;
padding: 0 1.6rem;
overflow-x: auto;
}
}
}
<div class="fixtures-results-carousel">
<div class="fixtures-results-carousel__desktop carousel-mobile">
<div class="mobiles-tabs">
<input type="radio" class="tab-toggle" name="tab-toggle" id="results" checked>
<input type="radio" class="tab-toggle" name="tab-toggle" id="fixtures">
<ul class="fixtures-results-carousel__tab-list">
<li class="tab-item">
<label class="tab-trigger" for="results">Results</label>
</li>
<li class="tab-item">
<label class="tab-trigger" for="fixtures">Fixtures</label>
</li>
</ul>
</div>
<div class="fixtures-results-carousel__header-content">
<div class="results-header">
<div class="title">Recent Results</div>
<a class="viewallcta" href="#">View all</a>
</div>
<div class="fixtures-header">
<div class="title">Fixtures</div>
<a class="viewallcta" href="#">View all</a>
</div>
</div>
<div class="fixture-result-container">
<div class="mobile-tab-container recent-result-list">
<div class="results-section">
{{render '@fixture-result-card--results'}}
</div>
<div class="results-section">
{{render '@fixture-result-card--results'}}
</div>
<div class="results-section">
{{render '@fixture-result-card--results'}}
</div>
</div>
<div class="carousel mobile-tab-container fixture-result-list results-show" data-behavior="fixture-result-list">
<div class="fixture-section">
{{render '@fixture-result-card'}}
</div>
<div class="fixture-section">
{{render '@fixture-result-card'}}
</div>
<div class="fixture-section">
{{render '@fixture-result-card'}}
</div>
<div class="fixture-section">
{{render '@fixture-result-card'}}
</div>
<div class="fixture-section">
{{render '@fixture-result-card'}}
</div>
<div class="fixture-section">
{{render '@fixture-result-card'}}
</div>
</div>
</div>
<div class="carousel-navigation">
<button aria-label="Previous" class="filter-cta-prev fixture__prev">
<span class="visually-hidden">Previous page</span>
</button>
<button aria-label="Next" class="filter-cta-next fixture__next">
<span class="visually-hidden">Next page</span>
</button>
</div>
</div>
{{render '@text-link--white'}}
</div>