Carousel

This project uses CSS Snap-Points where available to achieve the best performance possible for carousels and image galleries. It achieves this via the Snapper jQuery plugin with some additional custom tweaks.

Default

  • javascript
  • third-party

One image is shown per step, with images navigable via swipe or scroll. Note that on certain platforms the scrollbar must be visible, otherwise there would be no way to navigate (see below for examples that hide the scrollbar in favor of navigation).

<div class="snapper js-Snapper ">
  <div class="snapper_pane">
    <div class="snapper_items">
      <div class="snapper_item">
        <img src="data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22400%22%20height%3D%22200%22%20viewBox%3D%220%200%20400%20200%22%3E%3Crect%20fill%3D%22%23FFDF00%22%20width%3D%22100%25%22%20height%3D%22100%25%22%2F%3E%3Ctext%20fill%3D%22%23000000%22%20font-family%3D%22sans-serif%22%20font-size%3D%2240%22%20dy%3D%2216%22%20font-weight%3D%22bold%22%20x%3D%2250%25%22%20y%3D%2250%25%22%20text-anchor%3D%22middle%22%3EA%3C%2Ftext%3E%3C%2Fsvg%3E" alt="">
        </div>
        <div class="snapper_item">
          <img src="data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22400%22%20height%3D%22200%22%20viewBox%3D%220%200%20400%20200%22%3E%3Crect%20fill%3D%22%2300A651%22%20width%3D%22100%25%22%20height%3D%22100%25%22%2F%3E%3Ctext%20fill%3D%22%23a6ffd1%22%20font-family%3D%22sans-serif%22%20font-size%3D%2240%22%20dy%3D%2216%22%20font-weight%3D%22bold%22%20x%3D%2250%25%22%20y%3D%2250%25%22%20text-anchor%3D%22middle%22%3EB%3C%2Ftext%3E%3C%2Fsvg%3E" alt="">
        </div>
          <div class="snapper_item">
            <img src="data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22400%22%20height%3D%22200%22%20viewBox%3D%220%200%20400%20200%22%3E%3Crect%20fill%3D%22%23116bb1%22%20width%3D%22100%25%22%20height%3D%22100%25%22%2F%3E%3Ctext%20fill%3D%22%23c7e4fa%22%20font-family%3D%22sans-serif%22%20font-size%3D%2240%22%20dy%3D%2216%22%20font-weight%3D%22bold%22%20x%3D%2250%25%22%20y%3D%2250%25%22%20text-anchor%3D%22middle%22%3EC%3C%2Ftext%3E%3C%2Fsvg%3E" alt="">
        </div>
          </div>
        </div>
      </div>

With Navigation

  • javascript
  • third-party

snapper_nav containers may be used to house thumbnail navigation.

For optimal nav thumbnail sizing pass the number of items in the carousel into the snapper by defining a --snapper-items custom property.

At viewport widths below the projects "medium" breakpoint, the thumbnails are displayed as iOS-style dots.

If you include a video in the navigation, adding the snapper_video_link class will cause that nav item to display as a play button on small screens.

