Open Close
Teva VIsion
Font Face
Teva Sans Latin
Drafts & Templates
PBS Templates
Primitives & components context
Teva SCS
Primitives & components: Teva SCS

Slider Hero preset

v0.0.0

This page shows examples of displaying Hero Strips in a slider, using the Hero preset.

The footer is very specific to this preset mode. It contains pagination and navigation controls. The footer is wrapped by a Container with modifier --column.

This is a preset mode. All other slider options are unavailable when using this preset. Only options described on this page will work. Please regard this as an element on its own.

Enable preset #

To enter the preset mode:

  • set data-attribute data-slider-hero to true
  • use footer markup from examples.
alt text

Mixtape listicle schlitz knausgaard hella

Synth tilde meh muggle magic keffiyeh organic dreamcatcher. Sriracha forage williamsburg +1 microdosing. Kombucha narwhal muggle magic post-ironic cred 8-bit humblebrag.

Diy cliche
alt text

Diy carry brunch humblebrag fixie twee

Pug park cleanse keytar organic vinyl. Tacos 90's godard pbr&b kickstarter. Meh tousled literally waistcoat plaid portland yolo single-origin coffee.

Crucifix organic
alt text

Park godard hashtag keytar chambray

Freegan meditation yr semiotics retro kale chips. Schlitz ennui williamsburg jean shorts trust fund kale chips viral. Semiotics poutine forage next level tousled.

Umami sartorial
 
<!-- Container  -->
<div class="vi-container">
  <!-- Wrapped in container for this example -->
  <!-- Slider  -->
  <div class="vi-slider" data-slider-hero="true">
    <div class="vi-slider__slides">
      <div class="vi-slider__wrapper">
        <!-- Add slides here. -->
        <div class="vi-slider__slide">
          <!-- Strip type: hero -->
          <div class="vi-strip-hero vi-strip">
            <div class="vi-strip-hero__body vi-strip__body">
              <div class="vi-strip-hero__head vi-strip__head">
                <div class="vi-strip-hero__visual vi-strip__visual">
                  <!-- Rectangular Image (mods: --strip-hero, --lg-fit) -->
                  <div class="vi-rectangular-image vi-rectangular-image--strip-hero vi-rectangular-image--lg-fit"><picture>
                      <source media="(max-width:767px)" srcset="/assets/images/static/test-360x360.jpg, /assets/images/static/test-720x720.jpg 2x">
                      <source media="(max-width:959px)" srcset="/assets/images/static/test-768x470.jpg, /assets/images/static/test-1536x940.jpg 2x">
                      <img alt="alt text" draggable="false" loading="lazy" src="/assets/images/static/test-910x530.jpg" srcset="/assets/images/static/test-910x530.jpg, /assets/images/static/test-1820x1060.jpg 2x">
                    </picture></div>
                </div>
              </div>
              <div class="vi-pattern vi-pattern--random-gradient-moment vi-strip-hero__main vi-strip__main">
                <div class="vi-strip-hero__main-container vi-strip__main-container">
                  <div class="vi-strip-hero__content  vi-typesystem vi-typesystem--inversed vi-strip__content">
                    <!-- Use h1-h6 depending page hierarchy -->
                    <h3 class="vi-strip-hero__title vi-strip__title">Mixtape listicle schlitz knausgaard hella</h3>
                    <p>Synth tilde meh muggle magic keffiyeh organic dreamcatcher. Sriracha forage williamsburg +1 microdosing. Kombucha narwhal muggle magic post-ironic cred 8-bit humblebrag.</p>
                  </div>
                  <a class="vi-strip-hero__trigger vi-strip__trigger" href="#sample">
                    <!-- Button type: solid  -->
                    <div class="vi-btn-solid vi-btn-solid--lg vi-btn-solid--accent-2 vi-btn-solid--nested vi-btn">Diy cliche</div>
                  </a>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="vi-slider__slide">
          <!-- Strip type: hero -->
          <div class="vi-strip-hero vi-strip">
            <div class="vi-strip-hero__body vi-strip__body">
              <div class="vi-strip-hero__head vi-strip__head">
                <div class="vi-strip-hero__visual vi-strip__visual">
                  <!-- Rectangular Image (mods: --strip-hero, --lg-fit) -->
                  <div class="vi-rectangular-image vi-rectangular-image--strip-hero vi-rectangular-image--lg-fit"><picture>
                      <source media="(max-width:767px)" srcset="/assets/images/static/test-360x360.jpg, /assets/images/static/test-720x720.jpg 2x">
                      <source media="(max-width:959px)" srcset="/assets/images/static/test-768x470.jpg, /assets/images/static/test-1536x940.jpg 2x">
                      <img alt="alt text" draggable="false" loading="lazy" src="/assets/images/static/test-910x530.jpg" srcset="/assets/images/static/test-910x530.jpg, /assets/images/static/test-1820x1060.jpg 2x">
                    </picture></div>
                </div>
              </div>
              <div class="vi-pattern vi-pattern--random-gradient-moment vi-strip-hero__main vi-strip__main">
                <div class="vi-strip-hero__main-container vi-strip__main-container">
                  <div class="vi-strip-hero__content  vi-typesystem vi-typesystem--inversed vi-strip__content">
                    <!-- Use h1-h6 depending page hierarchy -->
                    <h3 class="vi-strip-hero__title vi-strip__title">Diy carry brunch humblebrag fixie twee</h3>
                    <p>Pug park cleanse keytar organic vinyl. Tacos 90's godard pbr&amp;b kickstarter. Meh tousled literally waistcoat plaid portland yolo single-origin coffee.</p>
                  </div>
                  <a class="vi-strip-hero__trigger vi-strip__trigger" href="#sample">
                    <!-- Button type: solid  -->
                    <div class="vi-btn-solid vi-btn-solid--lg vi-btn-solid--accent-2 vi-btn-solid--nested vi-btn">Crucifix organic</div>
                  </a>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="vi-slider__slide">
          <!-- Strip type: hero -->
          <div class="vi-strip-hero vi-strip">
            <div class="vi-strip-hero__body vi-strip__body">
              <div class="vi-strip-hero__head vi-strip__head">
                <div class="vi-strip-hero__visual vi-strip__visual">
                  <!-- Rectangular Image (mods: --strip-hero, --lg-fit) -->
                  <div class="vi-rectangular-image vi-rectangular-image--strip-hero vi-rectangular-image--lg-fit"><picture>
                      <source media="(max-width:767px)" srcset="/assets/images/static/test-360x360.jpg, /assets/images/static/test-720x720.jpg 2x">
                      <source media="(max-width:959px)" srcset="/assets/images/static/test-768x470.jpg, /assets/images/static/test-1536x940.jpg 2x">
                      <img alt="alt text" draggable="false" loading="lazy" src="/assets/images/static/test-910x530.jpg" srcset="/assets/images/static/test-910x530.jpg, /assets/images/static/test-1820x1060.jpg 2x">
                    </picture></div>
                </div>
              </div>
              <div class="vi-pattern vi-pattern--random-gradient-moment vi-strip-hero__main vi-strip__main">
                <div class="vi-strip-hero__main-container vi-strip__main-container">
                  <div class="vi-strip-hero__content  vi-typesystem vi-typesystem--inversed vi-strip__content">
                    <!-- Use h1-h6 depending page hierarchy -->
                    <h3 class="vi-strip-hero__title vi-strip__title">Park godard hashtag keytar chambray</h3>
                    <p>Freegan meditation yr semiotics retro kale chips. Schlitz ennui williamsburg jean shorts trust fund kale chips viral. Semiotics poutine forage next level tousled.</p>
                  </div>
                  <a class="vi-strip-hero__trigger vi-strip__trigger" href="#sample">
                    <!-- Button type: solid  -->
                    <div class="vi-btn-solid vi-btn-solid--lg vi-btn-solid--accent-2 vi-btn-solid--nested vi-btn">Umami sartorial</div>
                  </a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="vi-slider__footer-wrap vi-slider__footer-wrap--hero">
      <!-- Container (mods: --column) -->
      <div class="vi-container vi-container--column">
        <div class="vi-slider__footer vi-slider__footer--hero">
          <div class="vi-slider__pagination vi-slider__pagination--hero">
            <!-- paginatinon will be rendered here -->
          </div>
          <div class="vi-slider__controls vi-slider__controls--hero">
            <div class="vi-slider__navigation vi-slider__navigation--prev">
              <!-- Button type: pagination  -->
              <button type="button" class="vi-btn-pagination vi-btn-pagination--prev vi-btn-pagination--white vi-btn"><span class="vi-btn-pagination__label vi-btn-pagination__label--prev vi-btn-pagination__label--white vi-btn__label">Previous</span></button>
            </div>
            <div class="vi-slider__navigation vi-slider__navigation--next">
              <!-- Button type: pagination  -->
              <button type="button" class="vi-btn-pagination vi-btn-pagination--next vi-btn-pagination--white vi-btn"><span class="vi-btn-pagination__label vi-btn-pagination__label--next vi-btn-pagination__label--white vi-btn__label">Next</span></button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Extra space for naughty editors #

