Carousel V2

Swiper-based carousel web component. Pass slides as light-DOM children inside swiper-slide wrappers.

Article cards

Three-up card carousel with hover cards.

Live preview

Markup (editable)

<lta-carousel-v2 id="carousel-v2-wrapper-1" slides-xl="3">
<div class="swiper-slide">
  <div class="lta-card lta-card--hover lta-card--borderless lta-card--border-bottom u-shadow">
    <img alt="Alt text" srcset="/static/images/demo/responsive/demo-emma-raducanu-usopen-responsive-640.jpg 640w,/static/images/demo/responsive/demo-emma-raducanu-usopen-responsive-750.jpg 750w,/static/images/demo/responsive/demo-emma-raducanu-usopen-responsive-828.jpg 828w,/static/images/demo/responsive/demo-emma-raducanu-usopen-responsive-1080.jpg 1080w,/static/images/demo/responsive/demo-emma-raducanu-usopen-responsive-1200.jpg 1200w,/static/images/demo/responsive/demo-emma-raducanu-usopen-responsive-1920.jpg 1920w,/static/images/demo/responsive/demo-emma-raducanu-usopen-responsive-2048.jpg 2048w," sizes="100vw" loading="lazy" decoding="async" class="lta-card-img-top" width="2048" height="1152" src="/static/images/demo/responsive/demo-emma-raducanu-usopen-responsive.jpg" />
    <div class="lta-card-body">
      <h2 class="lta-card-title">Emma Raducanu Celebrates Her Victory | 2021 US Open 1</h2>
    </div>
    <div class="lta-card-footer u-pt-0 u-border-0 u-text-right"><a href="#" class="lta-card-link">Read article</a></div>
  </div>
</div>
<div class="swiper-slide">
  <div class="lta-card lta-card--hover lta-card--borderless lta-card--border-bottom u-shadow">
    <img alt="Alt text" srcset="/static/images/demo/responsive/demo-emma-raducanu-usopen-responsive-640.jpg 640w,/static/images/demo/responsive/demo-emma-raducanu-usopen-responsive-750.jpg 750w,/static/images/demo/responsive/demo-emma-raducanu-usopen-responsive-828.jpg 828w,/static/images/demo/responsive/demo-emma-raducanu-usopen-responsive-1080.jpg 1080w,/static/images/demo/responsive/demo-emma-raducanu-usopen-responsive-1200.jpg 1200w,/static/images/demo/responsive/demo-emma-raducanu-usopen-responsive-1920.jpg 1920w,/static/images/demo/responsive/demo-emma-raducanu-usopen-responsive-2048.jpg 2048w," sizes="100vw" loading="lazy" decoding="async" class="lta-card-img-top" width="2048" height="1152" src="/static/images/demo/responsive/demo-emma-raducanu-usopen-responsive.jpg" />
    <div class="lta-card-body">
      <h2 class="lta-card-title">Emma Raducanu Celebrates Her Victory | 2021 US Open 1</h2>
    </div>
    <div class="lta-card-footer u-pt-0 u-border-0 u-text-right"><a href="#" class="lta-card-link">Read article</a></div>
  </div>
</div>
<div class="swiper-slide">
  <div class="lta-card lta-card--hover lta-card--borderless lta-card--border-bottom u-shadow">
    <img alt="Alt text" srcset="/static/images/demo/responsive/demo-emma-raducanu-usopen-responsive-640.jpg 640w,/static/images/demo/responsive/demo-emma-raducanu-usopen-responsive-750.jpg 750w,/static/images/demo/responsive/demo-emma-raducanu-usopen-responsive-828.jpg 828w,/static/images/demo/responsive/demo-emma-raducanu-usopen-responsive-1080.jpg 1080w,/static/images/demo/responsive/demo-emma-raducanu-usopen-responsive-1200.jpg 1200w,/static/images/demo/responsive/demo-emma-raducanu-usopen-responsive-1920.jpg 1920w,/static/images/demo/responsive/demo-emma-raducanu-usopen-responsive-2048.jpg 2048w," sizes="100vw" loading="lazy" decoding="async" class="lta-card-img-top" width="2048" height="1152" src="/static/images/demo/responsive/demo-emma-raducanu-usopen-responsive.jpg" />
    <div class="lta-card-body">
      <h2 class="lta-card-title">Emma Raducanu Celebrates Her Victory | 2021 US Open 1</h2>
    </div>
    <div class="lta-card-footer u-pt-0 u-border-0 u-text-right"><a href="#" class="lta-card-link">Read article</a></div>
  </div>
