feat: add Orbit element "data-slide-active-label" to target the bullet span to move

Add the Orbit element `[data-slide-active-label]` to explicitely set which Orbit bullet children describe the active slide and should be moved to the new active slide.

diff --git a/js/foundation.orbit.js b/js/foundation.orbit.js
index aa7cd13b963a54250573f208901e579f295d5856..9d84d4308cbd9b27d454ae5ed22380c8eb99f6b8 100644 (file)
--- a/js/foundation.orbit.js
+++ b/js/foundation.orbit.js
@@ -384,9 +384,16 @@ class Orbit extends Plugin {
   */
   _updateBullets(idx) {
     var $oldBullet = this.$element.find(`.${this.options.boxOfBullets}`)
-    .find('.is-active').removeClass('is-active').blur(),
-    span = $oldBullet.find('span:last').detach(),
-    $newBullet = this.$bullets.eq(idx).addClass('is-active').append(span);
+      .find('.is-active').removeClass('is-active').blur();
+
+    var activeStateDescriptor = $oldBullet.children('[data-slide-active-label]').last();
+    if (!activeStateDescriptor.length) {
+      activeStateDescriptor = $oldBullet.find('span:last');
+      activeStateDescriptor.attr('data-slide-active-label', '');
+    }
+
+    activeStateDescriptor.detach();
+    $newBullet = this.$bullets.eq(idx).addClass('is-active').append(activeStateDescriptor);
   }
 
   /**