When textual content of Hero Strips exceed the height of the strip, it should not break easily.

alt text

Hammock portland godard polaroid literally tattooed

Scenester stumptown before they sold out health bushwick cronut lumbersexual bespoke. Migas 90's stumptown carry pabst twee distillery.

Tofu echo
alt text

Plaid mustache goth tumblr narwhal mumblecore

3 wolf moon cold-pressed flexitarian marfa freegan mustache vinegar fanny pack. Occupy green juice trust fund put a bird on it thundercats marfa health. Hammock lo-fi scenester shoreditch cred. Fingerstache bushwick sustainable phlogiston narwhal cardigan. Marfa truffaut cornhole normcore roof mumblecore vinegar pop-up. Echo pug vegan fanny pack hammock roof. Whatever kogi five dollar toast selvage pour-over sartorial. Ennui hoodie blog. Drinking crucifix chicharrones chambray.

Flexitarian venmo
alt text

Twee tacos yuccie thundercats tumblr

Lumbersexual occupy cronut tumblr mumblecore brooklyn. Pour-over craft beer artisan whatever ethical selvage helvetica austin.

Lomo roof
 
<!-- Container  -->
<div class="vi-container">
  <!-- Wrapped in container for this example -->
  <!-- Slider  -->
  <div class="vi-slider" data-slider-hero="true">
    <div class="vi-slider__slides">
      <div class="vi-slider__wrapper">
        <!-- Add slides here. -->
        <div class="vi-slider__slide">
          <!-- Strip type: hero -->
          <div class="vi-strip-hero vi-strip">
            <div class="vi-strip-hero__body vi-strip__body">
              <div class="vi-strip-hero__head vi-strip__head">
                <div class="vi-strip-hero__visual vi-strip__visual">
                  <!-- Rectangular Image (mods: --strip-hero, --lg-fit) -->
                  <div class="vi-rectangular-image vi-rectangular-image--strip-hero vi-rectangular-image--lg-fit"><picture>
                      <source media="(max-width:767px)" srcset="/assets/images/static/test-360x360.jpg, /assets/images/static/test-720x720.jpg 2x">
                      <source media="(max-width:959px)" srcset="/assets/images/static/test-768x470.jpg, /assets/images/static/test-1536x940.jpg 2x">
                      <img alt="alt text" draggable="false" loading="lazy" src="/assets/images/static/test-910x530.jpg" srcset="/assets/images/static/test-910x530.jpg, /assets/images/static/test-1820x1060.jpg 2x">
                    </picture></div>
                </div>
              </div>
              <div class="vi-pattern vi-pattern--random-gradient-moment vi-strip-hero__main vi-strip__main">
                <div class="vi-strip-hero__main-container vi-strip__main-container">
                  <div class="vi-strip-hero__content  vi-typesystem vi-typesystem--inversed vi-strip__content">
                    <!-- Use h1-h6 depending page hierarchy -->
                    <h3 class="vi-strip-hero__title vi-strip__title">Hammock portland godard polaroid literally tattooed</h3>
                    <p>Scenester stumptown before they sold out health bushwick cronut lumbersexual bespoke. Migas 90's stumptown carry pabst twee distillery.</p>
                  </div>
                  <a class="vi-strip-hero__trigger vi-strip__trigger" href="#sample">
                    <!-- Button type: solid  -->
                    <div class="vi-btn-solid vi-btn-solid--lg vi-btn-solid--accent-2 vi-btn-solid--nested vi-btn">Tofu echo</div>
                  </a>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="vi-slider__slide">
          <!-- Strip type: hero -->
          <div class="vi-strip-hero vi-strip">
            <div class="vi-strip-hero__body vi-strip__body">
              <div class="vi-strip-hero__head vi-strip__head">
                <div class="vi-strip-hero__visual vi-strip__visual">
                  <!-- Rectangular Image (mods: --strip-hero, --lg-fit) -->
                  <div class="vi-rectangular-image vi-rectangular-image--strip-hero vi-rectangular-image--lg-fit"><picture>
                      <source media="(max-width:767px)" srcset="/assets/images/static/test-360x360.jpg, /assets/images/static/test-720x720.jpg 2x">
                      <source media="(max-width:959px)" srcset="/assets/images/static/test-768x470.jpg, /assets/images/static/test-1536x940.jpg 2x">
                      <img alt="alt text" draggable="false" loading="lazy" src="/assets/images/static/test-910x530.jpg" srcset="/assets/images/static/test-910x530.jpg, /assets/images/static/test-1820x1060.jpg 2x">
                    </picture></div>
                </div>
              </div>
              <div class="vi-pattern vi-pattern--random-gradient-moment vi-strip-hero__main vi-strip__main">
                <div class="vi-strip-hero__main-container vi-strip__main-container">
                  <div class="vi-strip-hero__content  vi-typesystem vi-typesystem--inversed vi-strip__content">
                    <!-- Use h1-h6 depending page hierarchy -->
                    <h3 class="vi-strip-hero__title vi-strip__title">Plaid mustache goth tumblr narwhal mumblecore</h3>
                    <p>3 wolf moon cold-pressed flexitarian marfa freegan mustache vinegar fanny pack. Occupy green juice trust fund put a bird on it thundercats marfa health. Hammock lo-fi scenester shoreditch cred. Fingerstache bushwick sustainable phlogiston narwhal cardigan. Marfa truffaut cornhole normcore roof mumblecore vinegar pop-up. Echo pug vegan fanny pack hammock roof. Whatever kogi five dollar toast selvage pour-over sartorial. Ennui hoodie blog. Drinking crucifix chicharrones chambray.</p>
                  </div>
                  <a class="vi-strip-hero__trigger vi-strip__trigger" href="#sample">
                    <!-- Button type: solid  -->
                    <div class="vi-btn-solid vi-btn-solid--lg vi-btn-solid--accent-2 vi-btn-solid--nested vi-btn">Flexitarian venmo</div>
                  </a>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="vi-slider__slide">
          <!-- Strip type: hero -->
          <div class="vi-strip-hero vi-strip">
            <div class="vi-strip-hero__body vi-strip__body">
              <div class="vi-strip-hero__head vi-strip__head">
                <div class="vi-strip-hero__visual vi-strip__visual">
                  <!-- Rectangular Image (mods: --strip-hero, --lg-fit) -->
                  <div class="vi-rectangular-image vi-rectangular-image--strip-hero vi-rectangular-image--lg-fit"><picture>
                      <source media="(max-width:767px)" srcset="/assets/images/static/test-360x360.jpg, /assets/images/static/test-720x720.jpg 2x">
                      <source media="(max-width:959px)" srcset="/assets/images/static/test-768x470.jpg, /assets/images/static/test-1536x940.jpg 2x">
                      <img alt="alt text" draggable="false" loading="lazy" src="/assets/images/static/test-910x530.jpg" srcset="/assets/images/static/test-910x530.jpg, /assets/images/static/test-1820x1060.jpg 2x">
                    </picture></div>
                </div>
              </div>
              <div class="vi-pattern vi-pattern--random-gradient-moment vi-strip-hero__main vi-strip__main">
                <div class="vi-strip-hero__main-container vi-strip__main-container">
                  <div class="vi-strip-hero__content  vi-typesystem vi-typesystem--inversed vi-strip__content">
                    <!-- Use h1-h6 depending page hierarchy -->
                    <h3 class="vi-strip-hero__title vi-strip__title">Twee tacos yuccie thundercats tumblr</h3>
                    <p>Lumbersexual occupy cronut tumblr mumblecore brooklyn. Pour-over craft beer artisan whatever ethical selvage helvetica austin.</p>
                  </div>
                  <a class="vi-strip-hero__trigger vi-strip__trigger" href="#sample">
                    <!-- Button type: solid  -->
                    <div class="vi-btn-solid vi-btn-solid--lg vi-btn-solid--accent-2 vi-btn-solid--nested vi-btn">Lomo roof</div>
                  </a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="vi-slider__footer-wrap vi-slider__footer-wrap--hero">
      <!-- Container (mods: --column) -->
      <div class="vi-container vi-container--column">
        <div class="vi-slider__footer vi-slider__footer--hero">
          <div class="vi-slider__pagination vi-slider__pagination--hero">
            <!-- paginatinon will be rendered here -->
          </div>
          <div class="vi-slider__controls vi-slider__controls--hero">
            <div class="vi-slider__navigation vi-slider__navigation--prev">
              <!-- Button type: pagination  -->
              <button type="button" class="vi-btn-pagination vi-btn-pagination--prev vi-btn-pagination--white vi-btn"><span class="vi-btn-pagination__label vi-btn-pagination__label--prev vi-btn-pagination__label--white vi-btn__label">Previous</span></button>
            </div>
            <div class="vi-slider__navigation vi-slider__navigation--next">
              <!-- Button type: pagination  -->
              <button type="button" class="vi-btn-pagination vi-btn-pagination--next vi-btn-pagination--white vi-btn"><span class="vi-btn-pagination__label vi-btn-pagination__label--next vi-btn-pagination__label--white vi-btn__label">Next</span></button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Video #

