<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Totam, explicabo numquam error harum eveniet dolorem possimus aliquam, atque quae labore, voluptatum magni velit quo sed non officiis id commodi! A.</p>
<div id="demo-root-element">
  <div class="c-contain-slider c-contain-slider--ratio-3-2">
    <div class="c-photo-slider js-c-photo-slider c-photo-slider--has-info c-photo-slider--has-nav{{#if modifier}} {{ modifier }}{{/if}}"
      role="region" aria-label="Photo slideshow" tabindex="0">
      <div class="c-photo-slider__canvas">
        <div class="c-photo-slider__nav c-photo-slider__nav--left">
          <button type="button" class="c-photo-slider__nav-button c-photo-slider__nav-button--left" aria-label="View previous photo">
            <svg class="c-photo-slider__nav-icon" role="img" pointer-events="none" focusable="false" aria-hidden="true">
              <use xlink:href="{{ basePath }}/assets/patterns/images/sprite.svg#nav-arrow-left"></use>
            </svg>
          </button>
        </div>
        <div class="c-photo-slider__nav c-photo-slider__nav--right">
          <button type="button" class="c-photo-slider__nav-button c-photo-slider__nav-button--right" aria-label="View next photo">
            <svg class="c-photo-slider__nav-icon" role="img" pointer-events="none" focusable="false" aria-hidden="true">
              <use xlink:href="{{ basePath }}/assets/patterns/images/sprite.svg#nav-arrow-right"></use>
            </svg>
          </button>
        </div>
        <ul class="c-photo-slider__list" aria-live="polite" aria-atomic="false">
          <li class="c-photo-slider__item c-photo-slider__item--photo">
            <div class="c-photo-slider__item-content">
              {{> article-photo-gallery-overlay gallery1 }}
            </div>
          </li>
          <li class="c-photo-slider__item c-photo-slider__item--photo">
            <div class="c-photo-slider__item-content">
              {{> article-photo-gallery-overlay gallery2 }}
            </div>
          </li>
          <li class="c-photo-slider__item c-photo-slider__item--photo">
            <div class="c-photo-slider__item-content">
              {{> article-photo-gallery-overlay gallery3 }}
            </div>
          </li>
          {{#if ad1}}
            <li class="c-photo-slider__item c-photo-slider__item--ad">
              <div class="c-photo-slider__item-content">
                {{> ad ad1 }}
              </div>
            </li>
          {{/if}}
          <li class="c-photo-slider__item c-photo-slider__item--photo">
            <div class="c-photo-slider__item-content">
              {{> article-photo-gallery-overlay gallery4 }}
            </div>
          </li>
          <li class="c-photo-slider__item c-photo-slider__item--photo">
            <div class="c-photo-slider__item-content">
              {{> article-photo-gallery-overlay gallery5 }}
            </div>
          </li>
        </ul>
      </div>
      <div class="c-photo-slider__caption c-article-media__info c-article-media__info--line c-article-media__info--dark c-article-media__info--center">
        {{!-- placeholder for active photo's figcaption --}}
      </div>
      {{#if shareTools}}
        <div class="c-photo-slider__share-tools">
          {{> share-tools shareTools }}
        </div>
      {{/if}}
    </div>
  </div>
</div>

<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Totam, explicabo numquam error harum eveniet dolorem possimus aliquam, atque quae labore, voluptatum magni velit quo sed non officiis id commodi! A.</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Totam, explicabo numquam error harum eveniet dolorem possimus aliquam, atque quae labore, voluptatum magni velit quo sed non officiis id commodi! A.</p>

<h2>Placeholder: <small>Displayed before JS replaces with real slider markup</small></h2>
<div class="c-contain-slider c-contain-slider--ratio-3-2">
  <div class="c-photo-slider{{#if modifier}} {{ modifier }}{{/if}}"
    role="region" aria-label="Photo slideshow" tabindex="0">
    <div class="c-photo-slider__canvas">
      <ul class="c-photo-slider__list">
        <li class="c-photo-slider__item">
          <div class="c-spinner c-spinner-lg c-spinner-light"></div>
        </li>
      </ul>
    </div>
  </div>
</div>

<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Totam, explicabo numquam error harum eveniet dolorem possimus aliquam, atque quae labore, voluptatum magni velit quo sed non officiis id commodi! A.</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Totam, explicabo numquam error harum eveniet dolorem possimus aliquam, atque quae labore, voluptatum magni velit quo sed non officiis id commodi! A.</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Totam, explicabo numquam error harum eveniet dolorem possimus aliquam, atque quae labore, voluptatum magni velit quo sed non officiis id commodi! A.</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Totam, explicabo numquam error harum eveniet dolorem possimus aliquam, atque quae labore, voluptatum magni velit quo sed non officiis id commodi! A.</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Totam, explicabo numquam error harum eveniet dolorem possimus aliquam, atque quae labore, voluptatum magni velit quo sed non officiis id commodi! A.</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Totam, explicabo numquam error harum eveniet dolorem possimus aliquam, atque quae labore, voluptatum magni velit quo sed non officiis id commodi! A.</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Totam, explicabo numquam error harum eveniet dolorem possimus aliquam, atque quae labore, voluptatum magni velit quo sed non officiis id commodi! A.</p>
