Redesign carousel implementation to reflect documentation - bug fix

build/media_source/vendor/bootstrap/js/carousel.es6.js

@@ -4,21 +4,12 @@ window.bootstrap = window.bootstrap || {};
 window.bootstrap.Carousel = Carousel;
 
 if (Joomla && Joomla.getOptions) {
-  // Get the elements/configurations from the PHP
+  // Get the elements configuration from PHP
   const carousels = Joomla.getOptions('bootstrap.carousel');
-  // Initialise the elements
+
   if (typeof carousels === 'object' && carousels !== null) {
     Object.keys(carousels).forEach((carousel) => {
-      const opt = carousels[carousel];
-      const options = {
-        interval: opt.interval ? opt.interval : 5000,
-        keyboard: opt.keyboard ? opt.keyboard : true,
-        pause: opt.pause ? opt.pause : 'hover',
-        slide: opt.slide ? opt.slide : false,
-        wrap: opt.wrap ? opt.wrap : true,
-        touch: opt.touch ? opt.touch : true,
-      };
-
+      const options = carousels[carousel];
       const elements = Array.from(document.querySelectorAll(carousel));
       if (elements.length) {
         elements.map((el) => new window.bootstrap.Carousel(el, options));

libraries/src/HTML/Helpers/Bootstrap.php

@@ -125,35 +125,66 @@ public static function button($selector = ''): void
      *
      * Options for the carousel can be:
      * - interval  number   5000   The amount of time to delay between automatically cycling an item.
-     *                             If false, carousel will not automatically cycle.
      * - keyboard  boolean  true   Whether the carousel should react to keyboard events.
-     * - pause     string|  hover  Pauses the cycling of the carousel on mouseenter and resumes the cycling
-     *             boolean         of the carousel on mouseleave.
-     * - slide     string|  false  Autoplays the carousel after the user manually cycles the first item.
-     *             boolean         If "carousel", autoplays the carousel on load.
+     * - pause     string|  hover  If set to "hover", pauses the cycling of the carousel on mouseenter and resumes the
+     *             boolean         cycling of the carousel on mouseleave. If set to false, hovering over the carousel won’t
+     *                             pause it. On touch-enabled devices, when set to "hover", cycling will pause on touchend
+     *                             (once the user finished interacting with the carousel) for two intervals, before
+     *                             automatically resuming. This is in addition to the mouse behavior.
+     * - ride      string|  false  If set to true, autoplays the carousel after the user manually cycles the first item. If set
+     *             boolean         to "carousel", autoplays the carousel on load.
+     * - touch     boolean  true   Whether the carousel should support left/right swipe interactions on touchscreen devices.
+     * - wrap      boolean  true   Whether the carousel should cycle continuously or have hard stops.
      */
     public static function carousel($selector = '', $params = []): void
     {
-        // Only load once
         if (!empty(static::$loaded[__METHOD__][$selector])) {
             return;
         }
 
         if ($selector !== '') {
-            // Setup options object
-            $opt = [
-                'interval' => (int) ($params['interval'] ?? 5000),
-                'keyboard' => (bool) ($params['keyboard'] ?? true),
-                'pause'    => $params['pause'] ?? 'hover',
-                'slide'    => (bool) ($params['slide'] ?? false),
-                'wrap'     => (bool) ($params['wrap'] ?? true),
-                'touch'    => (bool) ($params['touch'] ?? true),
-            ];
+            $opt['interval'] = 5000;
+
+            if (isset($params['interval']) && is_numeric($params['interval'])) {
+                $opt['interval'] = (int) $params['interval'];
+            }
+
+            $opt['keyboard'] = true;
+
+            if (isset($params['keyboard']) && \is_bool($params['keyboard'])) {
+                $opt['keyboard'] = $params['keyboard'];
+            }
+
+            $opt['pause'] = 'hover';
+
+            if (isset($params['pause']) && \in_array($params['pause'], ['hover', false], true)) {
+                $opt['pause'] = $params['pause'];
+            }
+
+            $opt['ride'] = false;
+
+            if (isset($params['ride']) && \in_array($params['ride'], ['carousel', true, false], true)) {
+                $opt['ride'] = $params['ride'];
+            }
+
+            $opt['touch'] = true;
 
-            Factory::getDocument()->addScriptOptions('bootstrap.carousel', [$selector => (object) array_filter($opt)]);
+            if (isset($params['touch']) && \is_bool($params['touch'])) {
+                $opt['touch'] = $params['touch'];
+            }
+
+            $opt['wrap'] = true;
+
+            if (isset($params['wrap']) && \is_bool($params['wrap'])) {
+                $opt['wrap'] = $params['wrap'];
+            }
+
+            Factory::getApplication()->getDocument()->addScriptOptions(
+                'bootstrap.carousel',
+                [$selector => (object) $opt]
+            );
         }
 
-        // Include the Bootstrap component
         Factory::getApplication()
             ->getDocument()
             ->getWebAssetManager()