Hero Strip with video can be used.

alt text

Keytar keffiyeh lomo wayfarers post-ironic

Craft beer wes anderson meh art party. Lumbersexual tote bag kitsch jean shorts yr tattooed fashion axe hammock. Single-origin coffee keffiyeh yr tacos blog pop-up biodiesel cray.

Play video

Shoreditch sustainable church-key yuccie 8-bit

Gluten-free franzen ugh cray gastropub locavore. Squid lumbersexual roof xoxo ramps five dollar toast.

Play video
 
<!-- Container  -->
<div class="vi-container">
  <!-- Wrapped in container for this example -->
  <!-- Slider  -->
  <div class="vi-slider" data-slider-hero="true">
    <div class="vi-slider__slides">
      <div class="vi-slider__wrapper">
        <!-- Add slides here. -->
        <div class="vi-slider__slide">
          <!-- Strip type: hero -->
          <div class="vi-strip-hero vi-strip">
            <div class="vi-strip-hero__body vi-strip__body">
              <div class="vi-strip-hero__head vi-strip__head">
                <div class="vi-strip-hero__visual vi-strip__visual">
                  <!-- Video  -->
                  <div class="vi-video" data-google-key="AIzaSyCCT69wewvdxKePFXN40xeJmy5MQusd9uc" data-video-id="LXb3EKWsInQ" data-video-lazy="true" data-video-provider="youtube" id="sg-a6a15c">
                    <!-- Rectangular Image (mods: --strip-hero, --lg-fit) -->
                    <div class="vi-rectangular-image vi-rectangular-image--strip-hero vi-rectangular-image--lg-fit"><picture>
                        <source media="(max-width:767px)" srcset="/assets/images/static/test-360x360.jpg, /assets/images/static/test-720x720.jpg 2x">
                        <source media="(max-width:959px)" srcset="/assets/images/static/test-768x470.jpg, /assets/images/static/test-1536x940.jpg 2x">
                        <img alt="alt text" draggable="false" loading="lazy" src="/assets/images/static/test-910x530.jpg" srcset="/assets/images/static/test-910x530.jpg, /assets/images/static/test-1820x1060.jpg 2x">
                      </picture></div>
                  </div>
                </div>
              </div>
              <div class="vi-pattern vi-pattern--random-gradient-moment vi-strip-hero__main vi-strip__main">
                <div class="vi-strip-hero__main-container vi-strip__main-container">
                  <div class="vi-strip-hero__content  vi-typesystem vi-typesystem--inversed vi-strip__content">
                    <!-- Use h1-h6 depending page hierarchy -->
                    <h3 class="vi-strip-hero__title vi-strip__title">Keytar keffiyeh lomo wayfarers post-ironic</h3>
                    <p>Craft beer wes anderson meh art party. Lumbersexual tote bag kitsch jean shorts yr tattooed fashion axe hammock. Single-origin coffee keffiyeh yr tacos blog pop-up biodiesel cray.</p>
                  </div>
                  <a aria-label="Open and play the video in a dialog window." class="vi-strip-hero__trigger vi-strip__trigger" href="#sg-a6a15c" role="button">
                    <!-- Button type: solid  -->
                    <div class="vi-btn-solid vi-btn-solid--no-pointer vi-btn-solid--lg vi-btn-solid--accent-2 vi-btn-solid--nested vi-btn">
                      <!-- Icon video-play (mods: --button-left) -->
                      <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 12 12" sg-icons-dir="sg/components/icon/icons" role="img" class="vi-icon vi-icon--button-left" aria-label="video-play" width="16" height="16"><path d="M11.1 5.4c.5.3.5.8 0 1.1l-7.3 4.9c-.4.3-.8.1-.8-.5V1c0-.5.4-.7.8-.4l7.3 4.8z" fill-rule="evenodd"></path></svg>
                      Play video</div>
                  </a>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="vi-slider__slide">
          <!-- Strip type: hero -->
          <div class="vi-strip-hero vi-strip">
            <div class="vi-strip-hero__body vi-strip__body">
              <div class="vi-strip-hero__head vi-strip__head">
                <div class="vi-strip-hero__visual vi-strip__visual">
                  <!-- Video  -->
                  <div class="vi-video" data-google-key="AIzaSyCCT69wewvdxKePFXN40xeJmy5MQusd9uc" data-video-id="LXb3EKWsInQ" data-video-lazy="true" data-video-provider="youtube" id="sg-392679">
                    <!-- Rectangular Image (mods: --strip-hero, --lg-fit) -->
                    <div class="vi-rectangular-image vi-rectangular-image--strip-hero vi-rectangular-image--lg-fit">
                      <div class="vi-video__poster"></div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="vi-pattern vi-pattern--random-gradient-moment vi-strip-hero__main vi-strip__main">
                <div class="vi-strip-hero__main-container vi-strip__main-container">
                  <div class="vi-strip-hero__content  vi-typesystem vi-typesystem--inversed vi-strip__content">
                    <!-- Use h1-h6 depending page hierarchy -->
                    <h3 class="vi-strip-hero__title vi-strip__title">Shoreditch sustainable church-key yuccie 8-bit</h3>
                    <p>Gluten-free franzen ugh cray gastropub locavore. Squid lumbersexual roof xoxo ramps five dollar toast.</p>
                  </div>
                  <a aria-label="Open and play the video in a dialog window." class="vi-strip-hero__trigger vi-strip__trigger" href="#sg-392679" role="button">
                    <!-- Button type: solid  -->
                    <div class="vi-btn-solid vi-btn-solid--no-pointer vi-btn-solid--lg vi-btn-solid--accent-2 vi-btn-solid--nested vi-btn">
                      <!-- Icon video-play (mods: --button-left) -->
                      <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 12 12" sg-icons-dir="sg/components/icon/icons" role="img" class="vi-icon vi-icon--button-left" aria-label="video-play" width="16" height="16"><path d="M11.1 5.4c.5.3.5.8 0 1.1l-7.3 4.9c-.4.3-.8.1-.8-.5V1c0-.5.4-.7.8-.4l7.3 4.8z" fill-rule="evenodd"></path></svg>
                      Play video</div>
                  </a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="vi-slider__footer-wrap vi-slider__footer-wrap--hero">
      <!-- Container (mods: --column) -->
      <div class="vi-container vi-container--column">
        <div class="vi-slider__footer vi-slider__footer--hero">
          <div class="vi-slider__pagination vi-slider__pagination--hero">
            <!-- paginatinon will be rendered here -->
          </div>
          <div class="vi-slider__controls vi-slider__controls--hero">
            <div class="vi-slider__navigation vi-slider__navigation--prev">
              <!-- Button type: pagination  -->
              <button type="button" class="vi-btn-pagination vi-btn-pagination--prev vi-btn-pagination--white vi-btn"><span class="vi-btn-pagination__label vi-btn-pagination__label--prev vi-btn-pagination__label--white vi-btn__label">Previous</span></button>
            </div>
            <div class="vi-slider__navigation vi-slider__navigation--next">
              <!-- Button type: pagination  -->
              <button type="button" class="vi-btn-pagination vi-btn-pagination--next vi-btn-pagination--white vi-btn"><span class="vi-btn-pagination__label vi-btn-pagination__label--next vi-btn-pagination__label--white vi-btn__label">Next</span></button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Mixed content for naughty editors #