A video thumbnail showing a set of generators in the driveway of a house
Product Video 
<div class="snapper js-Snapper " style='--snapper-items: 4'>
  <div class="snapper_pane">
    <div class="snapper_items">
      <div class="snapper_item" id="demo-img-a">
        <img src="data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22400%22%20height%3D%22200%22%20viewBox%3D%220%200%20400%20200%22%3E%3Crect%20fill%3D%22%23FFDF00%22%20width%3D%22100%25%22%20height%3D%22100%25%22%2F%3E%3Ctext%20fill%3D%22%23000000%22%20font-family%3D%22sans-serif%22%20font-size%3D%2240%22%20dy%3D%2216%22%20font-weight%3D%22bold%22%20x%3D%2250%25%22%20y%3D%2250%25%22%20text-anchor%3D%22middle%22%3EA%3C%2Ftext%3E%3C%2Fsvg%3E" alt="">
    </div>
        <div class="snapper_item" id="demo-img-b">
          <img src="data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22400%22%20height%3D%22200%22%20viewBox%3D%220%200%20400%20200%22%3E%3Crect%20fill%3D%22%2300A651%22%20width%3D%22100%25%22%20height%3D%22100%25%22%2F%3E%3Ctext%20fill%3D%22%23a6ffd1%22%20font-family%3D%22sans-serif%22%20font-size%3D%2240%22%20dy%3D%2216%22%20font-weight%3D%22bold%22%20x%3D%2250%25%22%20y%3D%2250%25%22%20text-anchor%3D%22middle%22%3EB%3C%2Ftext%3E%3C%2Fsvg%3E" alt="">
    </div>
          <div class="snapper_item" id="demo-img-c">
            <img src="data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22400%22%20height%3D%22200%22%20viewBox%3D%220%200%20400%20200%22%3E%3Crect%20fill%3D%22%23116bb1%22%20width%3D%22100%25%22%20height%3D%22100%25%22%2F%3E%3Ctext%20fill%3D%22%23c7e4fa%22%20font-family%3D%22sans-serif%22%20font-size%3D%2240%22%20dy%3D%2216%22%20font-weight%3D%22bold%22%20x%3D%2250%25%22%20y%3D%2250%25%22%20text-anchor%3D%22middle%22%3EC%3C%2Ftext%3E%3C%2Fsvg%3E" alt="">
    </div>
            <div class="snapper_item u-padSides2" id="video">

              <div class="FlexEmbed  js-EmbedLazyLoader">
                <div class="FlexEmbed-ratio FlexEmbed-ratio--16by9"></div>

                <div class="FlexEmbed-content u-bgBlack u-textSilver">
                  <svg width="28" height="28" viewBox="0 0 28 28" aria-hidden="true" class="u-spin FlexEmbed-icon">
                    <path d="M27.5 14c0 7.453-6.047 13.5-13.5 13.5s-13.5-6.047-13.5-13.5c0-6.781 5-12.391 11.5-13.359v3.563c-4.562 0.922-8 4.969-8 9.797 0 5.516 4.484 10 10 10s10-4.484 10-10c0-4.828-3.437-8.875-8-9.797v-3.563c6.5 0.969 11.5 6.578 11.5 13.359z" />
                  </svg>

                </div>

                <a
              href="https://www.youtube.com/watch?v&#x3D;fX9kvnOhhAk"
              class="js-EmbedLazyLoader-preview">

              <img class="FlexEmbed-content"
                  src="/images/prototypes/tcs/GeneratorFamily.jpg"
                  alt="A video thumbnail showing a set of generators in the driveway of a house">
            
              <div class="FlexEmbed-content FlexEmbed-content--overlay">
                <svg width="26" height="26" viewBox="0 0 512 512" aria-hidden="true" class="FlexEmbed-icon FlexEmbed-icon--interactive">
              <path d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm115.7 272l-176 101c-15.8 8.8-35.7-2.5-35.7-21V152c0-18.4 19.8-29.8 35.7-21l176 107c16.4 9.2 16.4 32.9 0 42z"/>
            </svg>
            
                  <span class="u-hiddenVisually">Play Video</span>
              </div>
            </a>

                <div class="js-EmbedLazyLoader-content" hidden data-embed-code='
                  <iframe
                    class="FlexEmbed-content"
                    src="https://www.youtube.com/embed/fX9kvnOhhAk?autoplay&#x3D;1&amp;enablejsapi&#x3D;1
                    allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
                    allowfullscreen
                  ></iframe>
              '></div>
              </div>
            </div>
          </div>
        </div>
        <div class="snapper_nav">
          <a href="#demo-img-a"><img src="data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22400%22%20height%3D%22200%22%20viewBox%3D%220%200%20400%20200%22%3E%3Crect%20fill%3D%22%23FFDF00%22%20width%3D%22100%25%22%20height%3D%22100%25%22%2F%3E%3Ctext%20fill%3D%22%23000000%22%20font-family%3D%22sans-serif%22%20font-size%3D%2240%22%20dy%3D%2216%22%20font-weight%3D%22bold%22%20x%3D%2250%25%22%20y%3D%2250%25%22%20text-anchor%3D%22middle%22%3EA%3C%2Ftext%3E%3C%2Fsvg%3E" alt=""></a>
          <a href="#demo-img-b"><img src="data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22400%22%20height%3D%22200%22%20viewBox%3D%220%200%20400%20200%22%3E%3Crect%20fill%3D%22%2300A651%22%20width%3D%22100%25%22%20height%3D%22100%25%22%2F%3E%3Ctext%20fill%3D%22%23a6ffd1%22%20font-family%3D%22sans-serif%22%20font-size%3D%2240%22%20dy%3D%2216%22%20font-weight%3D%22bold%22%20x%3D%2250%25%22%20y%3D%2250%25%22%20text-anchor%3D%22middle%22%3EB%3C%2Ftext%3E%3C%2Fsvg%3E" alt=""></a>
          <a href="#demo-img-c"><img src="data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22400%22%20height%3D%22200%22%20viewBox%3D%220%200%20400%20200%22%3E%3Crect%20fill%3D%22%23116bb1%22%20width%3D%22100%25%22%20height%3D%22100%25%22%2F%3E%3Ctext%20fill%3D%22%23c7e4fa%22%20font-family%3D%22sans-serif%22%20font-size%3D%2240%22%20dy%3D%2216%22%20font-weight%3D%22bold%22%20x%3D%2250%25%22%20y%3D%2250%25%22%20text-anchor%3D%22middle%22%3EC%3C%2Ftext%3E%3C%2Fsvg%3E" alt=""></a>
          <a href="#video" class="snapper_video_link">

      <div class="FlexEmbed">
        <div class="FlexEmbed-ratio FlexEmbed-ratio--16by9"></div>
          
          <div
            
            >
          
            <img class="FlexEmbed-content"
                src="/images/prototypes/tcs/GeneratorFamily.jpg"
                alt="A video thumbnail showing a set of generators in the driveway of a house">
          
            <div class="FlexEmbed-content FlexEmbed-content--overlay">
              <svg width="26" height="26" viewBox="0 0 512 512" aria-hidden="true" class="FlexEmbed-icon ">
            <path d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm115.7 272l-176 101c-15.8 8.8-35.7-2.5-35.7-21V152c0-18.4 19.8-29.8 35.7-21l176 107c16.4 9.2 16.4 32.9 0 42z"/>
          </svg>
          
                <span class="u-hiddenVisually">Product Video</span>
            </div>
          </div>
      </div>
    </a>

        </div>
      </div>

