diff --git a/templates/patterns/carousel/carousel.ui_patterns.yml b/templates/patterns/carousel/carousel.ui_patterns.yml
index 5d2262436e368adf757c7448bfc40c00a39c0b0c..82966015a52a45873bfb2d6a8fcd2c4063e1951d 100644
--- a/templates/patterns/carousel/carousel.ui_patterns.yml
+++ b/templates/patterns/carousel/carousel.ui_patterns.yml
@@ -56,8 +56,6 @@ carousel:
       preview:
         - type: "pattern"
           id: "carousel_item"
-          settings:
-            active: true
           fields:
             image:
               theme: "image"
@@ -97,3 +95,10 @@ carousel:
               - type: "html_tag"
                 tag: "p"
                 value: "Praesent commodo cursus magna, vel scelerisque nisl consectetur."
+  libraries:
+    - carousel:
+        js:
+          js/carousel.js: {}
+        dependencies:
+          - core/drupal
+          - core/once
diff --git a/templates/patterns/carousel/js/carousel.js b/templates/patterns/carousel/js/carousel.js
new file mode 100644
index 0000000000000000000000000000000000000000..4627689ed771f170386d622bdccb09c1528a646b
--- /dev/null
+++ b/templates/patterns/carousel/js/carousel.js
@@ -0,0 +1,26 @@
+((Drupal, once) => {
+  Drupal.ui_suite_bootstrap_carousel = Drupal.ui_suite_bootstrap_carousel || {};
+
+  /**
+   * Set active class on the first item.
+   *
+   * @type {Drupal~behavior}
+   *
+   * @prop {Drupal~behaviorAttach} attach
+   *   Attaches the behaviors for the active class.
+   */
+  Drupal.behaviors.ui_suite_bootstrap_carousel = {
+    attach(context) {
+      once('carousel-active', '.carousel', context).forEach((carousel) => {
+        const items = carousel.querySelectorAll(
+          '.carousel-inner .carousel-item',
+        );
+        if (items.length === 0) {
+          return;
+        }
+
+        items.item(0).classList.add('active');
+      });
+    },
+  };
+})(Drupal, once);
diff --git a/templates/patterns/carousel_item/carousel_item.ui_patterns.yml b/templates/patterns/carousel_item/carousel_item.ui_patterns.yml
index e1364acb81cf1558eb2f87a647edd805b2662d83..c4322397bb1a79550ab606592475dc426003984f 100644
--- a/templates/patterns/carousel_item/carousel_item.ui_patterns.yml
+++ b/templates/patterns/carousel_item/carousel_item.ui_patterns.yml
@@ -5,13 +5,6 @@ carousel_item:
     - 'https://getbootstrap.com/docs/5.3/components/carousel/'
   category: "Carousel"
   settings:
-    active:
-      type: "boolean"
-      label: "Active"
-      description: "If the carousel item is displayed."
-      preview: true
-      allow_expose: true
-      allow_token: true
     interval:
       type: "number"
       label: "Interval"
diff --git a/templates/patterns/carousel_item/pattern-carousel-item.html.twig b/templates/patterns/carousel_item/pattern-carousel-item.html.twig
index 13b2027f27729a2d513f6e8a56eaf79032310759..dcf213e3f49ab566950f6d4fed60f6dcf57b074f 100644
--- a/templates/patterns/carousel_item/pattern-carousel-item.html.twig
+++ b/templates/patterns/carousel_item/pattern-carousel-item.html.twig
@@ -1,4 +1,3 @@
-{% set attributes = active ? attributes.addClass('active') : attributes %}
 {% set attributes = interval ? attributes.setAttribute('data-bs-interval', interval) : attributes %}
 
 <div{{ attributes.addClass('carousel-item') }}>
diff --git a/ui_examples/carousel.ui_examples.yml b/ui_examples/carousel.ui_examples.yml
index 86a908a4872055f7abff0cb3d526d4d719c11f54..71d81d96e59d3c07cbe2c7f5346ee35243f1d9a6 100644
--- a/ui_examples/carousel.ui_examples.yml
+++ b/ui_examples/carousel.ui_examples.yml
@@ -16,8 +16,6 @@ render:
       slides:
         - type: "pattern"
           id: "carousel_item"
-          settings:
-            active: true
           fields:
             image:
               theme: "image"