Using mixed images and video in strips will work, but is advised against.

Don not use images and video like this.

alt text

Twee 8-bit vinyl hammock xoxo vinegar

Wayfarers stumptown kickstarter chambray hammock slow-carb 3 wolf moon. Kinfolk tousled dreamcatcher food truck organic. Disrupt echo slow-carb before they sold out organic pickled meditation. Synth tilde wayfarers. Etsy art party jean shorts. Cray venmo xoxo muggle magic aesthetic. Whatever iphone roof.

Shoreditch dreamcatcher
alt text

Artisan swag letterpress chambray diy

Banh mi kale chips health pork belly letterpress. Deep v banh mi mumblecore sustainable church-key.

Ugh ethical
alt text

Park loko pabst locavore tousled dreamcatcher

Skateboard franzen cliche schlitz blue bottle cleanse tofu 90's. Disrupt hashtag cornhole plaid normcore cred squid cliche.

Play video

Gastropub locavore godard narwhal whatever

Chillwave kombucha trust fund fixie. Blog direct trade letterpress normcore sartorial banjo tattooed.

Play video
Previous
Next 
<!-- Container  -->
<div class="vi-container">
  <!-- Wrapped in container for this example -->
  <!-- Slider  -->
  <div class="vi-slider" data-slider-hero="true">
    <div class="vi-slider__slides">
      <div class="vi-slider__wrapper">
        <!-- Add slides here. -->
        <div class="vi-slider__slide">
          <!-- Strip type: hero -->
          <div class="vi-strip-hero vi-strip">
            <div class="vi-strip-hero__body vi-strip__body">
              <div class="vi-strip-hero__head vi-strip__head">
                <div class="vi-strip-hero__visual vi-strip__visual">
                  <!-- Rectangular Image (mods: --strip-hero, --lg-fit) -->
                  <div class="vi-rectangular-image vi-rectangular-image--strip-hero vi-rectangular-image--lg-fit"><picture>
                      <source media="(max-width:767px)" srcset="/assets/images/static/test-360x360.jpg, /assets/images/static/test-720x720.jpg 2x">
                      <source media="(max-width:959px)" srcset="/assets/images/static/test-768x470.jpg, /assets/images/static/test-1536x940.jpg 2x">
                      <img alt="alt text" draggable="false" loading="lazy" src="/assets/images/static/test-910x530.jpg" srcset="/assets/images/static/test-910x530.jpg, /assets/images/static/test-1820x1060.jpg 2x">
                    </picture></div>
                </div>
              </div>
              <div class="vi-pattern vi-pattern--random-gradient-moment vi-strip-hero__main vi-strip__main">
                <div class="vi-strip-hero__main-container vi-strip__main-container">
                  <div class="vi-strip-hero__content  vi-typesystem vi-typesystem--inversed vi-strip__content">
                    <!-- Use h1-h6 depending page hierarchy -->
                    <h3 class="vi-strip-hero__title vi-strip__title">Twee 8-bit vinyl hammock xoxo vinegar</h3>
                    <p>Wayfarers stumptown kickstarter chambray hammock slow-carb 3 wolf moon. Kinfolk tousled dreamcatcher food truck organic. Disrupt echo slow-carb before they sold out organic pickled meditation. Synth tilde wayfarers. Etsy art party jean shorts. Cray venmo xoxo muggle magic aesthetic. Whatever iphone roof.</p>
                  </div>
                  <a class="vi-strip-hero__trigger vi-strip__trigger" href="#sample">
                    <!-- Button type: solid  -->
                    <div class="vi-btn-solid vi-btn-solid--lg vi-btn-solid--accent-2 vi-btn-solid--nested vi-btn">Shoreditch dreamcatcher</div>
                  </a>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="vi-slider__slide">
          <!-- Strip type: hero -->
          <div class="vi-strip-hero vi-strip">
            <div class="vi-strip-hero__body vi-strip__body">
              <div class="vi-strip-hero__head vi-strip__head">
                <div class="vi-strip-hero__visual vi-strip__visual">
                  <!-- Rectangular Image (mods: --strip-hero, --lg-fit) -->
                  <div class="vi-rectangular-image vi-rectangular-image--strip-hero vi-rectangular-image--lg-fit"><picture>
                      <source media="(max-width:767px)" srcset="/assets/images/static/test-360x360.jpg, /assets/images/static/test-720x720.jpg 2x">
                      <source media="(max-width:959px)" srcset="/assets/images/static/test-768x470.jpg, /assets/images/static/test-1536x940.jpg 2x">
                      <img alt="alt text" draggable="false" loading="lazy" src="/assets/images/static/test-910x530.jpg" srcset="/assets/images/static/test-910x530.jpg, /assets/images/static/test-1820x1060.jpg 2x">
                    </picture></div>
                </div>
              </div>
              <div class="vi-pattern vi-pattern--random-gradient-moment vi-strip-hero__main vi-strip__main">
                <div class="vi-strip-hero__main-container vi-strip__main-container">
                  <div class="vi-strip-hero__content  vi-typesystem vi-typesystem--inversed vi-strip__content">
                    <!-- Use h1-h6 depending page hierarchy -->
                    <h3 class="vi-strip-hero__title vi-strip__title">Artisan swag letterpress chambray diy</h3>
                    <p>Banh mi kale chips health pork belly letterpress. Deep v banh mi mumblecore sustainable church-key.</p>
                  </div>
                  <a class="vi-strip-hero__trigger vi-strip__trigger" href="#sample">
                    <!-- Button type: solid  -->
                    <div class="vi-btn-solid vi-btn-solid--lg vi-btn-solid--accent-2 vi-btn-solid--nested vi-btn">Ugh ethical</div>
                  </a>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="vi-slider__slide">
          <!-- Strip type: hero -->
          <div class="vi-strip-hero vi-strip">
            <div class="vi-strip-hero__body vi-strip__body">
              <div class="vi-strip-hero__head vi-strip__head">
                <div class="vi-strip-hero__visual vi-strip__visual">
                  <!-- Video  -->
                  <div class="vi-video" data-google-key="AIzaSyCCT69wewvdxKePFXN40xeJmy5MQusd9uc" data-video-id="LXb3EKWsInQ" data-video-lazy="true" data-video-provider="youtube" id="sg-b260d8">
                    <!-- Rectangular Image (mods: --strip-hero, --lg-fit) -->
                    <div class="vi-rectangular-image vi-rectangular-image--strip-hero vi-rectangular-image--lg-fit"><picture>
                        <source media="(max-width:767px)" srcset="/assets/images/static/test-360x360.jpg, /assets/images/static/test-720x720.jpg 2x">
                        <source media="(max-width:959px)" srcset="/assets/images/static/test-768x470.jpg, /assets/images/static/test-1536x940.jpg 2x">
                        <img alt="alt text" draggable="false" loading="lazy" src="/assets/images/static/test-910x530.jpg" srcset="/assets/images/static/test-910x530.jpg, /assets/images/static/test-1820x1060.jpg 2x">
                      </picture></div>
                  </div>
                </div>
              </div>
              <div class="vi-pattern vi-pattern--random-gradient-moment vi-strip-hero__main vi-strip__main">
                <div class="vi-strip-hero__main-container vi-strip__main-container">
                  <div class="vi-strip-hero__content  vi-typesystem vi-typesystem--inversed vi-strip__content">
                    <!-- Use h1-h6 depending page hierarchy -->
                    <h3 class="vi-strip-hero__title vi-strip__title">Park loko pabst locavore tousled dreamcatcher</h3>
                    <p>Skateboard franzen cliche schlitz blue bottle cleanse tofu 90's. Disrupt hashtag cornhole plaid normcore cred squid cliche.</p>
                  </div>
                  <a aria-label="Open and play the video in a dialog window." class="vi-strip-hero__trigger vi-strip__trigger" href="#sg-b260d8" role="button">
                    <!-- Button type: solid  -->
                    <div class="vi-btn-solid vi-btn-solid--no-pointer vi-btn-solid--lg vi-btn-solid--accent-2 vi-btn-solid--nested vi-btn">
                      <!-- Icon video-play (mods: --button-left) -->
                      <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 12 12" sg-icons-dir="sg/components/icon/icons" role="img" class="vi-icon vi-icon--button-left" aria-label="video-play" width="16" height="16"><path d="M11.1 5.4c.5.3.5.8 0 1.1l-7.3 4.9c-.4.3-.8.1-.8-.5V1c0-.5.4-.7.8-.4l7.3 4.8z" fill-rule="evenodd"></path></svg>
                      Play video</div>
                  </a>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="vi-slider__slide">
          <!-- Strip type: hero -->
          <div class="vi-strip-hero vi-strip">
            <div class="vi-strip-hero__body vi-strip__body">
              <div class="vi-strip-hero__head vi-strip__head">
                <div class="vi-strip-hero__visual vi-strip__visual">
                  <!-- Video  -->
                  <div class="vi-video" data-google-key="AIzaSyCCT69wewvdxKePFXN40xeJmy5MQusd9uc" data-video-id="LXb3EKWsInQ" data-video-lazy="true" data-video-provider="youtube" id="sg-e0c31d">
                    <!-- Rectangular Image (mods: --strip-hero, --lg-fit) -->
                    <div class="vi-rectangular-image vi-rectangular-image--strip-hero vi-rectangular-image--lg-fit">
                      <div class="vi-video__poster"></div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="vi-pattern vi-pattern--random-gradient-moment vi-strip-hero__main vi-strip__main">
                <div class="vi-strip-hero__main-container vi-strip__main-container">
                  <div class="vi-strip-hero__content  vi-typesystem vi-typesystem--inversed vi-strip__content">
                    <!-- Use h1-h6 depending page hierarchy -->
                    <h3 class="vi-strip-hero__title vi-strip__title">Gastropub locavore godard narwhal whatever</h3>
                    <p>Chillwave kombucha trust fund fixie. Blog direct trade letterpress normcore sartorial banjo tattooed.</p>
                  </div>
                  <a aria-label="Open and play the video in a dialog window." class="vi-strip-hero__trigger vi-strip__trigger" href="#sg-e0c31d" role="button">
                    <!-- Button type: solid  -->
                    <div class="vi-btn-solid vi-btn-solid--no-pointer vi-btn-solid--lg vi-btn-solid--accent-2 vi-btn-solid--nested vi-btn">
                      <!-- Icon video-play (mods: --button-left) -->
                      <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 12 12" sg-icons-dir="sg/components/icon/icons" role="img" class="vi-icon vi-icon--button-left" aria-label="video-play" width="16" height="16"><path d="M11.1 5.4c.5.3.5.8 0 1.1l-7.3 4.9c-.4.3-.8.1-.8-.5V1c0-.5.4-.7.8-.4l7.3 4.8z" fill-rule="evenodd"></path></svg>
                      Play video</div>
                  </a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="vi-slider__footer-wrap vi-slider__footer-wrap--hero">
      <!-- Container (mods: --column) -->
      <div class="vi-container vi-container--column">
        <div class="vi-slider__footer vi-slider__footer--hero">
          <div class="vi-slider__pagination vi-slider__pagination--hero">
            <!-- paginatinon will be rendered here -->
          </div>
          <div class="vi-slider__controls vi-slider__controls--hero">
            <div class="vi-slider__navigation vi-slider__navigation--prev">
              <!-- Button type: pagination  -->
              <a href="#" class="vi-btn-pagination vi-btn-pagination--prev vi-btn-pagination--white vi-btn"><span class="vi-btn-pagination__label vi-btn-pagination__label--prev vi-btn-pagination__label--white vi-btn__label">Previous</span></a>
            </div>
            <div class="vi-slider__navigation vi-slider__navigation--next">
              <!-- Button type: pagination  -->
              <a href="#" class="vi-btn-pagination vi-btn-pagination--next vi-btn-pagination--white vi-btn"><span class="vi-btn-pagination__label vi-btn-pagination__label--next vi-btn-pagination__label--white vi-btn__label">Next</span></a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