</div>
<div class="swiper-slide">
  <div class="lta-card lta-card--hover lta-card--borderless lta-card--border-bottom u-shadow">
    <img alt="Alt text" srcset="/static/images/demo/responsive/demo-emma-raducanu-usopen-responsive-640.jpg 640w,/static/images/demo/responsive/demo-emma-raducanu-usopen-responsive-750.jpg 750w,/static/images/demo/responsive/demo-emma-raducanu-usopen-responsive-828.jpg 828w,/static/images/demo/responsive/demo-emma-raducanu-usopen-responsive-1080.jpg 1080w,/static/images/demo/responsive/demo-emma-raducanu-usopen-responsive-1200.jpg 1200w,/static/images/demo/responsive/demo-emma-raducanu-usopen-responsive-1920.jpg 1920w,/static/images/demo/responsive/demo-emma-raducanu-usopen-responsive-2048.jpg 2048w," sizes="100vw" loading="lazy" decoding="async" class="lta-card-img-top" width="2048" height="1152" src="/static/images/demo/responsive/demo-emma-raducanu-usopen-responsive.jpg" />
    <div class="lta-card-body">
      <h2 class="lta-card-title">Emma Raducanu Celebrates Her Victory | 2021 US Open 1</h2>
    </div>
    <div class="lta-card-footer u-pt-0 u-border-0 u-text-right"><a href="#" class="lta-card-link">Read article</a></div>
  </div>
</div>
<div class="swiper-slide">
  <div class="lta-card lta-card--hover lta-card--borderless lta-card--border-bottom u-shadow">
    <img alt="Alt text" srcset="/static/images/demo/responsive/demo-emma-raducanu-usopen-responsive-640.jpg 640w,/static/images/demo/responsive/demo-emma-raducanu-usopen-responsive-750.jpg 750w,/static/images/demo/responsive/demo-emma-raducanu-usopen-responsive-828.jpg 828w,/static/images/demo/responsive/demo-emma-raducanu-usopen-responsive-1080.jpg 1080w,/static/images/demo/responsive/demo-emma-raducanu-usopen-responsive-1200.jpg 1200w,/static/images/demo/responsive/demo-emma-raducanu-usopen-responsive-1920.jpg 1920w,/static/images/demo/responsive/demo-emma-raducanu-usopen-responsive-2048.jpg 2048w," sizes="100vw" loading="lazy" decoding="async" class="lta-card-img-top" width="2048" height="1152" src="/static/images/demo/responsive/demo-emma-raducanu-usopen-responsive.jpg" />
    <div class="lta-card-body">
      <h2 class="lta-card-title">Emma Raducanu Celebrates Her Victory | 2021 US Open 1</h2>
    </div>
    <div class="lta-card-footer u-pt-0 u-border-0 u-text-right"><a href="#" class="lta-card-link">Read article</a></div>
  </div>
</div>
</lta-carousel-v2>

Inverse controls (horizontal cards)

Teal background with horizontal card layout and inverse nav controls.

Live preview

Markup (editable)

<div class="u-bg-lta-accent-teal">
  <div class="l-grid l-lta-grid u-mb-4">
    <div class="g-col-12 g-col-xl-12 u-px-3 u-py-3">
      <lta-carousel-v2 id="carousel-v2-wrapper-2" classes="lta-carouselv2__controls--inverse" slides-md="1" slides-xl="auto">
<div class="swiper-slide">
  <div class="lta-card lta-card--borderless lta-card--border-left is-vertical-sm is-horizontal-md is-horizontal-xl u-shadow u-mb-3" style="--lta-theme--1: var(--color-lta-accent-bright-green)">
    <div class="l-lta-grid" style="--lta-gap: 0;">
      <div class="g-col-12 g-col-md-5 g-col-xl-4">
        <div class="lta-card-header u-pb-0 u-border-0 md:u-pt-4">
          <span class="lta-tag lta-tag--light">LTA INITIATIVES</span>
        </div>
        <div class="lta-card-body">
          <h2 class="lta-card-title">LTA hails Government's investment into public park courts </h2>
          <p class="card-text">The £22million investment, together with an investment from the LTA of £8.5m, will see thousands of public park tennis courts brought back to life for the benefit of their local community</p>
        </div>
        <div class="lta-card-footer u-pt-0 u-border-0 u-text-right">
          <a href="#" class="lta-card-link">Read Article</a>
        </div>
      </div>
      <div class="lta-card__h-img-container g-col-12 g-col-md-7 g-col-xl-8">
        <img alt="Alt text" class="u-h-100 u-object-cover lta-card-img" width="2048" height="1152" loading="lazy" decoding="async" src="/static/images/demo/responsive/demo-emma-raducanu-usopen-responsive.jpg" />
      </div>
    </div>
  </div>
