add timer to switch slides automatically

Author: bishabosha

resources/js/functions.js

@@ -323,6 +323,50 @@ $(document).ready(function () {
   }
 });
 
+$(document).ready(function () {
+  // set up automatic switching of code carousel
+  $(".code-carousel").each(function () {
+    var carousel = this;
+    var inputs = [];
+    $(carousel).children("input.code-carousel_control").each(function () {
+      inputs.push(this);
+    });
+
+    // if there is more than one section, set up automatic switching
+    if (inputs.length > 1) {
+
+      // at every timeout, switch to the next section if the page is visible
+      const Ticker = (timeout) => {
+        var cancelled = false;
+
+        var index = inputs.findIndex(input => input.checked);
+
+        const interval = setInterval(() => {
+          if (!document.hidden && !cancelled) {
+            const nextIndex = (index + 1) % inputs.length;
+            inputs[nextIndex].checked = true;
+            index = nextIndex;
+          }
+        }, timeout);
+
+        const cancel = () => {
+          cancelled = true;
+          clearInterval(interval);
+        };
+
+        return { cancel };
+      };
+
+      const ticker = Ticker(8000); // switch every 8 seconds
+
+      carousel.addEventListener("click", function cancelTicker() {
+        carousel.removeEventListener("click", cancelTicker);
+        ticker.cancel();
+      });
+    }
+  });
+});
+
 var image = { width: 1680, height: 1100 };
 var target = { x: 1028, y: 290 };