{% if post.screenshot %}
<!--https://www.w3schools.com/howto/howto_js_slideshow.asp-->
<!-- Slideshow container -->
<!--<script src="image_slide.js"></script>-->
<div class="slideshow-container">
  <a class="prev" onclick="plusSlides(-1)" style="left:0px">&#10094;</a>
  <!-- Full-width images with number and caption text -->
  {% for shot in post.screenshot %}
    <div class="mySlides">
      <img src="img/portfolio/{{ shot }}" class="img-responsive img-centered" alt="{{ post.alt }}">
    </div>
  {% endfor %}
  <!-- Next and previous buttons -->
  <a class="next" onclick="plusSlides(1)">&#10095;</a>
</div>
<script>
  let slideIndex = 1;
  showSlides(slideIndex);
  
  // Next/previous controls
  function plusSlides(n) {
    showSlides(slideIndex += n);
  }
  
  // Thumbnail image controls
  function currentSlide(n) {
    showSlides(slideIndex = n);
  }
  
  function showSlides(n) {
    let i;
    let slides = document.getElementsByClassName("mySlides");
    if (n > slides.length) {slideIndex = 1}
    if (n < 1) {slideIndex = slides.length}
    for (i = 0; i < slides.length; i++) {
      slides[i].style.display = "none";
    }
    slides[slideIndex-1].style.display = "block";
  }
</script>
<br>