Slider

In previous versions of the slider, slidable content was manipulated with JavaScript only. In this updated version, we have pivoted to let the user make use of horizontal scrolling via overflow-x: scroll on both desktop and mobile. The use of side arrows to control scrolling via JS still exists on desktop/tablet in addition to the horizontal swipe behavior.

A Slider should

• provide a simple pagination strategy for a horizontal 'band' of content, by swiping horizontally OR by clicking/tapping on an arrow you reveal content that is offscreen
• Sliders should be swipe-able/side-scrollable on both desktop and mobile.
• Control arrows should only be seen on desktop and tablets
• Control arrows should cause the slider to “snap to grid”, even when the starting position is not snapped to grid due to previous scrolling
• In instances where the browser width is small but controls still exists, “previous” scrolling will most likely only scroll back one image at a time. This is due to the calculations involved scrolling back too far if the initial position was not snapped to grid (ie, some promos were overlooked)
• the default rotation style is none
• to add the behavior where a grid is drawn at higher breakpoints add the attribute data-grid-at=768 where the supplied integer is the window size above which the grid should be drawn
• TODO add infinite rotation if configured with data-rotate=infinite
• TODO handle differently sized cards (be agnostic about contents)

<div class="slider js-slider">
  <a href="#" class="slider__control slider__control--prev">
    <span class="slider__control__label">previous</span>
  </a>
  <div class="slider__container">
    <div class="slider__content">
      <ul class="slider__items">
        <li class="slider__item slider-example__item">
          <em class="slider-example__image"></em>
          <h5>item 1</h5>
        </li>
        <li class="slider__item slider-example__item">
          <em class="slider-example__image"></em>
          <h5>item 2</h5>
        </li>
        <li class="slider__item slider-example__item">
          <em class="slider-example__image"></em>
          <h5>item 3</h5>
        </li>
        <li class="slider__item slider-example__item">
          <em class="slider-example__image"></em>
          <h5>item 4</h5>
        </li>
      </ul>
    </div>
  </div>
  <a href="#" class="slider__control slider__control--next">
    <span class="slider__control__label">next</span>
  </a>
</div>

Standard Slider

Slider with a few items

Slider with Grid-At Behavior

Set a breakpoint after which the slider will transform into an unconstrained container without scrolling (grid), typically combined with a grid-like layout for the content. Used extensively in homepage.

<div data-step="page" data-grid-at="768"
  class="slider js-slider slider--example slider--example-grid-at" 
>
  ...
</div>

Slider with Grid-Until Behavior

The inverse of above example. Slider content will be unconstrained with block-level (ie stacked) display _until the specified breakpoint is reached.

<div data-step="page" data-grid-until="768"
  class="slider js-slider slider--example slider--example-grid-until" 
>
  ...
</div>

Slider of Season Cards

Genre Slider

A collection of genres, represented by portrait aspect artworks, found in the movies page

Movies slider from two col

Promos with portrait aspect-ratio art, two column layout on mobile and slider for desktop