Added first and last buttons to image gallery slideshow block - Bug #1530606

behatnotneeded

Change-Id: Ic839970344a7b09d742f3f609ef2a80e6ea500af

htdocs/theme/raw/plugintype/artefact/file/blocktype/gallery/templates/slideshow.tpl

@@ -20,6 +20,19 @@
             <span class="icon icon-chevron-left icon-lg" role="presentation" aria-hidden="true" aria-hidden="true"></span>
             <span class="sr-only">Previous</span>
         </a>
+
+        <a class="left carousel-control carousel-control-first" href="#slideshow{$instanceid}" role="button" data-slide-to="0">
+            <span class="icon icon-chevron-left icon-lg" role="presentation" aria-hidden="true" aria-hidden="true"></span>
+            <span class="icon icon-chevron-left icon-lg" role="presentation" aria-hidden="true" aria-hidden="true"></span>
+            <span class="sr-only">First</span>
+        </a>
+
+        <a class="right carousel-control carousel-control-last" href="#slideshow{$instanceid}" role="button" data-slide-to="{$k}">
+            <span class="icon icon-chevron-right icon-lg" role="presentation" aria-hidden="true" aria-hidden="true"></span>
+            <span class="icon icon-chevron-right icon-lg" role="presentation" aria-hidden="true" aria-hidden="true"></span>
+            <span class="sr-only">Last</span>
+        </a>
+
         <a class="right carousel-control" href="#slideshow{$instanceid}" role="button" data-slide="next">
             <span class="icon icon-chevron-right icon-lg" role="presentation" aria-hidden="true" aria-hidden="true"></span>
             <span class="sr-only">Next</span>

htdocs/theme/raw/sass/_custom.scss

@@ -395,3 +395,19 @@
         color: #333;
     }
 }
+
+// Styles for the first and last buttons on the image gallery block
+.carousel-control {
+    &.carousel-control-first {
+        margin-left: 40px;
+        span:first-of-type {
+            margin-right: -10px;
+        }
+    }
+    &.carousel-control-last {
+        margin-right: 40px;
+        span:first-of-type {
+            margin-right: -10px;
+        }
+    }
+}