England Football

Hero Carousel Banner 

<div class="hero-carousel" data-behavior="hero-carousel">
    <div data-glide-el="track">
        <div class="glide__slides">
            <div class="banner  banner--gradient">
                <picture>
                    <source media="(max-width: 600px)" srcset="/assets/example-content/womens-hero-600.png">
                    <source media="(min-width: 600px)" srcset="/assets/example-content/womens-hero.png">
                    <img src="/assets/example-content/womens-hero.png" alt="">
                </picture>
                <div class="hero-overlay ">
                    <div class="hero-overlay--gradient"></div>
                    <div class="hero-overlay__content">
                        <div class="hero-overlay__tag">Tag for content</div>
                        <h1 class="hero-overlay__title">
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit
                        </h1>
                        <div class="hero-overlay__subtitle">
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
                        </div>
                        <div class="hero-overlay__cta-btn">
                            <a class="cta cta--tertiary cta--inline" href="/">Button cta</a>
                        </div>
                    </div>
                </div>
            </div>

            <div class="banner  ">
                <picture>
                    <source media="(max-width: 600px)" srcset="/assets/example-content/womens-hero-600.png">
                    <source media="(min-width: 600px)" srcset="/assets/example-content/womens-hero.png">
                    <img src="/assets/example-content/womens-hero.png" alt="">
                </picture>
                <div class="hero-overlay ">
                    <div class="hero-overlay--gradient"></div>
                    <div class="hero-overlay__content">
                        <div class="hero-overlay__tag">Tag for content</div>
                        <h1 class="hero-overlay__title">
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit
                        </h1>
                        <div class="hero-overlay__subtitle">
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
                        </div>
                        <div class="hero-overlay__cta-btn">
                            <a class="cta cta--tertiary cta--inline" href="/">Button cta</a>
                        </div>
                    </div>
                </div>
            </div>

            <div class="banner  ">
                <picture>
                    <source media="(max-width: 600px)" srcset="/assets/example-content/womens-hero-600.png">
                    <source media="(min-width: 600px)" srcset="/assets/example-content/womens-hero.png">
                    <img src="/assets/example-content/womens-hero.png" alt="">
                </picture>
            </div>

        </div>
    </div>
</div>

No notes defined.

/* No context defined. */
  • Content: 
    import Glide from '@glidejs/glide';

const defaultOptions = {
  perView: 1,
  autoplay: 10000,
  hoverpause: false,
  type: 'carousel',
};

export default (carouselElement, options) => {
  const settings = { ...defaultOptions, ...options };

  const slides = carouselElement.querySelectorAll('.glide__slides > div');

  const bulletContainer = document.createElement('div');

  bulletContainer.classList.add('hero-carousel__bullets');
  bulletContainer.dataset.glideEl = 'controls[nav]';

  slides.forEach((slide, index) => {
    const button = document.createElement('button');

    button.dataset.glideDir = `=${index}`;
    button.style.animationDuration = `${settings.autoplay / 1000}s`;
    bulletContainer.appendChild(button);
  });

  carouselElement.appendChild(bulletContainer);

  return new Glide(carouselElement, { ...settings }).mount();
};
  • URL: /components/raw/hero-carousel-banner/hero-carousel-banner.js
  • Filesystem Path: src/library/modules/hero-banner/hero-carousel-banner/hero-carousel-banner.js
  • Size: 854 Bytes
  • Content: 
    @import 'node_modules/@glidejs/glide/src/assets/sass/glide.core';

.hero-carousel {
  position: relative;
  overflow: hidden;

  &__bullets {
    bottom: 5rem;
    display: flex;
    justify-content: space-between;
    left: 50%;
    padding: 0 $spacing-m;
    position: absolute;
    transform: translateX(-50%);
    width: 100%;

    [data-behavior='hero-carousel-with-squad-selection'] & {
      bottom: 8.2rem;
    }

    @media (min-width: $mq-medium) {
      [data-behavior='hero-carousel-with-squad-selection'] & {
        bottom: 6.2rem;
      }
    }

    button {
      appearance: none;
      background: rgba($white, 0.45);
      border: none;
      border-radius: $border-radius;
      cursor: pointer;
      height: $spacing-xs;
      margin: $spacing-s;
      overflow: hidden;
      padding: 0;
      width: 100%;

      &::after {
        content: '';
        background-color: $white;
        display: block;
        height: 100%;
        width: 0;
      }
    }
  }
  .glide__bullet--active::after {
    animation: showProgress 10s linear forwards;
    animation-duration: inherit; // Slide duration set on button by JS
  }

  @media screen and (min-width: $mq-medium) {
    &__bullets {
      max-width: 25%;
      bottom: 4.5rem;

      [data-behavior='hero-carousel-with-squad-selection'] & {
        bottom: 14.5rem;
      }
    }
  }
}

@keyframes showProgress {
  from {
    width: 0;
  }

  to {
    width: 100%;
  }
}
  • URL: /components/raw/hero-carousel-banner/hero-carousel-banner.scss
  • Filesystem Path: src/library/modules/hero-banner/hero-carousel-banner/hero-carousel-banner.scss
  • Size: 1.4 KB 
<div class="hero-carousel" data-behavior="hero-carousel">
  <div data-glide-el="track">
    <div class="glide__slides">
      {{render '@hero-image-banner--with-overlay-and-gradient'}}
      {{render '@hero-image-banner--with-overlay'}}
      {{render '@hero-image-banner'}}
    </div>
  </div>
</div>