slideshow

slideshow

{% comment %}
*
*   This include lets you easily embed a slideshow into your post.
*   To use the slideshow include you...
*
*   {% include slideshow %}
*
{% endcomment %}
<!-- Slideshow container -->
<div class="slideshow-container">

  <!-- Full-width images with number and caption text -->

  {% assign slidenumber = 1 %}
  {% assign slidetotal = 0 %}{% for i in page.slideshow %}{% assign slidetotal=slidetotal | plus:1 %}{% endfor %}

  {% for slide in page.slideshow %}
  <div class="mySlides fade">
    <div class="numbertext sans shadow-black">{{ slidenumber }} / {{ slidetotal }}</div>
    <img src="{{ site.url }}{{ site.baseurl }}{{ slide.image_url }}" style="width:100%">
    {% if slide.caption %}<div class="text sans shadow-black">{{ slide.caption }}</div>{% endif %}
  </div>

  {% assign slidenumber=slidenumber | plus:1 %}
  {% endfor %}

  <!-- Next and previous buttons -->
  <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
  <a class="next" onclick="plusSlides(1)">&#10095;</a>
</div>

<!-- The dots/circles -->
<div class="text-center">
  {% assign slidenumber = 1 %}
  {% for slide in page.slideshow %}
  <span class="dot" onclick="currentSlide({{ slidenumber }})"></span>
  {% assign slidenumber=slidenumber | plus:1 %}
  {% endfor %}
</div>