Fixed image carousel to only display buttons on two or more images

src/components/RentingComponents/ImageCarousel.vue

@@ -5,6 +5,7 @@
     data-bs-ride="carousel"
   >
     <div
+      v-if="setButtons"
       class="carousel-indicators absolute right-0 bottom-0 left-0 flex justify-center p-0 mb-4"
     >
       <button
@@ -27,7 +28,8 @@
         <img :src="image.src" class="block w-full" :alt="image.alt" />
       </div>
     </div>
-    <button
+    <div v-if="setButtons">
+      <button
       class="carousel-control-prev absolute top-0 bottom-0 flex items-center justify-center p-0 text-center border-0 hover:outline-none hover:no-underline focus:outline-none focus:no-underline left-0"
       type="button"
       data-bs-target="#carouselIndicators"
@@ -39,7 +41,9 @@
       ></span>
       <span class="visually-hidden">Previous</span>
     </button>
-    <button
+    </div>
+    <div v-if="setButtons">
+      <button
       class="carousel-control-next absolute top-0 bottom-0 flex items-center justify-center p-0 text-center border-0 hover:outline-none hover:no-underline focus:outline-none focus:no-underline right-0"
       type="button"
       data-bs-target="#carouselIndicators"
@@ -51,6 +55,7 @@
       ></span>
       <span class="visually-hidden">Next</span>
     </button>
+    </div>
   </div>
 </template>
 
@@ -72,6 +77,14 @@ export default {
   data() {
     return {};
   },
+  computed: {
+    setButtons() {
+      if(this.images.length > 1) {
+        return true;
+      }
+      return false;
+    }
+  },
 };
 </script>