With Pause/Play button #

To use the pause button:

  1. Enable autoplay
  2. Add pause/play controls to the footer.
alt text

Meh bespoke schlitz selvage locavore intelligentsia

Sustainable butcher gentrify pork belly single-origin coffee godard heirloom distillery. Brunch flexitarian phlogiston health fashion axe everyday kombucha butcher. +1 phlogiston squid venmo.

Scenester typewriter
alt text

Health chia williamsburg cred cliche yuccie

Swag park knausgaard. Park skateboard distillery tacos. Kickstarter wayfarers bespoke tote bag pbr&b kinfolk raw denim.

Hoodie plaid
alt text

Narwhal salvia post-ironic neutra selvage

Bespoke yolo tote bag art party. Farm-to-table you probably haven't heard of them single-origin coffee +1 kombucha. Skateboard organic stumptown health deep v.

Aesthetic synth
 
<!-- Container  -->
<div class="vi-container">
  <!-- Wrapped in container for this example -->
  <!-- Slider  -->
  <div class="vi-slider" data-slider-autoplay="5000" data-slider-hero="true">
    <div class="vi-slider__slides">
      <div class="vi-slider__wrapper">
        <!-- Add slides here. -->
        <div class="vi-slider__slide">
          <!-- Strip type: hero -->
          <div class="vi-strip-hero vi-strip">
            <div class="vi-strip-hero__body vi-strip__body">
              <div class="vi-strip-hero__head vi-strip__head">
                <div class="vi-strip-hero__visual vi-strip__visual">
                  <!-- Rectangular Image (mods: --strip-hero, --lg-fit) -->
                  <div class="vi-rectangular-image vi-rectangular-image--strip-hero vi-rectangular-image--lg-fit"><picture>
                      <source media="(max-width:767px)" srcset="/assets/images/static/test-360x360.jpg, /assets/images/static/test-720x720.jpg 2x">
                      <source media="(max-width:959px)" srcset="/assets/images/static/test-768x470.jpg, /assets/images/static/test-1536x940.jpg 2x">
                      <img alt="alt text" draggable="false" loading="lazy" src="/assets/images/static/test-910x530.jpg" srcset="/assets/images/static/test-910x530.jpg, /assets/images/static/test-1820x1060.jpg 2x">
                    </picture></div>
                </div>
              </div>
              <div class="vi-pattern vi-pattern--random-gradient-moment vi-strip-hero__main vi-strip__main">
                <div class="vi-strip-hero__main-container vi-strip__main-container">
                  <div class="vi-strip-hero__content  vi-typesystem vi-typesystem--inversed vi-strip__content">
                    <!-- Use h1-h6 depending page hierarchy -->
                    <h3 class="vi-strip-hero__title vi-strip__title">Meh bespoke schlitz selvage locavore intelligentsia</h3>
                    <p>Sustainable butcher gentrify pork belly single-origin coffee godard heirloom distillery. Brunch flexitarian phlogiston health fashion axe everyday kombucha butcher. +1 phlogiston squid venmo.</p>
                  </div>
                  <a class="vi-strip-hero__trigger vi-strip__trigger" href="#sample">
                    <!-- Button type: solid  -->
                    <div class="vi-btn-solid vi-btn-solid--lg vi-btn-solid--accent-2 vi-btn-solid--nested vi-btn">Scenester typewriter</div>
                  </a>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="vi-slider__slide">
          <!-- Strip type: hero -->
          <div class="vi-strip-hero vi-strip">
            <div class="vi-strip-hero__body vi-strip__body">
              <div class="vi-strip-hero__head vi-strip__head">
                <div class="vi-strip-hero__visual vi-strip__visual">
                  <!-- Rectangular Image (mods: --strip-hero, --lg-fit) -->
                  <div class="vi-rectangular-image vi-rectangular-image--strip-hero vi-rectangular-image--lg-fit"><picture>
                      <source media="(max-width:767px)" srcset="/assets/images/static/test-360x360.jpg, /assets/images/static/test-720x720.jpg 2x">
                      <source media="(max-width:959px)" srcset="/assets/images/static/test-768x470.jpg, /assets/images/static/test-1536x940.jpg 2x">
                      <img alt="alt text" draggable="false" loading="lazy" src="/assets/images/static/test-910x530.jpg" srcset="/assets/images/static/test-910x530.jpg, /assets/images/static/test-1820x1060.jpg 2x">
                    </picture></div>
                </div>
              </div>
              <div class="vi-pattern vi-pattern--random-gradient-moment vi-strip-hero__main vi-strip__main">
                <div class="vi-strip-hero__main-container vi-strip__main-container">
                  <div class="vi-strip-hero__content  vi-typesystem vi-typesystem--inversed vi-strip__content">
                    <!-- Use h1-h6 depending page hierarchy -->
                    <h3 class="vi-strip-hero__title vi-strip__title">Health chia williamsburg cred cliche yuccie</h3>
                    <p>Swag park knausgaard. Park skateboard distillery tacos. Kickstarter wayfarers bespoke tote bag pbr&amp;b kinfolk raw denim.</p>
                  </div>
                  <a class="vi-strip-hero__trigger vi-strip__trigger" href="#sample">
                    <!-- Button type: solid  -->
                    <div class="vi-btn-solid vi-btn-solid--lg vi-btn-solid--accent-2 vi-btn-solid--nested vi-btn">Hoodie plaid</div>
                  </a>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="vi-slider__slide">
          <!-- Strip type: hero -->
          <div class="vi-strip-hero vi-strip">
            <div class="vi-strip-hero__body vi-strip__body">
              <div class="vi-strip-hero__head vi-strip__head">
                <div class="vi-strip-hero__visual vi-strip__visual">
                  <!-- Rectangular Image (mods: --strip-hero, --lg-fit) -->
                  <div class="vi-rectangular-image vi-rectangular-image--strip-hero vi-rectangular-image--lg-fit"><picture>
                      <source media="(max-width:767px)" srcset="/assets/images/static/test-360x360.jpg, /assets/images/static/test-720x720.jpg 2x">
                      <source media="(max-width:959px)" srcset="/assets/images/static/test-768x470.jpg, /assets/images/static/test-1536x940.jpg 2x">
                      <img alt="alt text" draggable="false" loading="lazy" src="/assets/images/static/test-910x530.jpg" srcset="/assets/images/static/test-910x530.jpg, /assets/images/static/test-1820x1060.jpg 2x">
                    </picture></div>
                </div>
              </div>
              <div class="vi-pattern vi-pattern--random-gradient-moment vi-strip-hero__main vi-strip__main">
                <div class="vi-strip-hero__main-container vi-strip__main-container">
                  <div class="vi-strip-hero__content  vi-typesystem vi-typesystem--inversed vi-strip__content">
                    <!-- Use h1-h6 depending page hierarchy -->
                    <h3 class="vi-strip-hero__title vi-strip__title">Narwhal salvia post-ironic neutra selvage</h3>
                    <p>Bespoke yolo tote bag art party. Farm-to-table you probably haven't heard of them single-origin coffee +1 kombucha. Skateboard organic stumptown health deep v.</p>
                  </div>
                  <a class="vi-strip-hero__trigger vi-strip__trigger" href="#sample">
                    <!-- Button type: solid  -->
                    <div class="vi-btn-solid vi-btn-solid--lg vi-btn-solid--accent-2 vi-btn-solid--nested vi-btn">Aesthetic synth</div>
                  </a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="vi-slider__footer-wrap vi-slider__footer-wrap--hero">
      <!-- Container (mods: --column) -->
      <div class="vi-container vi-container--column">
        <div class="vi-slider__footer vi-slider__footer--hero">
          <div class="vi-slider__pagination vi-slider__pagination--hero">
            <!-- paginatinon will be rendered here -->
          </div>
          <div class="vi-slider__controls vi-slider__controls--hero">
            <div class="vi-slider__control vi-slider__control--hidden vi-slider__control--pause">
              <!-- Button type: slider  -->
              <button type="button" class="vi-btn-slider vi-btn-slider--pause vi-btn-slider--white vi-btn"><span class="vi-btn-slider__label vi-btn-slider__label--pause vi-btn-slider__label--white vi-btn__label">Pause</span></button>
            </div>
            <div class="vi-slider__control vi-slider__control--hidden vi-slider__control--play">
              <!-- Button type: slider  -->
              <button type="button" class="vi-btn-slider vi-btn-slider--play vi-btn-slider--white vi-btn"><span class="vi-btn-slider__label vi-btn-slider__label--play vi-btn-slider__label--white vi-btn__label">Play</span></button>
            </div>
            <div class="vi-slider__navigation vi-slider__navigation--prev">
              <!-- Button type: pagination  -->
              <button type="button" class="vi-btn-pagination vi-btn-pagination--prev vi-btn-pagination--white vi-btn"><span class="vi-btn-pagination__label vi-btn-pagination__label--prev vi-btn-pagination__label--white vi-btn__label">Previous</span></button>
            </div>
            <div class="vi-slider__navigation vi-slider__navigation--next">
              <!-- Button type: pagination  -->
              <button type="button" class="vi-btn-pagination vi-btn-pagination--next vi-btn-pagination--white vi-btn"><span class="vi-btn-pagination__label vi-btn-pagination__label--next vi-btn-pagination__label--white vi-btn__label">Next</span></button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Stylesheets #

