England Football

England Merchandise Carousel 

<div class="england-merchandise-carousel">
    <div class="optional-title white-font ">
        <h2 class="optional-title__title">Grassroots Inititives</h2>
        <a href="#" class="optional-title__view-button">view all</a>
    </div>
    <div class="carousel merchandise-section" data-behavior="england-merchandise-carousel">
        <div>
            <div class="england-merchandise-card">
                <img class="england-merchandise-card__image" src="/assets/example-content/merchandise-image.png" alt="">
                <img class="england-merchandise-card__product-image" src="/assets/example-content/merchandise-product-img.png" alt="">
                <div class="england-merchandise-card__card-content">
                    <div class="england-merchandise-card__price-section">
                        <div class="price"><span>&#163;</span>70</div>
                        <div class="discount"><span>&#163;</span>30</div>
                    </div>
                    <div class="title">Mens Home Shirt 2021-22</div>
                    <div class="england-merchandise-card__cta-section">
                        <div class="buynow"><a href="" class="cta cta--primary " target="_blank" name="buy-now">
                                <p>Buy Now</p>
                            </a>
                        </div>
                        <div class="seemore"><a href="" class="cta cta--primary " target="_blank" name="see-more">
                                <p>See More</p>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div>
            <div class="england-merchandise-card">
                <img class="england-merchandise-card__image" src="/assets/example-content/merchandise-image.png" alt="">
                <img class="england-merchandise-card__product-image" src="/assets/example-content/merchandise-product-img.png" alt="">
                <div class="england-merchandise-card__card-content">
                    <div class="england-merchandise-card__price-section">
                        <div class="price"><span>&#163;</span>70</div>
                        <div class="discount"><span>&#163;</span>30</div>
                    </div>
                    <div class="title">Mens Home Shirt 2021-22</div>
                    <div class="england-merchandise-card__cta-section">
                        <div class="buynow"><a href="" class="cta cta--primary " target="_blank" name="buy-now">
                                <p>Buy Now</p>
                            </a>
                        </div>
                        <div class="seemore"><a href="" class="cta cta--primary " target="_blank" name="see-more">
                                <p>See More</p>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div>
            <div class="england-merchandise-card">
                <img class="england-merchandise-card__image" src="/assets/example-content/merchandise-image.png" alt="">
                <img class="england-merchandise-card__product-image" src="/assets/example-content/merchandise-product-img.png" alt="">
                <div class="england-merchandise-card__card-content">
                    <div class="england-merchandise-card__price-section">
                        <div class="price"><span>&#163;</span>70</div>
                        <div class="discount"><span>&#163;</span>30</div>
                    </div>
                    <div class="title">Mens Home Shirt 2021-22</div>
                    <div class="england-merchandise-card__cta-section">
                        <div class="buynow"><a href="" class="cta cta--primary " target="_blank" name="buy-now">
                                <p>Buy Now</p>
                            </a>
                        </div>
                        <div class="seemore"><a href="" class="cta cta--primary " target="_blank" name="see-more">
                                <p>See More</p>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div>
            <div class="england-merchandise-card">
                <img class="england-merchandise-card__image" src="/assets/example-content/merchandise-image.png" alt="">
                <img class="england-merchandise-card__product-image" src="/assets/example-content/merchandise-product-img.png" alt="">
                <div class="england-merchandise-card__card-content">
                    <div class="england-merchandise-card__price-section">
                        <div class="price"><span>&#163;</span>70</div>
                        <div class="discount"><span>&#163;</span>30</div>
                    </div>
                    <div class="title">Mens Home Shirt 2021-22</div>
                    <div class="england-merchandise-card__cta-section">
                        <div class="buynow"><a href="" class="cta cta--primary " target="_blank" name="buy-now">
                                <p>Buy Now</p>
                            </a>
                        </div>
                        <div class="seemore"><a href="" class="cta cta--primary " target="_blank" name="see-more">
                                <p>See More</p>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div>
            <div class="england-merchandise-card">
                <img class="england-merchandise-card__image" src="/assets/example-content/merchandise-image.png" alt="">
                <img class="england-merchandise-card__product-image" src="/assets/example-content/merchandise-product-img.png" alt="">
                <div class="england-merchandise-card__card-content">
                    <div class="england-merchandise-card__price-section">
                        <div class="price"><span>&#163;</span>70</div>
                        <div class="discount"><span>&#163;</span>30</div>
                    </div>
                    <div class="title">Mens Home Shirt 2021-22</div>
                    <div class="england-merchandise-card__cta-section">
                        <div class="buynow"><a href="" class="cta cta--primary " target="_blank" name="buy-now">
                                <p>Buy Now</p>
                            </a>
                        </div>
                        <div class="seemore"><a href="" class="cta cta--primary " target="_blank" name="see-more">
                                <p>See More</p>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div>
            <div class="england-merchandise-card">
                <img class="england-merchandise-card__image" src="/assets/example-content/merchandise-image.png" alt="">
                <img class="england-merchandise-card__product-image" src="/assets/example-content/merchandise-product-img.png" alt="">
                <div class="england-merchandise-card__card-content">
                    <div class="england-merchandise-card__price-section">
                        <div class="price"><span>&#163;</span>70</div>
                        <div class="discount"><span>&#163;</span>30</div>
                    </div>
                    <div class="title">Mens Home Shirt 2021-22</div>
                    <div class="england-merchandise-card__cta-section">
                        <div class="buynow"><a href="" class="cta cta--primary " target="_blank" name="buy-now">
                                <p>Buy Now</p>
                            </a>
                        </div>
                        <div class="seemore"><a href="" class="cta cta--primary " target="_blank" name="see-more">
                                <p>See More</p>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div>
            <div class="england-merchandise-card">
                <img class="england-merchandise-card__image" src="/assets/example-content/merchandise-image.png" alt="">
                <img class="england-merchandise-card__product-image" src="/assets/example-content/merchandise-product-img.png" alt="">
                <div class="england-merchandise-card__card-content">
                    <div class="england-merchandise-card__price-section">
                        <div class="price"><span>&#163;</span>70</div>
                        <div class="discount"><span>&#163;</span>30</div>
                    </div>
                    <div class="title">Mens Home Shirt 2021-22</div>
                    <div class="england-merchandise-card__cta-section">
                        <div class="buynow"><a href="" class="cta cta--primary " target="_blank" name="buy-now">
                                <p>Buy Now</p>
                            </a>
                        </div>
                        <div class="seemore"><a href="" class="cta cta--primary " target="_blank" name="see-more">
                                <p>See More</p>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div>
            <div class="england-merchandise-card">
                <img class="england-merchandise-card__image" src="/assets/example-content/merchandise-image.png" alt="">
                <img class="england-merchandise-card__product-image" src="/assets/example-content/merchandise-product-img.png" alt="">
                <div class="england-merchandise-card__card-content">
                    <div class="england-merchandise-card__price-section">
                        <div class="price"><span>&#163;</span>70</div>
                        <div class="discount"><span>&#163;</span>30</div>
                    </div>
                    <div class="title">Mens Home Shirt 2021-22</div>
                    <div class="england-merchandise-card__cta-section">
                        <div class="buynow"><a href="" class="cta cta--primary " target="_blank" name="buy-now">
                                <p>Buy Now</p>
                            </a>
                        </div>
                        <div class="seemore"><a href="" class="cta cta--primary " target="_blank" name="see-more">
                                <p>See More</p>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div>
            <div class="england-merchandise-card">
                <img class="england-merchandise-card__image" src="/assets/example-content/merchandise-image.png" alt="">
                <img class="england-merchandise-card__product-image" src="/assets/example-content/merchandise-product-img.png" alt="">
                <div class="england-merchandise-card__card-content">
                    <div class="england-merchandise-card__price-section">
                        <div class="price"><span>&#163;</span>70</div>
                        <div class="discount"><span>&#163;</span>30</div>
                    </div>
                    <div class="title">Mens Home Shirt 2021-22</div>
                    <div class="england-merchandise-card__cta-section">
                        <div class="buynow"><a href="" class="cta cta--primary " target="_blank" name="buy-now">
                                <p>Buy Now</p>
                            </a>
                        </div>
                        <div class="seemore"><a href="" class="cta cta--primary " target="_blank" name="see-more">
                                <p>See More</p>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div>
            <div class="england-merchandise-card">
                <img class="england-merchandise-card__image" src="/assets/example-content/merchandise-image.png" alt="">
                <img class="england-merchandise-card__product-image" src="/assets/example-content/merchandise-product-img.png" alt="">
                <div class="england-merchandise-card__card-content">
                    <div class="england-merchandise-card__price-section">
                        <div class="price"><span>&#163;</span>70</div>
                        <div class="discount"><span>&#163;</span>30</div>
                    </div>
                    <div class="title">Mens Home Shirt 2021-22</div>
                    <div class="england-merchandise-card__cta-section">
                        <div class="buynow"><a href="" class="cta cta--primary " target="_blank" name="buy-now">
                                <p>Buy Now</p>
                            </a>
                        </div>
                        <div class="seemore"><a href="" class="cta cta--primary " target="_blank" name="see-more">
                                <p>See More</p>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div>
            <div class="england-merchandise-card">
                <img class="england-merchandise-card__image" src="/assets/example-content/merchandise-image.png" alt="">
                <img class="england-merchandise-card__product-image" src="/assets/example-content/merchandise-product-img.png" alt="">
                <div class="england-merchandise-card__card-content">
                    <div class="england-merchandise-card__price-section">
                        <div class="price"><span>&#163;</span>70</div>
                        <div class="discount"><span>&#163;</span>30</div>
                    </div>
                    <div class="title">Mens Home Shirt 2021-22</div>
                    <div class="england-merchandise-card__cta-section">
                        <div class="buynow"><a href="" class="cta cta--primary " target="_blank" name="buy-now">
                                <p>Buy Now</p>
                            </a>
                        </div>
                        <div class="seemore"><a href="" class="cta cta--primary " target="_blank" name="see-more">
                                <p>See More</p>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="carousel-navigation">
        <button aria-label="Previous" class="merchandise-cta-prev merchandise__prev">
            <span class="visually-hidden">Previous page</span>
        </button>
        <button aria-label="Next" class="merchandise-cta-next merchandise__next">
            <span class="visually-hidden">Next page</span>
        </button>
    </div>
    <div class="text-link text-link--blue">
        <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. */
  • Content: 
    import Glider from '../../behaviours/carousel/glider/glider';
