Merge pull request #8523 from ProcessMaker/bugfix/FOUR-26546

FOUR-26546:Arrows are not displayed in the carousel when Process information is opened

Author: ryancooley

resources/js/processes-catalogue/components/CarouselSlide.vue

@@ -3,8 +3,22 @@
     <b-carousel
       ref="carousel"
       :interval="0"
-      controls
+      class="carousel"
     >
+      <div class="controls tw-flex tw-content-stretch tw-absolute tw-w-full tw-z-10 tw-top-1/2 tw-flex-wrap">
+        <button
+          class="tw-content-center tw-grow tw-left-0 tw-absolute tw-bg-transparent tw-color-[#556271] tw-text-xl"
+          @click="prevSlide()"
+        >
+          <i class="fas fa-caret-left" />
+        </button>
+        <button
+          class="tw-content-center tw-grow tw-right-0 tw-absolute tw-bg-transparent tw-color-[#556271] tw-text-xl"
+          @click="nextSlide()"
+        >
+          <i class="fas fa-caret-right" />
+        </button>
+      </div>
       <b-carousel-slide
         v-for="(image, index) in images.length > 0 ? images : defaultImage"
         :key="index"
@@ -68,6 +82,12 @@ export default {
     );
   },
   methods: {
+    prevSlide() {
+      this.$refs.carousel.prev();
+    },
+    nextSlide() {
+      this.$refs.carousel.next();
+    },
     resizeCarousel(url, index) {
       this.fullPage = !this.fullPage;
       this.$emit("full-carousel", {
@@ -80,6 +100,12 @@ export default {
 </script>
 
 <style scoped>
+.controls {
+  display: none;
+}
+.carousel:hover .controls {
+  display: block;
+}
 .carousel-normal {
   width: 100%;
   height: auto;