</div>
<div class="swiper-slide">
  <div class="lta-card lta-card--borderless lta-card--border-left is-vertical-sm is-horizontal-md is-horizontal-xl u-shadow u-mb-3" style="--lta-theme--1: var(--color-lta-accent-bright-green)">
    <div class="l-lta-grid" style="--lta-gap: 0;">
      <div class="g-col-12 g-col-md-5 g-col-xl-4">
        <div class="lta-card-header u-pb-0 u-border-0 md:u-pt-4">
          <span class="lta-tag lta-tag--light">LTA INITIATIVES</span>
        </div>
        <div class="lta-card-body">
          <h2 class="lta-card-title">LTA hails Government's investment into public park courts </h2>
          <p class="card-text">The £22million investment, together with an investment from the LTA of £8.5m, will see thousands of public park tennis courts brought back to life for the benefit of their local community</p>
        </div>
        <div class="lta-card-footer u-pt-0 u-border-0 u-text-right">
          <a href="#" class="lta-card-link">Read Article</a>
        </div>
      </div>
      <div class="lta-card__h-img-container g-col-12 g-col-md-7 g-col-xl-8">
        <img alt="Alt text" class="u-h-100 u-object-cover lta-card-img" width="2048" height="1152" loading="lazy" decoding="async" src="/static/images/demo/responsive/demo-emma-raducanu-usopen-responsive.jpg" />
      </div>
    </div>
  </div>
</div>
<div class="swiper-slide">
  <div class="lta-card lta-card--borderless lta-card--border-left is-vertical-sm is-horizontal-md is-horizontal-xl u-shadow u-mb-3" style="--lta-theme--1: var(--color-lta-accent-bright-green)">
    <div class="l-lta-grid" style="--lta-gap: 0;">
      <div class="g-col-12 g-col-md-5 g-col-xl-4">
        <div class="lta-card-header u-pb-0 u-border-0 md:u-pt-4">
          <span class="lta-tag lta-tag--light">LTA INITIATIVES</span>
        </div>
        <div class="lta-card-body">
          <h2 class="lta-card-title">LTA hails Government's investment into public park courts </h2>
          <p class="card-text">The £22million investment, together with an investment from the LTA of £8.5m, will see thousands of public park tennis courts brought back to life for the benefit of their local community</p>
        </div>
        <div class="lta-card-footer u-pt-0 u-border-0 u-text-right">
          <a href="#" class="lta-card-link">Read Article</a>
        </div>
      </div>
      <div class="lta-card__h-img-container g-col-12 g-col-md-7 g-col-xl-8">
        <img alt="Alt text" class="u-h-100 u-object-cover lta-card-img" width="2048" height="1152" loading="lazy" decoding="async" src="/static/images/demo/responsive/demo-emma-raducanu-usopen-responsive.jpg" />
      </div>
    </div>
  </div>
</div>
<div class="swiper-slide">
  <div class="lta-card lta-card--borderless lta-card--border-left is-vertical-sm is-horizontal-md is-horizontal-xl u-shadow u-mb-3" style="--lta-theme--1: var(--color-lta-accent-bright-green)">
    <div class="l-lta-grid" style="--lta-gap: 0;">
      <div class="g-col-12 g-col-md-5 g-col-xl-4">
        <div class="lta-card-header u-pb-0 u-border-0 md:u-pt-4">
          <span class="lta-tag lta-tag--light">LTA INITIATIVES</span>
        </div>
        <div class="lta-card-body">
          <h2 class="lta-card-title">LTA hails Government's investment into public park courts </h2>
          <p class="card-text">The £22million investment, together with an investment from the LTA of £8.5m, will see thousands of public park tennis courts brought back to life for the benefit of their local community</p>
        </div>
        <div class="lta-card-footer u-pt-0 u-border-0 u-text-right">
          <a href="#" class="lta-card-link">Read Article</a>
        </div>
      </div>
      <div class="lta-card__h-img-container g-col-12 g-col-md-7 g-col-xl-8">
        <img alt="Alt text" class="u-h-100 u-object-cover lta-card-img" width="2048" height="1152" loading="lazy" decoding="async" src="/static/images/demo/responsive/demo-emma-raducanu-usopen-responsive.jpg" />
      </div>
    </div>
  </div>
