bootstrap and Jquery

css/styles.css

@@ -57,3 +57,9 @@ body{
     left: 0;
     min-height: 300px;
 }
+#carouselButton {
+    right:0px;
+    position: absolute;
+    bottom: 0px;
+    z-index: 1;
+}

index.html

@@ -160,10 +160,23 @@
                 <div class="col-12 col-sm-2 col-form-label">Selection</div>
                 <div class="btn-group btn-group-toggle" data-toggle="buttons">
                   <label class="btn btn-success active">
-                      <input type="radio" name="options" id="option1" autocomplete="off" checked> Non-Smoking
+                    <input
+                      type="radio"
+                      name="options"
+                      id="option1"
+                      autocomplete="off"
+                      checked
+                    />
+                    Non-Smoking
                   </label>
                   <label class="btn btn-danger">
-                      <input type="radio" name="options" id="option2" autocomplete="off"> Smoking
+                    <input
+                      type="radio"
+                      name="options"
+                      id="option2"
+                      autocomplete="off"
+                    />
+                    Smoking
                   </label>
                 </div>
               </div>
@@ -317,6 +330,9 @@
             >
               <span class="carousel-control-next-icon"></span>
             </a>
+            <button class="btn btn-danger btn-sm" id="carouselButton">
+              <span id="carousel-button-icon" class="fa fa-pause"></span>
+            </button>
           </div>
         </div>
       </div>
@@ -465,5 +481,18 @@
     <script src="node_modules/jquery/dist/jquery.slim.min.js"></script>
     <script src="node_modules/popper.js/dist/umd/popper.min.js"></script>
     <script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
+    <script>
+      $("#carouselButton").click(function () {
+        if ($("#carouselButton").children("span").hasClass("fa-pause")) {
+          $("#mycarousel").carousel("pause");
+          $("#carouselButton").children("span").removeClass("fa-pause");
+          $("#carouselButton").children("span").addClass("fa-play");
+        } else if ($("#carouselButton").children("span").hasClass("fa-play")) {
+          $("#mycarousel").carousel("cycle");
+          $("#carouselButton").children("span").removeClass("fa-play");
+          $("#carouselButton").children("span").addClass("fa-pause");
+        }
+      });
+    </script>
   </body>
 </html>