Easy image slide show for Jekyll static sites.

Posts in the Jekyll static site generator are mostly written using Markdown and adding images is easy. The way they are displayed are not so easily controllable within the markdown editor and multiple images in a slide show, just a complete nigtmare to impliment. Here the liquid ‘include’ file comes to the rescue.

I’ve listed my steps used for Jekyll to impliment image slide shows.

1 Create an include html file (slideShow.html) to process your list of image urls for the image slide show. This file can be re-used on various pages or posts with different images. This file is saved in the _includes folder.

<div id=”gallery”>{% for image in include.images %}
<img class=”mySlides” src=”{{ image }}”>{% endfor %}
<button onclick=”plusDivs(-1)”>❮</button>
<button onclick=”plusDivs(1)”>❯</button>
</div>
<script>
var slideIndex = 1;showDivs(slideIndex);
function plusDivs(n) {showDivs(slideIndex += n);}
function showDivs(n) {
var i;
var x = document.getElementsByClassName(“mySlides”);
if (n > x.length) {slideIndex = 1}
if (n < 1) {slideIndex = x.length}
for (i = 0; i < x.length; i++) {x[i].style.display = “none”;}
x[slideIndex-1].style.display = “block”;
}
</script>

2 Add the list of image urls for your image slide show to the YAML front end.

slideShow:
- image1Url
- image2Url
- Upto how many you want to display.

3 Place a liquid include to the image slide show file in your post or page.

{% include slideShow.html images=page.slideShow %}

4 Add your styling using css or your website theme classes.

You now have your image slide show.

Image slide show