</div>
<div class="swiper-slide">
  <div class="lta-card lta-card--borderless lta-card--border-left is-vertical-sm is-horizontal-md is-horizontal-xl u-shadow u-mb-3" style="--lta-theme--1: var(--color-lta-accent-bright-green)">
    <div class="l-lta-grid" style="--lta-gap: 0;">
      <div class="g-col-12 g-col-md-5 g-col-xl-4">
        <div class="lta-card-header u-pb-0 u-border-0 md:u-pt-4">
          <span class="lta-tag lta-tag--light">LTA INITIATIVES</span>
        </div>
        <div class="lta-card-body">
          <h2 class="lta-card-title">LTA hails Government's investment into public park courts </h2>
          <p class="card-text">The £22million investment, together with an investment from the LTA of £8.5m, will see thousands of public park tennis courts brought back to life for the benefit of their local community</p>
        </div>
        <div class="lta-card-footer u-pt-0 u-border-0 u-text-right">
          <a href="#" class="lta-card-link">Read Article</a>
        </div>
      </div>
      <div class="lta-card__h-img-container g-col-12 g-col-md-7 g-col-xl-8">
        <img alt="Alt text" class="u-h-100 u-object-cover lta-card-img" width="2048" height="1152" loading="lazy" decoding="async" src="/static/images/demo/responsive/demo-emma-raducanu-usopen-responsive.jpg" />
      </div>
    </div>
  </div>
</div>
      </lta-carousel-v2>
    </div>
  </div>
</div>

YouTube Shorts

Horizontal carousel of lta-youtube-shorts slides.

Live preview

Markup (editable)

<lta-carousel-v2 id="carousel-v2-youtube-shorts" slides-xl="6" slides-md="3" slides-sm="1">
<div class="swiper-slide">
  <div class="u-mb-3">
    <lta-youtube-shorts video-code="3VKS9BSA4AM" width="315" height="560" title="Doubles masterclass at Wimbledon 🎾"></lta-youtube-shorts>
    <p class="u-caption2 u-mt-2">Doubles masterclass at Wimbledon 🎾</p>
  </div>
</div>
<div class="swiper-slide">
  <div class="u-mb-3">
    <lta-youtube-shorts video-code="3VKS9BSA4AM" width="315" height="560" title="Doubles masterclass at Wimbledon 🎾"></lta-youtube-shorts>
    <p class="u-caption2 u-mt-2">Doubles masterclass at Wimbledon 🎾</p>
  </div>
</div>
<div class="swiper-slide">
  <div class="u-mb-3">
    <lta-youtube-shorts video-code="3VKS9BSA4AM" width="315" height="560" title="Doubles masterclass at Wimbledon 🎾"></lta-youtube-shorts>
    <p class="u-caption2 u-mt-2">Doubles masterclass at Wimbledon 🎾</p>
  </div>
</div>
<div class="swiper-slide">
  <div class="u-mb-3">
    <lta-youtube-shorts video-code="3VKS9BSA4AM" width="315" height="560" title="Doubles masterclass at Wimbledon 🎾"></lta-youtube-shorts>
    <p class="u-caption2 u-mt-2">Doubles masterclass at Wimbledon 🎾</p>
  </div>
</div>
<div class="swiper-slide">
  <div class="u-mb-3">
    <lta-youtube-shorts video-code="3VKS9BSA4AM" width="315" height="560" title="Doubles masterclass at Wimbledon 🎾"></lta-youtube-shorts>
    <p class="u-caption2 u-mt-2">Doubles masterclass at Wimbledon 🎾</p>
  </div>
</div>
<div class="swiper-slide">
  <div class="u-mb-3">
    <lta-youtube-shorts video-code="3VKS9BSA4AM" width="315" height="560" title="Doubles masterclass at Wimbledon 🎾"></lta-youtube-shorts>
    <p class="u-caption2 u-mt-2">Doubles masterclass at Wimbledon 🎾</p>
  </div>
</div>
</lta-carousel-v2>