Bug Fix: New slides were not shown when multiple slides were added at the same time(#49).

dist/js/splide.esm.js

@@ -1982,13 +1982,6 @@ var STYLE_RESTORE_EVENTS = 'update.slide';
      */
     isClone: realIndex > -1,
 
-    /**
-     * Hold the original styles.
-     *
-     * @type {string}
-     */
-    styles: getAttribute(slide, 'style') || '',
-
     /**
      * Called when the component is mounted.
      */
@@ -2013,7 +2006,14 @@ var STYLE_RESTORE_EVENTS = 'update.slide';
             _update(true, false);
           }
         });
-      }
+      } // Make sure the slide is shown.
+
+
+      applyStyle(slide, {
+        display: ''
+      }); // Hold the original styles.
+
+      this.styles = getAttribute(slide, 'style') || '';
     },
 
     /**
@@ -2295,7 +2295,8 @@ var UID_NAME = 'uid';
       }
 
       if (slide instanceof Element) {
-        var ref = this.slides[index];
+        var ref = this.slides[index]; // This will be removed in mount() of Slide component.
+
         applyStyle(slide, {
           display: 'none'
         });
@@ -2309,9 +2310,6 @@ var UID_NAME = 'uid';
         }
 
         dom_loaded(slide, function () {
-          applyStyle(slide, {
-            display: ''
-          });
           callback && callback(slide);
         });
       }

dist/js/splide.js

@@ -1972,13 +1972,6 @@ var STYLE_RESTORE_EVENTS = 'update.slide';
      */
     isClone: realIndex > -1,
 
-    /**
-     * Hold the original styles.
-     *
-     * @type {string}
-     */
-    styles: getAttribute(slide, 'style') || '',
-
     /**
      * Called when the component is mounted.
      */
@@ -2003,7 +1996,14 @@ var STYLE_RESTORE_EVENTS = 'update.slide';
             _update(true, false);
           }
         });
-      }
+      } // Make sure the slide is shown.
+
+
+      applyStyle(slide, {
+        display: ''
+      }); // Hold the original styles.
+
+      this.styles = getAttribute(slide, 'style') || '';
     },
 
     /**
@@ -2285,7 +2285,8 @@ var UID_NAME = 'uid';
       }
 
       if (slide instanceof Element) {
-        var ref = this.slides[index];
+        var ref = this.slides[index]; // This will be removed in mount() of Slide component.
+
         applyStyle(slide, {
           display: 'none'
         });
@@ -2299,9 +2300,6 @@ var UID_NAME = 'uid';
         }
 
         dom_loaded(slide, function () {
-          applyStyle(slide, {
-            display: ''
-          });
           callback && callback(slide);
         });
       }

src/js/components/elements/index.js

@@ -181,6 +181,8 @@ export default ( Splide, Components ) => {
 
 			if ( slide instanceof Element ) {
 				const ref = this.slides[ index ];
+
+				// This will be removed in mount() of Slide component.
 				applyStyle( slide, { display: 'none' } );
 
 				if ( ref ) {
@@ -191,10 +193,7 @@ export default ( Splide, Components ) => {
 					this.slides.push( slide );
 				}
 
-				loaded( slide, () => {
-					applyStyle( slide, { display: '' } );
-					callback && callback( slide );
-				} );
+				loaded( slide, () => { callback && callback( slide ) } );
 			}
 		},
 

src/js/components/elements/slide.js

@@ -5,7 +5,7 @@
  * @copyright Naotoshi Fujita. All rights reserved.
  */
 
-import { find, addClass, removeClass, hasClass, getAttribute, setAttribute } from '../../utils/dom';
+import { find, addClass, removeClass, hasClass, getAttribute, setAttribute, applyStyle } from '../../utils/dom';
 import { FADE, SLIDE } from '../../constants/types';
 import { STATUS_CLASSES } from '../../constants/classes';
 import { values } from "../../utils/object";
@@ -88,13 +88,6 @@ export default ( Splide, index, realIndex, slide ) => {
 		 */
 		isClone: realIndex > -1,
 
-		/**
-		 * Hold the original styles.
-		 *
-		 * @type {string}
-		 */
-		styles: getAttribute( slide, 'style' ) || '',
-
 		/**
 		 * Called when the component is mounted.
 		 */
@@ -118,6 +111,12 @@ export default ( Splide, index, realIndex, slide ) => {
 					}
 				} );
 			}
+
+			// Make sure the slide is shown.
+			applyStyle( slide, { display: '' } );
+
+			// Hold the original styles.
+			this.styles = getAttribute( slide, 'style' ) || '';
 		},
 
 		/**