浏览代码

Bug Fix: Need to update the arrow status after components are mounted.

Naotoshi Fujita 2 年之前
父节点
当前提交
282e6f2f0f

+ 1 - 1
dist/js/splide.cjs.js

@@ -1855,7 +1855,7 @@ function Arrows(Splide2, Components2, options) {
   }
 
   function listen() {
-    on([EVENT_MOVED, EVENT_REFRESH, EVENT_SCROLLED, EVENT_END_INDEX_CHANGED], update);
+    on([EVENT_MOUNTED, EVENT_MOVED, EVENT_REFRESH, EVENT_SCROLLED, EVENT_END_INDEX_CHANGED], update);
     bind(next, "click", apply(go, ">"));
     bind(prev, "click", apply(go, "<"));
   }

+ 1 - 1
dist/js/splide.esm.js

@@ -1850,7 +1850,7 @@ function Arrows(Splide2, Components2, options) {
   }
 
   function listen() {
-    on([EVENT_MOVED, EVENT_REFRESH, EVENT_SCROLLED, EVENT_END_INDEX_CHANGED], update);
+    on([EVENT_MOUNTED, EVENT_MOVED, EVENT_REFRESH, EVENT_SCROLLED, EVENT_END_INDEX_CHANGED], update);
     bind(next, "click", apply(go, ">"));
     bind(prev, "click", apply(go, "<"));
   }

+ 1 - 1
dist/js/splide.js

@@ -1848,7 +1848,7 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
     }
 
     function listen() {
-      on([EVENT_MOVED, EVENT_REFRESH, EVENT_SCROLLED, EVENT_END_INDEX_CHANGED], update);
+      on([EVENT_MOUNTED, EVENT_MOVED, EVENT_REFRESH, EVENT_SCROLLED, EVENT_END_INDEX_CHANGED], update);
       bind(next, "click", apply(go, ">"));
       bind(prev, "click", apply(go, "<"));
     }

文件差异内容过多而无法显示
+ 0 - 0
dist/js/splide.min.js


二进制
dist/js/splide.min.js.gz


文件差异内容过多而无法显示
+ 0 - 0
dist/js/splide.min.js.map


+ 4 - 2
src/js/components/Arrows/Arrows.ts

@@ -2,7 +2,9 @@ import { ALL_ATTRIBUTES, ARIA_CONTROLS, ARIA_LABEL } from '../../constants/attri
 import { CLASS_ARROWS } from '../../constants/classes';
 import {
   EVENT_ARROWS_MOUNTED,
-  EVENT_ARROWS_UPDATED, EVENT_END_INDEX_CHANGED,
+  EVENT_ARROWS_UPDATED,
+  EVENT_END_INDEX_CHANGED,
+  EVENT_MOUNTED,
   EVENT_MOVED,
   EVENT_REFRESH,
   EVENT_SCROLLED,
@@ -147,7 +149,7 @@ export function Arrows( Splide: Splide, Components: Components, options: Options
    * Listens to some events.
    */
   function listen(): void {
-    on( [ EVENT_MOVED, EVENT_REFRESH, EVENT_SCROLLED, EVENT_END_INDEX_CHANGED ], update );
+    on( [ EVENT_MOUNTED, EVENT_MOVED, EVENT_REFRESH, EVENT_SCROLLED, EVENT_END_INDEX_CHANGED ], update );
     bind( next, 'click', apply( go, '>' ) );
     bind( prev, 'click', apply( go, '<' ) );
   }

+ 45 - 8
src/js/test/php/examples/fade.php

@@ -21,10 +21,10 @@ $settings = get_settings();
       var splide = new Splide( '#splide01', {
         width: 800,
         type : 'fade',
-	      rewind: false,
-	      rewindByDrag: false,
-	      autoplay: true,
-	      interval: 1000,
+	      // rewind: false,
+	      // rewindByDrag: false,
+	      // autoplay: true,
+	      // interval: 1000,
         breakpoints: {
           640: {
             width: '100%',
@@ -34,15 +34,52 @@ $settings = get_settings();
 
       splide.mount();
 
-      setTimeout( () => {
-        splide.refresh();
-      }, 1000 );
+      // setTimeout( () => {
+      //   splide.refresh();
+      // }, 1000 );
     } );
   </script>
+
+  <style>
+    /*.splide__list {*/
+    /*  align-items: flex-start;*/
+    /*}*/
+
+    .splide__slide {
+      background: #fff;
+    }
+  </style>
 </head>
 <body>
 
-<?php render(); ?>
+<section id="splide01" class="splide" aria-label="Basic Structure Example">
+  <div class="splide__track">
+    <ul class="splide__list">
+      <li class="splide__slide">
+        <img src="../../assets/images/pics/slide01.jpg">
+        <p>
+          Lorem ipsum dolor sit amet, quod sale at pro, everti iisque tractatos sit ea. Agam alterum sit at. Libris petentium his ne, ne eam detraxit inimicus tractatos. Ius mundi verear ad, at percipit constituto pro, ei possim eirmod quo. Vim laudem aperiam reprehendunt in.
+        </p>
+      </li>
+      <li class="splide__slide">
+        <img src="../../assets/images/pics/slide02.jpg">
+        <p>
+          Has cu etiam veniam recusabo, his animal nostrud fabellas ne. Vis suas qualisque eu, eum ei impedit civibus, an solum definiebas pro.
+        </p>
+      </li>
+      <li class="splide__slide">
+        <img src="../../assets/images/pics/slide03.jpg">
+        <p>
+          Mollis epicuri laboramus ea qui, his ei meis graecis quaestio. Ius ne suscipit prodesset. Qui at delicata euripidis eloquentiam, eius solum volumus eum eu. Usu eu deserunt abhorreant, errem qualisque nec in. Te has labitur virtute hendrerit, cum quaeque oportere mediocritatem in, eos imperdiet intellegam id.
+        </p>
+        <p>
+          Has cu etiam veniam recusabo, his animal nostrud fabellas ne. Vis suas qualisque eu, eum ei impedit civibus, an solum definiebas pro.
+        </p>
+      </li>
+    </ul>
+  </div>
+</section>
+
 
 </body>
 </html>

部分文件因为文件数量过多而无法显示