[Jekyll] Making slideshow

 1<!-- Slideshow container -->
 2<div class="slideshow-container">
 3  <!-- Full-width images with number and caption text -->
 4  <div class="mySlides fade">
 5    <div class="numbertext">1 / 3</div>
 6    <img src="img1.jpg" style="width:100%" />
 7    <div class="text">Caption Text</div>
 8  </div>
 9
10  <div class="mySlides fade">
11    <div class="numbertext">2 / 3</div>
12    <img src="img2.jpg" style="width:100%" />
13    <div class="text">Caption Two</div>
14  </div>
15
16  <div class="mySlides fade">
17    <div class="numbertext">3 / 3</div>
18    <img src="img3.jpg" style="width:100%" />
19    <div class="text">Caption Three</div>
20  </div>
21
22  <!-- Next and previous buttons -->
23  <!-- <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
24  <a class="next" onclick="plusSlides(1)">&#10095;</a> -->
25
26  <!-- This code makes left and right arrow button to change next and previous picture,
27  but it makes a timing error when user clicked. So I make this code to comment. -->
28</div>
29<br />
30<script>
31  showSlides();
32  /*I find out the slideshow didn't display automatically at first,
33  so add this code to make slideshow display at first or page is refreshed.*/
34</script>
35
36<!-- The dots/circles -->
37<!-- <div style="text-align:center">
38  <span class="dot" onclick="currentSlide(1)"></span>
39  <span class="dot" onclick="currentSlide(2)"></span>
40  <span class="dot" onclick="currentSlide(3)"></span>
41</div> -->
42
43<!-- This code makes a timing error too. -->

  1* {
  2  box-sizing: border-box;
  3}
  4
  5/* Slideshow container */
  6.slideshow-container {
  7  max-width: 1000px;
  8  position: relative;
  9  margin: auto;
 10}
 11
 12/* Hide the images by default */
 13.mySlides {
 14  display: none;
 15}
 16
 17/* Next & previous buttons */
 18.prev,
 19.next {
 20  cursor: pointer;
 21  position: absolute;
 22  top: 50%;
 23  width: auto;
 24  margin-top: -22px;
 25  padding: 16px;
 26  color: white;
 27  font-weight: bold;
 28  font-size: 18px;
 29  transition: 0.6s ease;
 30  border-radius: 0 3px 3px 0;
 31  user-select: none;
 32}
 33
 34/* Position the "next button" to the right */
 35.next {
 36  right: 0;
 37  border-radius: 3px 0 0 3px;
 38}
 39
 40/* On hover, add a black background color with a little bit see-through */
 41.prev:hover,
 42.next:hover {
 43  background-color: rgba(0, 0, 0, 0.8);
 44}
 45
 46/* Caption text */
 47.text {
 48  color: #f2f2f2;
 49  font-size: 15px;
 50  padding: 8px 12px;
 51  position: absolute;
 52  bottom: 8px;
 53  width: 100%;
 54  text-align: center;
 55}
 56
 57/* Number text (1/3 etc) */
 58.numbertext {
 59  color: #f2f2f2;
 60  font-size: 12px;
 61  padding: 8px 12px;
 62  position: absolute;
 63  top: 0;
 64}
 65
 66/* The dots/bullets/indicators */
 67.dot {
 68  cursor: pointer;
 69  height: 15px;
 70  width: 15px;
 71  margin: 0 2px;
 72  background-color: #bbb;
 73  border-radius: 50%;
 74  display: inline-block;
 75  transition: background-color 0.6s ease;
 76}
 77
 78.active,
 79.dot:hover {
 80  background-color: #717171;
 81}
 82
 83/* Fading animation */
 84.fade {
 85  -webkit-animation-name: fade;
 86  -webkit-animation-duration: 1.5s;
 87  animation-name: fade;
 88  animation-duration: 1.5s;
 89}
 90
 91@-webkit-keyframes fade {
 92  from {
 93    opacity: 0.4;
 94  }
 95  to {
 96    opacity: 1;
 97  }
 98}
 99
100@keyframes fade {
101  from {
102    opacity: 0.4;
103  }
104  to {
105    opacity: 1;
106  }
107}

 1var slideIndex = 0;
 2showSlides();
 3
 4function showSlides() {
 5  var i;
 6  var slides = document.getElementsByClassName("mySlides");
 7  for (i = 0; i < slides.length; i++) {
 8    slides[i].style.display = "none";
 9  }
10  slideIndex++;
11  if (slideIndex > slides.length) {
12    slideIndex = 1;
13  }
14  slides[slideIndex - 1].style.display = "block";
15  setTimeout(showSlides, 3579); // original code changes image every 2 seconds,
16  // but I made it more slowly.
17}