<div class="carousel-container carousel--desktop-reset">
<div class="carousel-navigation">
<button aria-label="Previous" class="carousel__cta carousel__prev"><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"><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="carousel player-stats-list" data-behavior="carousel">
<div>
<div class="player-stats">
<div class="player-stats__img-wrapper" data-info="Appearances">
<img src="/assets/example-content/player-stats.png" alt="" />
<div class="player-stats__info-block">
<div class="player-stats__position">Appearances</div>
<div class="player-stats__value">88 </div>
<div class="player-stats__name">M.Mount</div>
</div>
</div>
<div class="player-stats__ranking-card">
<ul>
<li>
<img src="/assets/example-content/player-stats-small-1.png" />
<p>T. Alexander-Arnold</p>
<span>11</span>
</li>
<li>
<img src="/assets/example-content/player-stats-small-1.png" />
<p>T. Alexander-Arnold</p>
<span>8</span>
</li>
<li>
<img src="/assets/example-content/player-stats-small-1.png" />
<p>T. Alexander-Arnold</p>
<span>5</span>
</li>
<li>
<img src="/assets/example-content/player-stats-small-1.png" />
<p>T. Alexander-Arnold</p>
<span>3</span>
</li>
</ul>
</div>
</div>
</div>
<div>
<div class="player-stats">
<div class="player-stats__img-wrapper" data-info="Goals">
<img src="/assets/example-content/player-stats-2.png" alt="" />
<div class="player-stats__info-block">
<div class="player-stats__position">Goals</div>
<div class="player-stats__value">88 </div>
<div class="player-stats__name">H.Kane</div>
</div>
</div>
<div class="player-stats__ranking-card">
<ul>
<li>
<img src="/assets/example-content/player-stats-small-1.png" />
<p>T. Alexander-Arnold</p>
<span>11</span>
</li>
<li>
<img src="/assets/example-content/player-stats-small-1.png" />
<p>T. Alexander-Arnold</p>
<span>8</span>
</li>
<li>
<img src="/assets/example-content/player-stats-small-1.png" />
<p>T. Alexander-Arnold</p>
<span>5</span>
</li>
<li>
<img src="/assets/example-content/player-stats-small-1.png" />
<p>T. Alexander-Arnold</p>
<span>3</span>
</li>
</ul>
</div>
</div>
</div>
<div>
<div class="player-stats">
<div class="player-stats__img-wrapper" data-info="Assists">
<img src="/assets/example-content/player-stats-3.png" alt="" />
<div class="player-stats__info-block">
<div class="player-stats__position">Assists</div>
<div class="player-stats__value">88 </div>
<div class="player-stats__name">T.Mings</div>
</div>
</div>
<div class="player-stats__ranking-card">
<ul>
<li>
<img src="/assets/example-content/player-stats-small-1.png" />
<p>T. Alexander-Arnold</p>
<span>11</span>
</li>
<li>
<img src="/assets/example-content/player-stats-small-1.png" />
<p>T. Alexander-Arnold</p>
<span>8</span>
</li>
<li>
<img src="/assets/example-content/player-stats-small-1.png" />
<p>T. Alexander-Arnold</p>
<span>5</span>
</li>
<li>
<img src="/assets/example-content/player-stats-small-1.png" />
<p>T. Alexander-Arnold</p>
<span>3</span>
</li>
</ul>
</div>
</div>
</div>
<div>
<div class="player-stats">
<div class="player-stats__img-wrapper" data-info="Big chances created">
<img src="/assets/example-content/player-stats-4.png" alt="" />
<div class="player-stats__info-block">
<div class="player-stats__position">Big chances created</div>
<div class="player-stats__value">4 </div>
<div class="player-stats__name">T.Abraham</div>
</div>
</div>
<div class="player-stats__ranking-card">
<ul>
<li>
<img src="/assets/example-content/player-stats-small-1.png" />
<p>T. Alexander-Arnold</p>
<span>11</span>
</li>
<li>
<img src="/assets/example-content/player-stats-small-1.png" />
<p>T. Alexander-Arnold</p>
<span>8</span>
</li>
<li>
<img src="/assets/example-content/player-stats-small-1.png" />
<p>T. Alexander-Arnold</p>
<span>5</span>
</li>
<li>
<img src="/assets/example-content/player-stats-small-1.png" />
<p>T. Alexander-Arnold</p>
<span>3</span>
</li>
</ul>
</div>
</div>
</div>
<div>
<div class="player-stats">
<div class="player-stats__img-wrapper" data-info="Dribbles">
<img src="/assets/example-content/player-stats-5.png" alt="" />
<div class="player-stats__info-block">
<div class="player-stats__position">Dribbles</div>
<div class="player-stats__value">8 <span>.17 Yrs</span></div>
<div class="player-stats__name">H.Winks</div>
</div>
</div>
<div class="player-stats__ranking-card">
<ul>
<li>
<img src="/assets/example-content/player-stats-small-1.png" />
<p>T. Alexander-Arnold</p>
<span>11</span>
</li>
<li>
<img src="/assets/example-content/player-stats-small-1.png" />
<p>T. Alexander-Arnold</p>
<span>8</span>
</li>
<li>
<img src="/assets/example-content/player-stats-small-1.png" />
<p>T. Alexander-Arnold</p>
<span>5</span>
</li>
<li>
<img src="/assets/example-content/player-stats-small-1.png" />
<p>T. Alexander-Arnold</p>
<span>3</span>
</li>
</ul>
</div>
</div>
</div>
<div>
<div class="player-stats">
<div class="player-stats__img-wrapper" data-info="Tackles">
<img src="/assets/example-content/player-stats-6.png" alt="" />
<div class="player-stats__info-block">
<div class="player-stats__position">Tackles</div>
<div class="player-stats__value">88 </div>
<div class="player-stats__name">J.Pickford</div>
</div>
</div>
<div class="player-stats__ranking-card">
<ul>
<li>
<img src="/assets/example-content/player-stats-small-1.png" />
<p>T. Alexander-Arnold</p>
<span>11</span>
</li>
<li>
<img src="/assets/example-content/player-stats-small-1.png" />
<p>T. Alexander-Arnold</p>
<span>8</span>
</li>
<li>
<img src="/assets/example-content/player-stats-small-1.png" />
<p>T. Alexander-Arnold</p>
<span>5</span>
</li>
<li>
<img src="/assets/example-content/player-stats-small-1.png" />
<p>T. Alexander-Arnold</p>
<span>3</span>
</li>
</ul>
</div>
</div>
</div>
<div>
<div class="player-stats">
<div class="player-stats__img-wrapper" data-info="Interceptions">
<img src="/assets/example-content/player-stats-7.png" alt="" />
<div class="player-stats__info-block">
<div class="player-stats__position">Interceptions</div>
<div class="player-stats__value">88 </div>
<div class="player-stats__name">M.Rashford</div>
</div>
</div>
<div class="player-stats__ranking-card">
<ul>
<li>
<img src="/assets/example-content/player-stats-small-1.png" />
<p>T. Alexander-Arnold</p>
<span>11</span>
</li>
<li>
<img src="/assets/example-content/player-stats-small-1.png" />
<p>T. Alexander-Arnold</p>
<span>8</span>
</li>
<li>
<img src="/assets/example-content/player-stats-small-1.png" />
<p>T. Alexander-Arnold</p>
<span>5</span>
</li>
<li>
<img src="/assets/example-content/player-stats-small-1.png" />
<p>T. Alexander-Arnold</p>
<span>3</span>
</li>
</ul>
</div>
</div>
</div>
<div>
<div class="player-stats">
<div class="player-stats__img-wrapper" data-info="Clean sheets">
<img src="/assets/example-content/player-stats-8.png" alt="" />
<div class="player-stats__info-block">
<div class="player-stats__position">Clean sheets</div>
<div class="player-stats__value">88 </div>
<div class="player-stats__name">R.Sterling</div>
</div>
</div>
<div class="player-stats__ranking-card">
<ul>
<li>
<img src="/assets/example-content/player-stats-small-1.png" />
<p>T. Alexander-Arnold</p>
<span>11</span>
</li>
<li>
<img src="/assets/example-content/player-stats-small-1.png" />
<p>T. Alexander-Arnold</p>
<span>8</span>
</li>
<li>
<img src="/assets/example-content/player-stats-small-1.png" />
<p>T. Alexander-Arnold</p>
<span>5</span>
</li>
<li>
<img src="/assets/example-content/player-stats-small-1.png" />
<p>T. Alexander-Arnold</p>
<span>3</span>
</li>
</ul>
</div>
</div>
</div>
</div>
<div role="tablist" class="carousel__pagination"></div>
</div>
No notes defined.
{
"players": [
{
"title": "Appearances",
"playerImage": "/assets/example-content/player-stats.png",
"playerName": "M.Mount",
"statValue": "88"
},
{
"title": "Goals",
"playerImage": "/assets/example-content/player-stats-2.png",
"playerName": "H.Kane",
"statValue": "88"
},
{
"title": "Assists",
"playerImage": "/assets/example-content/player-stats-3.png",
"playerName": "T.Mings",
"statValue": "88"
},
{
"title": "Big chances created",
"playerImage": "/assets/example-content/player-stats-4.png",
"playerName": "T.Abraham",
"statValue": "4"
},
{
"title": "Dribbles",
"playerImage": "/assets/example-content/player-stats-5.png",
"playerName": "H.Winks",
"statValue": "8",
"statSubValue": ".17 Yrs"
},
{
"title": "Tackles",
"playerImage": "/assets/example-content/player-stats-6.png",
"playerName": "J.Pickford",
"statValue": "88"
},
{
"title": "Interceptions",
"playerImage": "/assets/example-content/player-stats-7.png",
"playerName": "M.Rashford",
"statValue": "88"
},
{
"title": "Clean sheets",
"playerImage": "/assets/example-content/player-stats-8.png",
"playerName": "R.Sterling",
"statValue": "88"
}
]
}
<div class="carousel-container carousel--desktop-reset">
<div class="carousel-navigation">
<button aria-label="Previous" class="carousel__cta carousel__prev"><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"><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="carousel player-stats-list" {{#if carousel-name}}data-behavior="{{carousel-name}}" {{/if}} {{#unless
carousel-name}}data-behavior="carousel" {{/unless}}>
{{#each players}}
<div>
{{render '@player-stats' this merge="true"}}
</div>
{{/each}}
</div>
<div role="tablist" class="carousel__pagination"></div>
</div>