@@ -980,3 +980,42 @@ body {
     margin-right: auto;
     width: 100%;
 }
+
+
+.mySlides1, .mySlides2 {display: none}
+img {vertical-align: middle;}
+
+/* Slideshow container */
+.slideshow-container {
+  max-width: 1000px;
+  position: relative;
+  margin: auto;
+}
+
+/* Next & previous buttons */
+.prev, .next {
+  cursor: pointer;
+  position: absolute;
+  top: 50%;
+  width: auto;
+  padding: 16px;
+  margin-top: -22px;
+  color: white;
+  font-weight: bold;
+  font-size: 18px;
+  transition: 0.6s ease;
+  border-radius: 0 3px 3px 0;
+  user-select: none;
+}
+
+/* Position the "next button" to the right */
+.next {
+  right: 0;
+  border-radius: 3px 0 0 3px;
+}
+
+/* On hover, add a grey background color */
+.prev:hover, .next:hover {
+  background-color: #f1f1f1;
+  color: black;
+}
@@ -13,6 +13,42 @@ <h2 class="section-heading">Photos</h2>
             </div>
 
 
+            <div class="slideshow-container">
+              <div class="mySlides1">
+                <img src="img/photos/IMG_5598.JPG" style="width:100%">
+              </div>
+
+              <div class="mySlides1">
+                <img src="img/photos/IMG_5601.JPG" style="width:100%">
+              </div>
+
+              <div class="mySlides1">
+                <img src="img/photos/IMG_5622.JPG" style="width:100%">
+              </div>
+
+              <a class="prev" onclick="plusSlides(-1, 0)">&#10094;</a>
+              <a class="next" onclick="plusSlides(1, 0)">&#10095;</a>
+            </div>
+
+            <p>Slideshow 2:</p>
+            <div class="slideshow-container">
+              <div class="mySlides2">
+                <img src="img/photos/IMG_5624.JPG" style="width:100%">
+              </div>
+
+              <div class="mySlides2">
+                <img src="img/photos/IMG_5624.JPG" style="width:100%">
+              </div>
+
+              <div class="mySlides2">
+                <img src="img/photos/IMG_5624.JPG" style="width:100%">
+              </div>
+
+              <a class="prev" onclick="plusSlides(-1, 1)">&#10094;</a>
+              <a class="next" onclick="plusSlides(1, 1)">&#10095;</a>
+            </div>
+
+
               <div class="row">
                       <div class="col-lg-12 text-center">
                           <h3><a href="https://photos.app.goo.gl/2V4QojZqsNLVgEXb8">See more photos <i class="fa fa-arrow-right"></i></a></h3>
 
@@ -34,4 +34,24 @@ $('div.modal').on('show.bs.modal', function() {
 			$(modal).modal('hide');
 		}
 	}
-});
+});
+
+var slideIndex = [1,1];
+var slideId = ["mySlides1", "mySlides2"]
+showSlides(1, 0);
+showSlides(1, 1);
+
+function plusSlides(n, no) {
+  showSlides(slideIndex[no] += n, no);
+}
+
+function showSlides(n, no) {
+  var i;
+  var x = document.getElementsByClassName(slideId[no]);
+  if (n > x.length) {slideIndex[no] = 1}
+  if (n < 1) {slideIndex[no] = x.length}
+  for (i = 0; i < x.length; i++) {
+     x[i].style.display = "none";
+  }
+  x[slideIndex[no]-1].style.display = "block";
+}