<div class="slideshow">
  <div class="slideshow__inner">
    <nav class="slideshow__navigation">
      <h2 class="visuallyhidden">Slideshow Navigation</h2>
      <ul class='slideshow__navigation-list'>
        <li class='slideshow__navigation-item'>
          <button title="Previous" class="slideshow__navigation-button slideshow__navigation-button--previous" aria-label="Previous Slide">
            <svg class="slideshow__previous-arrow">
              <use xlink:href="#arrow-circle-previous"/>
            </svg>
          </button>
        </li>
        <li class='slideshow__navigation-item'>
          <button title="Next" class="slideshow__navigation-button slideshow__navigation-button--next" aria-label="Next Slide">
            <svg class="slideshow__next-arrow">
              <use xlink:href="#arrow-circle-next"/>
            </svg>
          </button>
        </li>
      </ul>
    </nav>
    <ul class="slideshow__list">
      <?php
        $aspect_ratio = 1.5;
        $sizes = '(max-width: 768px) 100vw, (max-width: 960px) 690px, (max-width: 1200px) 910px, 1110px';
        $srcset = get_placeholder_srcset($placeholder_base_url, array(414, 768, 690), $aspect_ratio);
        $src = get_placeholder_src($placeholder_base_url, 414, $aspect_ratio);
      ?>
      <li class="slideshow__item is-active">
        <img
          class="slideshow__image"
          sizes="<?php echo $sizes; ?>"
          srcset="fpo/images/slide_2_414@1x.jpg 414w, fpo/images/slide_2_414@2x.jpg 828w, fpo/images/slide_2_414@3x.jpg 1242w, fpo/images/slide_2_768@1x.jpg 768w, fpo/images/slide_2_768@2x.jpg 1536w, fpo/images/slide_2_768@3x.jpg 2304w, fpo/images/slide_2_690@1x.jpg 690w, fpo/images/slide_2_690@2x.jpg 1380w, fpo/images/slide_2_690@3x.jpg 2070w"
          src="fpo/images/slide_2_414@1x.jpg"
          alt="A screenshot from The Migration Series 2">
      </li>
      <li class="slideshow__item">
        <img
          class="slideshow__image"
          sizes="<?php echo $sizes; ?>"
          srcset="<?php echo $srcset; ?>"
          src="<?php echo $src; ?>"
          alt="A screenshot from The Migration Series 3">
      </li>
    </ul>
    <ul class="slideshow__dot-list">
      <li class="slideshow__dot-item is-active">
        <button class="slideshow__dot-button"><span class="visuallyhidden">Slide 1</span></button>
      </li>
      <li class="slideshow__dot-item">
        <button class="slideshow__dot-button"><span class="visuallyhidden">Slide 2</span></button>
      </li>
    </ul>
  </div>
</div>