Bug Fix: Rebind sync events after a slider is refreshed(#115).

dist/js/splide.esm.js

@@ -1,6 +1,6 @@
 /*!
  * Splide.js
- * Version  : 2.4.12
+ * Version  : 2.4.13
  * License  : MIT
  * Copyright: 2020 Naotoshi Fujita
  */
@@ -5334,7 +5334,7 @@ var KEY_MAP = {
       });
 
       if (Splide.options.isNavigation) {
-        Splide.on('navigation:mounted', initNavigation).on('active', function (Slide) {
+        Splide.on('navigation:mounted navigation:updated', initNavigation).on('active', function (Slide) {
           updateNavigation(Slide, true);
         }).on('inactive', function (Slide) {
           updateNavigation(Slide, false);
@@ -5536,6 +5536,12 @@ var KEY_MAP = {
  */
 
 var SYNC_EVENT = 'move.sync';
+/**
+ * The event names for click navigation.
+ * @type {string}
+ */
+
+var CLICK_EVENTS = 'mouseup touchend';
 /**
  * The keys for triggering the navigation button.
  *
@@ -5588,6 +5594,12 @@ var TRIGGER_KEYS = [' ', 'Enter', 'Spacebar'];
 
       if (isNavigation) {
         bind();
+        Splide.on('refresh', function () {
+          setTimeout(function () {
+            bind();
+            sibling.emit('navigation:updated', Splide);
+          });
+        });
       }
     },
 
@@ -5636,7 +5648,7 @@ var TRIGGER_KEYS = [' ', 'Enter', 'Spacebar'];
       /*
        * Listen mouseup and touchend events to handle click.
        */
-      Splide.on('mouseup touchend', function (e) {
+      Splide.off(CLICK_EVENTS, slide).on(CLICK_EVENTS, function (e) {
         // Ignore a middle or right click.
         if (!e.button || e.button === 0) {
           moveSibling(index);
@@ -5647,7 +5659,7 @@ var TRIGGER_KEYS = [' ', 'Enter', 'Spacebar'];
        * Note that Array.includes is not supported by IE.
        */
 
-      Splide.on('keyup', function (e) {
+      Splide.off('keyup', slide).on('keyup', function (e) {
         if (TRIGGER_KEYS.indexOf(e.key) > -1) {
           e.preventDefault();
           moveSibling(index);

dist/js/splide.js

@@ -1,6 +1,6 @@
 /*!
  * Splide.js
- * Version  : 2.4.12
+ * Version  : 2.4.13
  * License  : MIT
  * Copyright: 2020 Naotoshi Fujita
  */
@@ -5324,7 +5324,7 @@ var KEY_MAP = {
       });
 
       if (Splide.options.isNavigation) {
-        Splide.on('navigation:mounted', initNavigation).on('active', function (Slide) {
+        Splide.on('navigation:mounted navigation:updated', initNavigation).on('active', function (Slide) {
           updateNavigation(Slide, true);
         }).on('inactive', function (Slide) {
           updateNavigation(Slide, false);
@@ -5526,6 +5526,12 @@ var KEY_MAP = {
  */
 
 var SYNC_EVENT = 'move.sync';
+/**
+ * The event names for click navigation.
+ * @type {string}
+ */
+
+var CLICK_EVENTS = 'mouseup touchend';
 /**
  * The keys for triggering the navigation button.
  *
@@ -5578,6 +5584,12 @@ var TRIGGER_KEYS = [' ', 'Enter', 'Spacebar'];
 
       if (isNavigation) {
         bind();
+        Splide.on('refresh', function () {
+          setTimeout(function () {
+            bind();
+            sibling.emit('navigation:updated', Splide);
+          });
+        });
       }
     },
 
@@ -5626,7 +5638,7 @@ var TRIGGER_KEYS = [' ', 'Enter', 'Spacebar'];
       /*
        * Listen mouseup and touchend events to handle click.
        */
-      Splide.on('mouseup touchend', function (e) {
+      Splide.off(CLICK_EVENTS, slide).on(CLICK_EVENTS, function (e) {
         // Ignore a middle or right click.
         if (!e.button || e.button === 0) {
           moveSibling(index);
@@ -5637,7 +5649,7 @@ var TRIGGER_KEYS = [' ', 'Enter', 'Spacebar'];
        * Note that Array.includes is not supported by IE.
        */
 
-      Splide.on('keyup', function (e) {
+      Splide.off('keyup', slide).on('keyup', function (e) {
         if (TRIGGER_KEYS.indexOf(e.key) > -1) {
           e.preventDefault();
           moveSibling(index);

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@splidejs/splide",
-  "version": "2.4.13",
+  "version": "2.4.14",
   "description": "Splide is a lightweight and powerful slider without any dependencies.",
   "author": "Naotoshi Fujita",
   "license": "MIT",

src/js/components/a11y/index.js

@@ -68,7 +68,7 @@ export default ( Splide, Components ) => {
 
 			if ( Splide.options.isNavigation ) {
 				Splide
-					.on( 'navigation:mounted', initNavigation )
+					.on( 'navigation:mounted navigation:updated', initNavigation )
 					.on( 'active', Slide => { updateNavigation( Slide, true ) } )
 					.on( 'inactive', Slide => { updateNavigation( Slide, false ) } );
 			}

src/js/components/sync/index.js

@@ -15,6 +15,12 @@ import { IDLE } from "../../constants/states";
  */
 const SYNC_EVENT = 'move.sync';
 
+/**
+ * The event names for click navigation.
+ * @type {string}
+ */
+const CLICK_EVENTS = 'mouseup touchend';
+
 /**
  * The keys for triggering the navigation button.
  *
@@ -67,6 +73,13 @@ export default ( Splide ) => {
 
 			if ( isNavigation ) {
 				bind();
+
+				Splide.on( 'refresh', () => {
+					setTimeout( () => {
+						bind();
+						sibling.emit( 'navigation:updated', Splide );
+					} );
+				} );
 			}
 		},
 
@@ -116,23 +129,27 @@ export default ( Splide ) => {
 			/*
 			 * Listen mouseup and touchend events to handle click.
 			 */
-			Splide.on( 'mouseup touchend', e => {
-				// Ignore a middle or right click.
-				if ( ! e.button || e.button === 0 ) {
-					moveSibling( index );
-				}
-			}, slide );
+			Splide
+				.off( CLICK_EVENTS, slide )
+				.on( CLICK_EVENTS, e => {
+					// Ignore a middle or right click.
+					if ( ! e.button || e.button === 0 ) {
+						moveSibling( index );
+					}
+				}, slide );
 
 			/*
 			 * Subscribe keyup to handle Enter and Space key.
 			 * Note that Array.includes is not supported by IE.
 			 */
-			Splide.on( 'keyup', e => {
-				if ( TRIGGER_KEYS.indexOf( e.key ) > -1 ) {
-					e.preventDefault();
-					moveSibling( index );
-				}
-			}, slide, { passive: false } );
+			Splide
+				.off( 'keyup', slide )
+				.on( 'keyup', e => {
+					if ( TRIGGER_KEYS.indexOf( e.key ) > -1 ) {
+						e.preventDefault();
+						moveSibling( index );
+					}
+				}, slide, { passive: false } );
 		} );
 	}