/*eslint-disable */
export default ({ englandmerchandiseElement, responsive = [], ...options }) => {
  const prevButton = document.querySelector('.merchandise__prev');
  const nextButton = document.querySelector('.merchandise__next');

  const defaultOptions = {
    slidesToShow: 1,
    slidesToScroll: 1,
    scrollLock: true,
    draggable: true,
    arrows: {
      prev: prevButton,
      next: nextButton,
    },
    responsive: [
      {
        breakpoint: 350,
        settings: {
          slidesToShow: 1.25,
          slidesToScroll: 1,
        },
      },
      {
        breakpoint: 450,
        settings: {
          slidesToShow: 1.5,
          slidesToScroll: 1,
        },
      },
      {
        breakpoint: 600,
        settings: {
          slidesToShow: 2,
          slidesToScroll: 2,
        },
      },
      {
        breakpoint: 960,
        settings: {
          slidesToShow: 2.5,
          slidesToScroll: 2,
        },
      },
      {
        breakpoint: 1200,
        settings: {
          slidesToShow: 3.2,
          slidesToScroll: 3,
        },
      },
      {
        breakpoint: 1440,
        settings: {
          slidesToShow: 3.5,
          slidesToScroll: 3,
        },
      },
      {
        breakpoint: 1800,
        settings: {
          slidesToShow: 4,
          slidesToScroll: 4,
        },
      },
      {
        breakpoint: 1900,
        settings: {
          slidesToShow: 4.5,
          slidesToScroll: 4,
        },
      },
      ...responsive,
    ],
  };

  return new Glider(englandmerchandiseElement, {
    ...defaultOptions,
    ...options,
  });
};
  • URL: /components/raw/england-merchandise-carousel/england-merchandise-carousel.js
  • Filesystem Path: src/library/modules/england-merchandise-carousel/england-merchandise-carousel.js
  • Size: 1.7 KB
  • Content: 
    .england-merchandise-carousel {
  position: relative;
  background: $dark-blue;
  padding: 3.2rem 0 5.2rem 0;

  .optional-title {
    margin-bottom: 0.4rem;
  }

  .optional-title__title::after {
    background-color: $grey;
  }

  .optional-title__view-button {
    color: $white;

    &::after {
      background: url('./assets/images/view-all-arrow-white.svg') no-repeat
        center;
    }

    &:hover {
      color: $white;
    }
  }

  .merchandise-section {
    margin-bottom: 1.1rem;
    padding-top: 2rem;
  }

  .carousel-navigation {
    display: none;
  }

  @media screen and (min-width: $mq-medium) {
    padding: 5.2rem 0;

    .optional-title {
      margin-left: 9.8rem;
      margin-right: 9.8rem;
      margin-bottom: 1.2rem;
    }

    .merchandise-section {
      margin-bottom: 2.3rem;
    }

    .carousel-navigation {
      display: block;
    }

    .glider-slide > *:first-child {
      margin-left: 0 !important;
    }

    .glider-slide:first-child {
      margin-left: 9.8rem;
    }

    .merchandise-cta-prev {
      background: #5b688512;
      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: 28rem;
      transition: all 0.3s ease-in;
      cursor: pointer;

      &::after {
        content: '';
        background: url(./assets/images/glider-left-arrow.svg) no-repeat center;
        display: block;
        height: 0.9rem;
      }

      &:hover {
        background: $color-interface-light;
      }
    }

    .merchandise-cta-next {
      background: #5b688512;
      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: 28rem;
      transition: all 0.3s ease-in;
      cursor: pointer;

      &::after {
        content: '';
        background: url(./assets/images/glider-right-arrow.svg) no-repeat center;
        display: block;
        height: 0.9rem;
      }

      &:hover {
        background: $color-interface-light;
      }
    }
  }
}
  • URL: /components/raw/england-merchandise-carousel/england-merchandise-carousel.scss
  • Filesystem Path: src/library/modules/england-merchandise-carousel/england-merchandise-carousel.scss
  • Size: 2.3 KB 