The following stylesheets are required to display this component.

The following additional stylesheets are used to display the example(s).

JavaScript #

The following javascript is required to display this component.

The following additional javascripts are used to display the example(s).

Usage documentation #

Usage documentation can be found here.

Changelog #

Changelog

Fix

  • 26 Mar 2025 - feat(slider): add data-slider-loop to card preset.
  • 26 Mar 2025 - fix(slider): correctly disable navigation when centered by container and 3 or less cards.
  • 18 Feb 2025 - fix(slider): fix accessibility messages
  • 05 Feb 2025 - fix(slider): improve centered slides calculation to work on all zoomlevels
  • 16 Jan 2025 - fix(slider): set aria-current attributes for pagination controls to improve accessibility
  • 16 Jan 2025 - fix(slider): ensure navigation controls are enabled when loop and centeredSlides are enabled
  • 11 Nov 2024 - fix(slider): incorrect margin hero footer
  • 16 Nov 2023 - Autoplay on hover stop fix
  • 15 Sep 2023 - Hide pagination when cards total size is less than container.
  • 01 Mar 2023 - Glitch in crossfade when controlled via pagination.
  • hero footer position.
  • Workaround browser pixel rounding issues.
  • Prevent text selection next text-node after rapidly clicking the disabled next button.
  • Create room for box shadow component overlap
  • A11y outline issue button-element not receiving focus outline
  • A11y: Navigation aria attributes set to the correct element.
  • Pause/Play buttons not reflecting pause state. (js only)
  • Positioning Controls Slider with video buttons.
  • A11y slide containing element with keyboard focus scrolled into view.
  • Hero preset documentation.

Changed

  • Small change to allow usages outside .vi-container on Full Width Page Layout
  • Disabled forced load of images.
  • A11y: Optimised tab-behaviour card preset.
  • A11y: Navigation buttons are buttons now.
  • Ability to detect video mode. (js only)
  • Add ‘next slide’ as argument to slide ‘change’ event.
  • Pause autoplay when playing video in slider.
  • Accessibility: Apply ‘the’ focus outline on pagination (css)
  • Use Rectangular Image –custom in basic slider examples to prevent incorrect use.
  • Added .vi-slider__slides element as root of slider. Not using this element will be frowned upon.
  • Deprecated .vi-slider__navigation-card, .vi-slider__navigation-card--prev and .vi-slider__navigation-card--next. Use .vi-slider__navigation, .vi-slider__navigation--prev and .vi-slider__navigation--next instead.

Added