Endless Scroll

Endless Scroll automatically loads more movies as the page nears the bottom. Endless Scroll works dynamically and determines what page to load via the json url that is provided from the backend.

Within the html markup it expects the data-page-url attribute which will have a value of the initial json page that it needs to load. data-base-url is optional and is the base url of the styleguide.

1408

A.R.C.H.I.E.

The Accidental Spy

Adolf Hitler: The Artist

Akeelah and the Bee

The Alamo (2004)

Alpha Dog

America's Sweethearts

      <section class="movies-gallery js-endless-scroll" data-page-url="{{page.moviesPagination.paginationCta.nextCta.ctaLink}}" data-context="title grid:{{page.meta.genre}}">
        <div class="promo-group-header">
          <h3 class="promo-group-header__title">TMC’S FULL MOVIE LIBRARY</h3>
        </div>
        <div class="movies-gallery__inner">
          {{#moviesPagination.tileList}}
          <a class="movies-gallery__item" href="{{ctaLink}}" data-track data-label="title page link:{{ctaLabel}}">
            <div class="movies-gallery__image">
              <picture>
                <source data-srcset="{{imageUrl}}"
                  srcset="{{imageUrl}}">
                <img class="lazyload" alt="{{ctaLabel}}" src="https://www.sho.com/assets/images/lib/blank.gif">
              </picture>
            </div>
            <div class="movies-gallery__title">{{ctaLabel}}</div>
          </a>
          {{/moviesPagination.tileList}}

        </div>
       <div class="loading-animation loading-animation--scrolling"></div>
      </section>