<div class="england-merchandise-carousel">
    {{render '@optional-title--white-font-and-red-highlighter'}}
    <div class="carousel merchandise-section" data-behavior="england-merchandise-carousel">
      <div>
        {{render '@england-merchandise-card'}}
      </div>
      <div>
        {{render '@england-merchandise-card'}}
      </div>
      <div>
        {{render '@england-merchandise-card'}}
      </div>
      <div>
        {{render '@england-merchandise-card'}}
      </div>
      <div>
        {{render '@england-merchandise-card'}}
      </div>
      <div>
        {{render '@england-merchandise-card'}}
      </div>
      <div>
        {{render '@england-merchandise-card'}}
      </div>
      <div>
        {{render '@england-merchandise-card'}}
      </div>
      <div>
        {{render '@england-merchandise-card'}}
      </div>
      <div>
        {{render '@england-merchandise-card'}}
      </div>
      <div>
        {{render '@england-merchandise-card'}}
      </div>
    </div>

    <div class="carousel-navigation">
      <button aria-label="Previous" class="merchandise-cta-prev merchandise__prev">
        <span class="visually-hidden">Previous page</span>
      </button>
      <button aria-label="Next" class="merchandise-cta-next merchandise__next">
        <span class="visually-hidden">Next page</span>
      </button>
    </div>
    {{render '@text-link'}}
</div>