With Nine Navigation Items

The navigation should be able to handle up to nine thumbnails displaying on a single row on larger screens.

A video thumbnail showing a set of generators in the driveway of a house
Product Video

With Magnify

  • javascript
  • third-party

The carousel can be combined with the Magnify JS jQuery plugin to add rollover image magnification to carousel images.

This magnification is only enabled for mouse events. It is disabled on touch events to ensure it does not interfere with swiping or scrolling.

In order to enable the magnification, add a js-Magnify class and include a link to a larger version of the image in a `data-magnify-src attribute.

<div class="snapper js-Snapper " style='--snapper-items: 3'>
  <div class="snapper_pane">
    <div class="snapper_items">
      <div class="snapper_item" id="demo-img-a">
        <img class="js-Magnify" src="data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22400%22%20height%3D%22200%22%20viewBox%3D%220%200%20400%20200%22%3E%3Crect%20fill%3D%22%23FFDF00%22%20width%3D%22100%25%22%20height%3D%22100%25%22%2F%3E%3Ctext%20fill%3D%22%23000000%22%20font-family%3D%22sans-serif%22%20font-size%3D%2240%22%20dy%3D%2216%22%20font-weight%3D%22bold%22%20x%3D%2250%25%22%20y%3D%2250%25%22%20text-anchor%3D%22middle%22%3EA%3C%2Ftext%3E%3C%2Fsvg%3E" data-magnify-src="data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%224000%22%20height%3D%222000%22%20viewBox%3D%220%200%204000%202000%22%3E%3Crect%20fill%3D%22%23FFDF00%22%20width%3D%22100%25%22%20height%3D%22100%25%22%2F%3E%3Ctext%20fill%3D%22%23000000%22%20font-family%3D%22sans-serif%22%20font-size%3D%22400%22%20dy%3D%22160%22%20font-weight%3D%22bold%22%20x%3D%2250%25%22%20y%3D%2250%25%22%20text-anchor%3D%22middle%22%3EA%3C%2Ftext%3E%3C%2Fsvg%3E" alt="">
    </div>
        <div class="snapper_item" id="demo-img-b">
          <img class="js-Magnify" src="data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22400%22%20height%3D%22200%22%20viewBox%3D%220%200%20400%20200%22%3E%3Crect%20fill%3D%22%2300A651%22%20width%3D%22100%25%22%20height%3D%22100%25%22%2F%3E%3Ctext%20fill%3D%22%23a6ffd1%22%20font-family%3D%22sans-serif%22%20font-size%3D%2240%22%20dy%3D%2216%22%20font-weight%3D%22bold%22%20x%3D%2250%25%22%20y%3D%2250%25%22%20text-anchor%3D%22middle%22%3EB%3C%2Ftext%3E%3C%2Fsvg%3E" data-magnify-src="data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%224000%22%20height%3D%222000%22%20viewBox%3D%220%200%204000%202000%22%3E%3Crect%20fill%3D%22%2300A651%22%20width%3D%22100%25%22%20height%3D%22100%25%22%2F%3E%3Ctext%20fill%3D%22%23a6ffd1%22%20font-family%3D%22sans-serif%22%20font-size%3D%22400%22%20dy%3D%22160%22%20font-weight%3D%22bold%22%20x%3D%2250%25%22%20y%3D%2250%25%22%20text-anchor%3D%22middle%22%3EB%3C%2Ftext%3E%3C%2Fsvg%3E" alt="">
    </div>
          <div class="snapper_item" id="demo-img-c">
            <img class="js-Magnify" src="data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22400%22%20height%3D%22200%22%20viewBox%3D%220%200%20400%20200%22%3E%3Crect%20fill%3D%22%23116bb1%22%20width%3D%22100%25%22%20height%3D%22100%25%22%2F%3E%3Ctext%20fill%3D%22%23c7e4fa%22%20font-family%3D%22sans-serif%22%20font-size%3D%2240%22%20dy%3D%2216%22%20font-weight%3D%22bold%22%20x%3D%2250%25%22%20y%3D%2250%25%22%20text-anchor%3D%22middle%22%3EC%3C%2Ftext%3E%3C%2Fsvg%3E" data-magnify-src="data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%224000%22%20height%3D%222000%22%20viewBox%3D%220%200%204000%202000%22%3E%3Crect%20fill%3D%22%23116bb1%22%20width%3D%22100%25%22%20height%3D%22100%25%22%2F%3E%3Ctext%20fill%3D%22%23c7e4fa%22%20font-family%3D%22sans-serif%22%20font-size%3D%22400%22%20dy%3D%22160%22%20font-weight%3D%22bold%22%20x%3D%2250%25%22%20y%3D%2250%25%22%20text-anchor%3D%22middle%22%3EC%3C%2Ftext%3E%3C%2Fsvg%3E" alt="">
    </div>
          </div>
        </div>
        <div class="snapper_nav">
          <a href="#demo-img-a"><img src="data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22400%22%20height%3D%22200%22%20viewBox%3D%220%200%20400%20200%22%3E%3Crect%20fill%3D%22%23FFDF00%22%20width%3D%22100%25%22%20height%3D%22100%25%22%2F%3E%3Ctext%20fill%3D%22%23000000%22%20font-family%3D%22sans-serif%22%20font-size%3D%2240%22%20dy%3D%2216%22%20font-weight%3D%22bold%22%20x%3D%2250%25%22%20y%3D%2250%25%22%20text-anchor%3D%22middle%22%3EA%3C%2Ftext%3E%3C%2Fsvg%3E" alt=""></a>
          <a href="#demo-img-b"><img src="data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22400%22%20height%3D%22200%22%20viewBox%3D%220%200%20400%20200%22%3E%3Crect%20fill%3D%22%2300A651%22%20width%3D%22100%25%22%20height%3D%22100%25%22%2F%3E%3Ctext%20fill%3D%22%23a6ffd1%22%20font-family%3D%22sans-serif%22%20font-size%3D%2240%22%20dy%3D%2216%22%20font-weight%3D%22bold%22%20x%3D%2250%25%22%20y%3D%2250%25%22%20text-anchor%3D%22middle%22%3EB%3C%2Ftext%3E%3C%2Fsvg%3E" alt=""></a>
          <a href="#demo-img-c"><img src="data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22400%22%20height%3D%22200%22%20viewBox%3D%220%200%20400%20200%22%3E%3Crect%20fill%3D%22%23116bb1%22%20width%3D%22100%25%22%20height%3D%22100%25%22%2F%3E%3Ctext%20fill%3D%22%23c7e4fa%22%20font-family%3D%22sans-serif%22%20font-size%3D%2240%22%20dy%3D%2216%22%20font-weight%3D%22bold%22%20x%3D%2250%25%22%20y%3D%2250%25%22%20text-anchor%3D%22middle%22%3EC%3C%2Ftext%3E%3C%2Fsvg%3E" alt=""></a>

        </div>
      </div>

Film Strip

  • javascript
  • third-party

Our custom snapper--filmStrip modifier allows for a row of square-ish images, useful for showing a concise image gallery and pairing well with next/previous controls.

<div class="snapper snapper--filmStrip js-Snapper" data-snapper-setwidths data-snapper-nextprev>
  <div class="snapper_nextprev_contain">
    <div class="snapper_pane">
      <div class="snapper_items">
        <div class="snapper_item u-pad03" id="demo-filmstrip-img-0">
          <div class="FlexEmbed">
            <span class="FlexEmbed-ratio"></span>
            <img class="FlexEmbed-content" src="data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22150%22%20height%3D%22150%22%20viewBox%3D%220%200%20150%20150%22%3E%3Crect%20fill%3D%22%23C8302F%22%20width%3D%22100%25%22%20height%3D%22100%25%22%2F%3E%3Ctext%20fill%3D%22%23fdf9f9%22%20font-family%3D%22sans-serif%22%20font-size%3D%2230%22%20dy%3D%2212%22%20font-weight%3D%22bold%22%20x%3D%2250%25%22%20y%3D%2250%25%22%20text-anchor%3D%22middle%22%3ED%3C%2Ftext%3E%3C%2Fsvg%3E"" alt="">
            </div>
          </div>
          <div class="snapper_item u-pad03" id="demo-filmstrip-img-1">
            <div class="FlexEmbed">
              <span class="FlexEmbed-ratio"></span>
              <img class="FlexEmbed-content" src="data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22150%22%20height%3D%22150%22%20viewBox%3D%220%200%20150%20150%22%3E%3Crect%20fill%3D%22%23116bb1%22%20width%3D%22100%25%22%20height%3D%22100%25%22%2F%3E%3Ctext%20fill%3D%22%23c7e4fa%22%20font-family%3D%22sans-serif%22%20font-size%3D%2230%22%20dy%3D%2212%22%20font-weight%3D%22bold%22%20x%3D%2250%25%22%20y%3D%2250%25%22%20text-anchor%3D%22middle%22%3EI%3C%2Ftext%3E%3C%2Fsvg%3E"" alt="">
            </div>
          </div>
          <div class="snapper_item u-pad03" id="demo-filmstrip-img-2">
              <div class="FlexEmbed">
                <span class="FlexEmbed-ratio"></span>
                <img class="FlexEmbed-content" src="data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22150%22%20height%3D%22150%22%20viewBox%3D%220%200%20150%20150%22%3E%3Crect%20fill%3D%22%23C8302F%22%20width%3D%22100%25%22%20height%3D%22100%25%22%2F%3E%3Ctext%20fill%3D%22%23fdf9f9%22%20font-family%3D%22sans-serif%22%20font-size%3D%2230%22%20dy%3D%2212%22%20font-weight%3D%22bold%22%20x%3D%2250%25%22%20y%3D%2250%25%22%20text-anchor%3D%22middle%22%3EF%3C%2Ftext%3E%3C%2Fsvg%3E"" alt="">
            </div>
          </div>
          <div class="snapper_item u-pad03" id="demo-filmstrip-img-3">
                <div class="FlexEmbed">
                  <span class="FlexEmbed-ratio"></span>
                  <img class="FlexEmbed-content" src="data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22150%22%20height%3D%22150%22%20viewBox%3D%220%200%20150%20150%22%3E%3Crect%20fill%3D%22%2300A651%22%20width%3D%22100%25%22%20height%3D%22100%25%22%2F%3E%3Ctext%20fill%3D%22%23a6ffd1%22%20font-family%3D%22sans-serif%22%20font-size%3D%2230%22%20dy%3D%2212%22%20font-weight%3D%22bold%22%20x%3D%2250%25%22%20y%3D%2250%25%22%20text-anchor%3D%22middle%22%3EQ%3C%2Ftext%3E%3C%2Fsvg%3E"" alt="">
            </div>
          </div>
          <div class="snapper_item u-pad03" id="demo-filmstrip-img-4">
                  <div class="FlexEmbed">
                    <span class="FlexEmbed-ratio"></span>
                    <img class="FlexEmbed-content" src="data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22150%22%20height%3D%22150%22%20viewBox%3D%220%200%20150%20150%22%3E%3Crect%20fill%3D%22%2300A651%22%20width%3D%22100%25%22%20height%3D%22100%25%22%2F%3E%3Ctext%20fill%3D%22%23a6ffd1%22%20font-family%3D%22sans-serif%22%20font-size%3D%2230%22%20dy%3D%2212%22%20font-weight%3D%22bold%22%20x%3D%2250%25%22%20y%3D%2250%25%22%20text-anchor%3D%22middle%22%3EP%3C%2Ftext%3E%3C%2Fsvg%3E"" alt="">
            </div>
          </div>
          <div class="snapper_item u-pad03" id="demo-filmstrip-img-5">
                    <div class="FlexEmbed">
                      <span class="FlexEmbed-ratio"></span>
                      <img class="FlexEmbed-content" src="data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22150%22%20height%3D%22150%22%20viewBox%3D%220%200%20150%20150%22%3E%3Crect%20fill%3D%22%23C8302F%22%20width%3D%22100%25%22%20height%3D%22100%25%22%2F%3E%3Ctext%20fill%3D%22%23fdf9f9%22%20font-family%3D%22sans-serif%22%20font-size%3D%2230%22%20dy%3D%2212%22%20font-weight%3D%22bold%22%20x%3D%2250%25%22%20y%3D%2250%25%22%20text-anchor%3D%22middle%22%3EC%3C%2Ftext%3E%3C%2Fsvg%3E"" alt="">
            </div>
          </div>
          <div class="snapper_item u-pad03" id="demo-filmstrip-img-6">
                      <div class="FlexEmbed">
                        <span class="FlexEmbed-ratio"></span>
                        <img class="FlexEmbed-content" src="data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22150%22%20height%3D%22150%22%20viewBox%3D%220%200%20150%20150%22%3E%3Crect%20fill%3D%22%23F0A800%22%20width%3D%22100%25%22%20height%3D%22100%25%22%2F%3E%3Ctext%20fill%3D%22%23000000%22%20font-family%3D%22sans-serif%22%20font-size%3D%2230%22%20dy%3D%2212%22%20font-weight%3D%22bold%22%20x%3D%2250%25%22%20y%3D%2250%25%22%20text-anchor%3D%22middle%22%3EO%3C%2Ftext%3E%3C%2Fsvg%3E"" alt="">
            </div>
          </div>
          <div class="snapper_item u-pad03" id="demo-filmstrip-img-7">
                        <div class="FlexEmbed">
                          <span class="FlexEmbed-ratio"></span>
                          <img class="FlexEmbed-content" src="data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22150%22%20height%3D%22150%22%20viewBox%3D%220%200%20150%20150%22%3E%3Crect%20fill%3D%22%23F0A800%22%20width%3D%22100%25%22%20height%3D%22100%25%22%2F%3E%3Ctext%20fill%3D%22%23000000%22%20font-family%3D%22sans-serif%22%20font-size%3D%2230%22%20dy%3D%2212%22%20font-weight%3D%22bold%22%20x%3D%2250%25%22%20y%3D%2250%25%22%20text-anchor%3D%22middle%22%3ED%3C%2Ftext%3E%3C%2Fsvg%3E"" alt="">
            </div>
          </div>
          <div class="snapper_item u-pad03" id="demo-filmstrip-img-8">
                          <div class="FlexEmbed">
                            <span class="FlexEmbed-ratio"></span>
                            <img class="FlexEmbed-content" src="data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22150%22%20height%3D%22150%22%20viewBox%3D%220%200%20150%20150%22%3E%3Crect%20fill%3D%22%2300A651%22%20width%3D%22100%25%22%20height%3D%22100%25%22%2F%3E%3Ctext%20fill%3D%22%23a6ffd1%22%20font-family%3D%22sans-serif%22%20font-size%3D%2230%22%20dy%3D%2212%22%20font-weight%3D%22bold%22%20x%3D%2250%25%22%20y%3D%2250%25%22%20text-anchor%3D%22middle%22%3EY%3C%2Ftext%3E%3C%2Fsvg%3E"" alt="">
            </div>
          </div>
          <div class="snapper_item u-pad03" id="demo-filmstrip-img-9">
                            <div class="FlexEmbed">
                              <span class="FlexEmbed-ratio"></span>
                              <img class="FlexEmbed-content" src="data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22150%22%20height%3D%22150%22%20viewBox%3D%220%200%20150%20150%22%3E%3Crect%20fill%3D%22%23F0A800%22%20width%3D%22100%25%22%20height%3D%22100%25%22%2F%3E%3Ctext%20fill%3D%22%23000000%22%20font-family%3D%22sans-serif%22%20font-size%3D%2230%22%20dy%3D%2212%22%20font-weight%3D%22bold%22%20x%3D%2250%25%22%20y%3D%2250%25%22%20text-anchor%3D%22middle%22%3ES%3C%2Ftext%3E%3C%2Fsvg%3E"" alt="">
            </div>
          </div>
          <div class="snapper_item u-pad03" id="demo-filmstrip-img-10">
                              <div class="FlexEmbed">
                                <span class="FlexEmbed-ratio"></span>
                                <img class="FlexEmbed-content" src="data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22150%22%20height%3D%22150%22%20viewBox%3D%220%200%20150%20150%22%3E%3Crect%20fill%3D%22%23F0A800%22%20width%3D%22100%25%22%20height%3D%22100%25%22%2F%3E%3Ctext%20fill%3D%22%23000000%22%20font-family%3D%22sans-serif%22%20font-size%3D%2230%22%20dy%3D%2212%22%20font-weight%3D%22bold%22%20x%3D%2250%25%22%20y%3D%2250%25%22%20text-anchor%3D%22middle%22%3EE%3C%2Ftext%3E%3C%2Fsvg%3E"" alt="">
            </div>
          </div>
          <div class="snapper_item u-pad03" id="demo-filmstrip-img-11">
                                <div class="FlexEmbed">
                                  <span class="FlexEmbed-ratio"></span>
                                  <img class="FlexEmbed-content" src="data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22150%22%20height%3D%22150%22%20viewBox%3D%220%200%20150%20150%22%3E%3Crect%20fill%3D%22%2300A651%22%20width%3D%22100%25%22%20height%3D%22100%25%22%2F%3E%3Ctext%20fill%3D%22%23a6ffd1%22%20font-family%3D%22sans-serif%22%20font-size%3D%2230%22%20dy%3D%2212%22%20font-weight%3D%22bold%22%20x%3D%2250%25%22%20y%3D%2250%25%22%20text-anchor%3D%22middle%22%3EA%3C%2Ftext%3E%3C%2Fsvg%3E"" alt="">
            </div>
          </div>
      </div>
    </div>
  </div>
</div>

Film Strip With Links

  • javascript
  • third-party

You can use links for your Film Strip items as well.

<div class="snapper snapper--filmStrip js-Snapper" data-snapper-setwidths data-snapper-nextprev>
  <div class="snapper_nextprev_contain">
    <div class="snapper_pane">
      <div class="snapper_items">
        <div class="snapper_item u-pad03" id="demo-filmstrip-img-0">
          <a class="FlexEmbed" href="https://example.com">
              <span class="FlexEmbed-ratio"></span>
              <img class="FlexEmbed-content"
                src="data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22150%22%20height%3D%22150%22%20viewBox%3D%220%200%20150%20150%22%3E%3Crect%20fill%3D%22%2300A651%22%20width%3D%22100%25%22%20height%3D%22100%25%22%2F%3E%3Ctext%20fill%3D%22%23a6ffd1%22%20font-family%3D%22sans-serif%22%20font-size%3D%2230%22%20dy%3D%2212%22%20font-weight%3D%22bold%22%20x%3D%2250%25%22%20y%3D%2250%25%22%20text-anchor%3D%22middle%22%3ES%3C%2Ftext%3E%3C%2Fsvg%3E"" alt="">
            </a>
        </div>
        <div class="snapper_item u-pad03" id="demo-filmstrip-img-1">
          <a class="FlexEmbed" href="https://example.com">
              <span class="FlexEmbed-ratio"></span>
              <img class="FlexEmbed-content"
                src="data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22150%22%20height%3D%22150%22%20viewBox%3D%220%200%20150%20150%22%3E%3Crect%20fill%3D%22%23116bb1%22%20width%3D%22100%25%22%20height%3D%22100%25%22%2F%3E%3Ctext%20fill%3D%22%23c7e4fa%22%20font-family%3D%22sans-serif%22%20font-size%3D%2230%22%20dy%3D%2212%22%20font-weight%3D%22bold%22%20x%3D%2250%25%22%20y%3D%2250%25%22%20text-anchor%3D%22middle%22%3EO%3C%2Ftext%3E%3C%2Fsvg%3E"" alt="">
            </a>
        </div>
        <div class="snapper_item u-pad03" id="demo-filmstrip-img-2">
          <a class="FlexEmbed" href="https://example.com">
              <span class="FlexEmbed-ratio"></span>
              <img class="FlexEmbed-content"
                src="data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22150%22%20height%3D%22150%22%20viewBox%3D%220%200%20150%20150%22%3E%3Crect%20fill%3D%22%2300A651%22%20width%3D%22100%25%22%20height%3D%22100%25%22%2F%3E%3Ctext%20fill%3D%22%23a6ffd1%22%20font-family%3D%22sans-serif%22%20font-size%3D%2230%22%20dy%3D%2212%22%20font-weight%3D%22bold%22%20x%3D%2250%25%22%20y%3D%2250%25%22%20text-anchor%3D%22middle%22%3EY%3C%2Ftext%3E%3C%2Fsvg%3E"" alt="">
            </a>
        </div>
        <div class="snapper_item u-pad03" id="demo-filmstrip-img-3">
          <a class="FlexEmbed" href="https://example.com">
              <span class="FlexEmbed-ratio"></span>
              <img class="FlexEmbed-content"
                src="data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22150%22%20height%3D%22150%22%20viewBox%3D%220%200%20150%20150%22%3E%3Crect%20fill%3D%22%23C8302F%22%20width%3D%22100%25%22%20height%3D%22100%25%22%2F%3E%3Ctext%20fill%3D%22%23fdf9f9%22%20font-family%3D%22sans-serif%22%20font-size%3D%2230%22%20dy%3D%2212%22%20font-weight%3D%22bold%22%20x%3D%2250%25%22%20y%3D%2250%25%22%20text-anchor%3D%22middle%22%3EK%3C%2Ftext%3E%3C%2Fsvg%3E"" alt="">
            </a>
        </div>
        <div class="snapper_item u-pad03" id="demo-filmstrip-img-4">
          <a class="FlexEmbed" href="https://example.com">
              <span class="FlexEmbed-ratio"></span>
              <img class="FlexEmbed-content"
                src="data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22150%22%20height%3D%22150%22%20viewBox%3D%220%200%20150%20150%22%3E%3Crect%20fill%3D%22%2300A651%22%20width%3D%22100%25%22%20height%3D%22100%25%22%2F%3E%3Ctext%20fill%3D%22%23a6ffd1%22%20font-family%3D%22sans-serif%22%20font-size%3D%2230%22%20dy%3D%2212%22%20font-weight%3D%22bold%22%20x%3D%2250%25%22%20y%3D%2250%25%22%20text-anchor%3D%22middle%22%3ES%3C%2Ftext%3E%3C%2Fsvg%3E"" alt="">
            </a>
        </div>
        <div class="snapper_item u-pad03" id="demo-filmstrip-img-5">
          <a class="FlexEmbed" href="https://example.com">
              <span class="FlexEmbed-ratio"></span>
              <img class="FlexEmbed-content"
                src="data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22150%22%20height%3D%22150%22%20viewBox%3D%220%200%20150%20150%22%3E%3Crect%20fill%3D%22%2300A651%22%20width%3D%22100%25%22%20height%3D%22100%25%22%2F%3E%3Ctext%20fill%3D%22%23a6ffd1%22%20font-family%3D%22sans-serif%22%20font-size%3D%2230%22%20dy%3D%2212%22%20font-weight%3D%22bold%22%20x%3D%2250%25%22%20y%3D%2250%25%22%20text-anchor%3D%22middle%22%3EH%3C%2Ftext%3E%3C%2Fsvg%3E"" alt="">
            </a>
        </div>
        <div class="snapper_item u-pad03" id="demo-filmstrip-img-6">
          <a class="FlexEmbed" href="https://example.com">
              <span class="FlexEmbed-ratio"></span>
              <img class="FlexEmbed-content"
                src="data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22150%22%20height%3D%22150%22%20viewBox%3D%220%200%20150%20150%22%3E%3Crect%20fill%3D%22%23116bb1%22%20width%3D%22100%25%22%20height%3D%22100%25%22%2F%3E%3Ctext%20fill%3D%22%23c7e4fa%22%20font-family%3D%22sans-serif%22%20font-size%3D%2230%22%20dy%3D%2212%22%20font-weight%3D%22bold%22%20x%3D%2250%25%22%20y%3D%2250%25%22%20text-anchor%3D%22middle%22%3EY%3C%2Ftext%3E%3C%2Fsvg%3E"" alt="">
            </a>
        </div>
        <div class="snapper_item u-pad03" id="demo-filmstrip-img-7">
          <a class="FlexEmbed" href="https://example.com">
              <span class="FlexEmbed-ratio"></span>
              <img class="FlexEmbed-content"
                src="data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22150%22%20height%3D%22150%22%20viewBox%3D%220%200%20150%20150%22%3E%3Crect%20fill%3D%22%23C8302F%22%20width%3D%22100%25%22%20height%3D%22100%25%22%2F%3E%3Ctext%20fill%3D%22%23fdf9f9%22%20font-family%3D%22sans-serif%22%20font-size%3D%2230%22%20dy%3D%2212%22%20font-weight%3D%22bold%22%20x%3D%2250%25%22%20y%3D%2250%25%22%20text-anchor%3D%22middle%22%3EA%3C%2Ftext%3E%3C%2Fsvg%3E"" alt="">
            </a>
        </div>
        <div class="snapper_item u-pad03" id="demo-filmstrip-img-8">
          <a class="FlexEmbed" href="https://example.com">
              <span class="FlexEmbed-ratio"></span>
              <img class="FlexEmbed-content"
                src="data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22150%22%20height%3D%22150%22%20viewBox%3D%220%200%20150%20150%22%3E%3Crect%20fill%3D%22%23116bb1%22%20width%3D%22100%25%22%20height%3D%22100%25%22%2F%3E%3Ctext%20fill%3D%22%23c7e4fa%22%20font-family%3D%22sans-serif%22%20font-size%3D%2230%22%20dy%3D%2212%22%20font-weight%3D%22bold%22%20x%3D%2250%25%22%20y%3D%2250%25%22%20text-anchor%3D%22middle%22%3EA%3C%2Ftext%3E%3C%2Fsvg%3E"" alt="">
            </a>
        </div>
        <div class="snapper_item u-pad03" id="demo-filmstrip-img-9">
          <a class="FlexEmbed" href="https://example.com">
              <span class="FlexEmbed-ratio"></span>
              <img class="FlexEmbed-content"
                src="data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22150%22%20height%3D%22150%22%20viewBox%3D%220%200%20150%20150%22%3E%3Crect%20fill%3D%22%2300A651%22%20width%3D%22100%25%22%20height%3D%22100%25%22%2F%3E%3Ctext%20fill%3D%22%23a6ffd1%22%20font-family%3D%22sans-serif%22%20font-size%3D%2230%22%20dy%3D%2212%22%20font-weight%3D%22bold%22%20x%3D%2250%25%22%20y%3D%2250%25%22%20text-anchor%3D%22middle%22%3EL%3C%2Ftext%3E%3C%2Fsvg%3E"" alt="">
            </a>
        </div>
        <div class="snapper_item u-pad03" id="demo-filmstrip-img-10">
          <a class="FlexEmbed" href="https://example.com">
              <span class="FlexEmbed-ratio"></span>
              <img class="FlexEmbed-content"
                src="data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22150%22%20height%3D%22150%22%20viewBox%3D%220%200%20150%20150%22%3E%3Crect%20fill%3D%22%23116bb1%22%20width%3D%22100%25%22%20height%3D%22100%25%22%2F%3E%3Ctext%20fill%3D%22%23c7e4fa%22%20font-family%3D%22sans-serif%22%20font-size%3D%2230%22%20dy%3D%2212%22%20font-weight%3D%22bold%22%20x%3D%2250%25%22%20y%3D%2250%25%22%20text-anchor%3D%22middle%22%3EV%3C%2Ftext%3E%3C%2Fsvg%3E"" alt="">
            </a>
        </div>
        <div class="snapper_item u-pad03" id="demo-filmstrip-img-11">
          <a class="FlexEmbed" href="https://example.com">
              <span class="FlexEmbed-ratio"></span>
              <img class="FlexEmbed-content"
                src="data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22150%22%20height%3D%22150%22%20viewBox%3D%220%200%20150%20150%22%3E%3Crect%20fill%3D%22%23F0A800%22%20width%3D%22100%25%22%20height%3D%22100%25%22%2F%3E%3Ctext%20fill%3D%22%23000000%22%20font-family%3D%22sans-serif%22%20font-size%3D%2230%22%20dy%3D%2212%22%20font-weight%3D%22bold%22%20x%3D%2250%25%22%20y%3D%2250%25%22%20text-anchor%3D%22middle%22%3EX%3C%2Ftext%3E%3C%2Fsvg%3E"" alt="">
            </a>
        </div>
      </div>
    </div>
  </div>
</div>