Bug Fix: Should not update a position of a fade slider.

dist/js/splide.cjs.js

@@ -1188,7 +1188,7 @@ function Move(Splide2, Components2, options) {
   let waiting;
   function mount() {
     if (!Splide2.is(FADE)) {
-      on([EVENT_RESIZED, EVENT_UPDATED, EVENT_REFRESH], reposition, DEFAULT_EVENT_PRIORITY - 1);
+      on([EVENT_MOUNTED, EVENT_RESIZED, EVENT_UPDATED, EVENT_REFRESH], reposition, DEFAULT_EVENT_PRIORITY - 1);
     }
   }
   function reposition() {
@@ -1303,7 +1303,7 @@ function Move(Splide2, Components2, options) {
 function Controller(Splide2, Components2, options) {
   const { on } = EventInterface(Splide2);
   const { Move } = Components2;
-  const { jump, getPosition, getLimit } = Move;
+  const { getPosition, getLimit } = Move;
   const { isEnough, getLength } = Components2.Slides;
   const isLoop = Splide2.is(LOOP);
   let currIndex = options.start || 0;
@@ -1313,8 +1313,7 @@ function Controller(Splide2, Components2, options) {
   let perPage;
   function mount() {
     init();
-    jump(currIndex);
-    on([EVENT_UPDATED, EVENT_REFRESH], init);
+    on([EVENT_UPDATED, EVENT_REFRESH], init, DEFAULT_EVENT_PRIORITY - 2);
     on(EVENT_SCROLLED, reindex, 0);
   }
   function init() {
@@ -1322,7 +1321,6 @@ function Controller(Splide2, Components2, options) {
     perMove = options.perMove;
     perPage = options.perPage;
     currIndex = clamp(currIndex, 0, slideCount - 1);
-    jump(currIndex);
   }
   function reindex() {
     setIndex(Move.toIndex(getPosition()));

dist/js/splide.esm.js

@@ -1184,7 +1184,7 @@ function Move(Splide2, Components2, options) {
   let waiting;
   function mount() {
     if (!Splide2.is(FADE)) {
-      on([EVENT_RESIZED, EVENT_UPDATED, EVENT_REFRESH], reposition, DEFAULT_EVENT_PRIORITY - 1);
+      on([EVENT_MOUNTED, EVENT_RESIZED, EVENT_UPDATED, EVENT_REFRESH], reposition, DEFAULT_EVENT_PRIORITY - 1);
     }
   }
   function reposition() {
@@ -1299,7 +1299,7 @@ function Move(Splide2, Components2, options) {
 function Controller(Splide2, Components2, options) {
   const { on } = EventInterface(Splide2);
   const { Move } = Components2;
-  const { jump, getPosition, getLimit } = Move;
+  const { getPosition, getLimit } = Move;
   const { isEnough, getLength } = Components2.Slides;
   const isLoop = Splide2.is(LOOP);
   let currIndex = options.start || 0;
@@ -1309,8 +1309,7 @@ function Controller(Splide2, Components2, options) {
   let perPage;
   function mount() {
     init();
-    jump(currIndex);
-    on([EVENT_UPDATED, EVENT_REFRESH], init);
+    on([EVENT_UPDATED, EVENT_REFRESH], init, DEFAULT_EVENT_PRIORITY - 2);
     on(EVENT_SCROLLED, reindex, 0);
   }
   function init() {
@@ -1318,7 +1317,6 @@ function Controller(Splide2, Components2, options) {
     perMove = options.perMove;
     perPage = options.perPage;
     currIndex = clamp(currIndex, 0, slideCount - 1);
-    jump(currIndex);
   }
   function reindex() {
     setIndex(Move.toIndex(getPosition()));

dist/js/splide.js

@@ -1412,7 +1412,7 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
 
     function mount() {
       if (!Splide2.is(FADE)) {
-        on([EVENT_RESIZED, EVENT_UPDATED, EVENT_REFRESH], reposition, DEFAULT_EVENT_PRIORITY - 1);
+        on([EVENT_MOUNTED, EVENT_RESIZED, EVENT_UPDATED, EVENT_REFRESH], reposition, DEFAULT_EVENT_PRIORITY - 1);
       }
     }
 
@@ -1551,8 +1551,7 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
         on = _EventInterface7.on;
 
     var Move = Components2.Move;
-    var jump = Move.jump,
-        getPosition = Move.getPosition,
+    var getPosition = Move.getPosition,
         getLimit = Move.getLimit;
     var _Components2$Slides = Components2.Slides,
         isEnough = _Components2$Slides.isEnough,
@@ -1566,8 +1565,7 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
 
     function mount() {
       init();
-      jump(currIndex);
-      on([EVENT_UPDATED, EVENT_REFRESH], init);
+      on([EVENT_UPDATED, EVENT_REFRESH], init, DEFAULT_EVENT_PRIORITY - 2);
       on(EVENT_SCROLLED, reindex, 0);
     }
 
@@ -1576,7 +1574,6 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
       perMove = options.perMove;
       perPage = options.perPage;
       currIndex = clamp(currIndex, 0, slideCount - 1);
-      jump(currIndex);
     }
 
     function reindex() {

dist/types/components/Controller/Controller.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Controller.d.ts","sourceRoot":"","sources":["Controller.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAClD,OAAO,EAAE,WAAW,EAAE,aAAa,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAI9E;;;;GAIG;AACH,MAAM,WAAW,mBAAoB,SAAQ,aAAa;IACxD,EAAE,CAAE,OAAO,EAAE,MAAM,GAAG,MAAM,EAAE,cAAc,CAAC,EAAE,OAAO,EAAE,QAAQ,CAAC,EAAE,WAAW,GAAI,IAAI,CAAC;IACvF,OAAO,CAAE,WAAW,CAAC,EAAE,OAAO,GAAI,MAAM,CAAC;IACzC,OAAO,CAAE,WAAW,CAAC,EAAE,OAAO,GAAI,MAAM,CAAC;IACzC,MAAM,IAAI,MAAM,CAAC;IACjB,QAAQ,CAAE,KAAK,EAAE,MAAM,GAAI,IAAI,CAAC;IAChC,QAAQ,CAAE,IAAI,CAAC,EAAE,OAAO,GAAI,MAAM,CAAC;IACnC,OAAO,CAAE,IAAI,EAAE,MAAM,GAAI,MAAM,CAAC;IAChC,MAAM,CAAE,KAAK,EAAE,MAAM,GAAI,MAAM,CAAC;IAChC,QAAQ,IAAI,OAAO,CAAC;CACrB;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,UAAU,CAAE,MAAM,EAAE,MAAM,EAAE,UAAU,EAAE,UAAU,EAAE,OAAO,EAAE,OAAO,GAAI,mBAAmB,CAsS1G"}
+{"version":3,"file":"Controller.d.ts","sourceRoot":"","sources":["Controller.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAClD,OAAO,EAAE,WAAW,EAAE,aAAa,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAI9E;;;;GAIG;AACH,MAAM,WAAW,mBAAoB,SAAQ,aAAa;IACxD,EAAE,CAAE,OAAO,EAAE,MAAM,GAAG,MAAM,EAAE,cAAc,CAAC,EAAE,OAAO,EAAE,QAAQ,CAAC,EAAE,WAAW,GAAI,IAAI,CAAC;IACvF,OAAO,CAAE,WAAW,CAAC,EAAE,OAAO,GAAI,MAAM,CAAC;IACzC,OAAO,CAAE,WAAW,CAAC,EAAE,OAAO,GAAI,MAAM,CAAC;IACzC,MAAM,IAAI,MAAM,CAAC;IACjB,QAAQ,CAAE,KAAK,EAAE,MAAM,GAAI,IAAI,CAAC;IAChC,QAAQ,CAAE,IAAI,CAAC,EAAE,OAAO,GAAI,MAAM,CAAC;IACnC,OAAO,CAAE,IAAI,EAAE,MAAM,GAAI,MAAM,CAAC;IAChC,MAAM,CAAE,KAAK,EAAE,MAAM,GAAI,MAAM,CAAC;IAChC,QAAQ,IAAI,OAAO,CAAC;CACrB;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,UAAU,CAAE,MAAM,EAAE,MAAM,EAAE,UAAU,EAAE,UAAU,EAAE,OAAO,EAAE,OAAO,GAAI,mBAAmB,CAqS1G"}

dist/types/components/Move/Move.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Move.d.ts","sourceRoot":"","sources":["Move.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAClD,OAAO,EAAE,WAAW,EAAE,aAAa,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAI9E;;;;GAIG;AACH,MAAM,WAAW,aAAc,SAAQ,aAAa;IAClD,IAAI,CAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,WAAW,GAAI,IAAI,CAAC;IAChF,IAAI,CAAE,KAAK,EAAE,MAAM,GAAI,IAAI,CAAC;IAC5B,SAAS,CAAE,QAAQ,EAAE,MAAM,GAAI,IAAI,CAAC;IACpC,MAAM,IAAI,IAAI,CAAC;IACf,OAAO,CAAE,QAAQ,EAAE,MAAM,GAAI,MAAM,CAAC;IACpC,UAAU,CAAE,KAAK,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,OAAO,GAAI,MAAM,CAAC;IACxD,WAAW,IAAI,MAAM,CAAC;IACtB,QAAQ,CAAE,GAAG,EAAE,OAAO,GAAI,MAAM,CAAC;IACjC,MAAM,IAAI,OAAO,CAAC;IAClB,aAAa,CAAE,GAAG,CAAC,EAAE,OAAO,GAAG,SAAS,EAAE,QAAQ,CAAC,EAAE,MAAM,GAAI,OAAO,CAAC;CACxE;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,IAAI,CAAE,MAAM,EAAE,MAAM,EAAE,UAAU,EAAE,UAAU,EAAE,OAAO,EAAE,OAAO,GAAI,aAAa,CA6O9F"}
+{"version":3,"file":"Move.d.ts","sourceRoot":"","sources":["Move.ts"],"names":[],"mappings":"AAYA,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAClD,OAAO,EAAE,WAAW,EAAE,aAAa,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAI9E;;;;GAIG;AACH,MAAM,WAAW,aAAc,SAAQ,aAAa;IAClD,IAAI,CAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,WAAW,GAAI,IAAI,CAAC;IAChF,IAAI,CAAE,KAAK,EAAE,MAAM,GAAI,IAAI,CAAC;IAC5B,SAAS,CAAE,QAAQ,EAAE,MAAM,GAAI,IAAI,CAAC;IACpC,MAAM,IAAI,IAAI,CAAC;IACf,OAAO,CAAE,QAAQ,EAAE,MAAM,GAAI,MAAM,CAAC;IACpC,UAAU,CAAE,KAAK,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,OAAO,GAAI,MAAM,CAAC;IACxD,WAAW,IAAI,MAAM,CAAC;IACtB,QAAQ,CAAE,GAAG,EAAE,OAAO,GAAI,MAAM,CAAC;IACjC,MAAM,IAAI,OAAO,CAAC;IAClB,aAAa,CAAE,GAAG,CAAC,EAAE,OAAO,GAAG,SAAS,EAAE,QAAQ,CAAC,EAAE,MAAM,GAAI,OAAO,CAAC;CACxE;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,IAAI,CAAE,MAAM,EAAE,MAAM,EAAE,UAAU,EAAE,UAAU,EAAE,OAAO,EAAE,OAAO,GAAI,aAAa,CA6O9F"}

src/js/components/Controller/Controller.ts

@@ -1,4 +1,5 @@
 import { EVENT_REFRESH, EVENT_SCROLLED, EVENT_UPDATED } from '../../constants/events';
+import { DEFAULT_EVENT_PRIORITY } from '../../constants/priority';
 import { LOOP, SLIDE } from '../../constants/types';
 import { EventInterface } from '../../constructors';
 import { Splide } from '../../core/Splide/Splide';
@@ -37,7 +38,7 @@ export interface ControllerComponent extends BaseComponent {
 export function Controller( Splide: Splide, Components: Components, options: Options ): ControllerComponent {
   const { on } = EventInterface( Splide );
   const { Move } = Components;
-  const { jump, getPosition, getLimit } = Move;
+  const { getPosition, getLimit } = Move;
   const { isEnough, getLength } = Components.Slides;
   const isLoop = Splide.is( LOOP );
 
@@ -71,8 +72,8 @@ export function Controller( Splide: Splide, Components: Components, options: Opt
    */
   function mount(): void {
     init();
-    jump( currIndex );
-    on( [ EVENT_UPDATED, EVENT_REFRESH ], init );
+    // jump( currIndex );
+    on( [ EVENT_UPDATED, EVENT_REFRESH ], init, DEFAULT_EVENT_PRIORITY - 2 );
     on( EVENT_SCROLLED, reindex, 0 );
   }
 
@@ -85,7 +86,6 @@ export function Controller( Splide: Splide, Components: Components, options: Opt
     perMove    = options.perMove;
     perPage    = options.perPage;
     currIndex  = clamp( currIndex, 0, slideCount - 1 );
-    jump( currIndex );
   }
 
   /**

src/js/components/Move/Move.ts

@@ -1,4 +1,11 @@
-import { EVENT_MOVE, EVENT_MOVED, EVENT_REFRESH, EVENT_RESIZED, EVENT_UPDATED } from '../../constants/events';
+import {
+  EVENT_MOUNTED,
+  EVENT_MOVE,
+  EVENT_MOVED,
+  EVENT_REFRESH,
+  EVENT_RESIZED,
+  EVENT_UPDATED,
+} from '../../constants/events';
 import { DEFAULT_EVENT_PRIORITY } from '../../constants/priority';
 import { IDLE, MOVING } from '../../constants/states';
 import { FADE, LOOP, SLIDE } from '../../constants/types';
@@ -53,7 +60,7 @@ export function Move( Splide: Splide, Components: Components, options: Options )
    */
   function mount(): void {
     if ( ! Splide.is( FADE ) ) {
-      on( [ EVENT_RESIZED, EVENT_UPDATED, EVENT_REFRESH ], reposition, DEFAULT_EVENT_PRIORITY - 1 );
+      on( [ EVENT_MOUNTED, EVENT_RESIZED, EVENT_UPDATED, EVENT_REFRESH ], reposition, DEFAULT_EVENT_PRIORITY - 1 );
     }
   }
 

src/js/test/php/examples/autoplay.php

@@ -19,16 +19,33 @@ $settings = get_settings();
   <script>
     document.addEventListener( 'DOMContentLoaded', function () {
       var splide = new Splide( '#splide01', {
-        autoplay: true,
-        pauseOnHover: false,
+        autoplay     : true,
+        pauseOnHover : false,
+        resetProgress: false,
       } );
 
-      splide.on( 'autoplay:play', () => {
-        console.log( 'play' );
+      var toggleButton = document.querySelector( '.splide__toggle' );
+
+      splide.on( 'autoplay:play', function () {
+        toggleButton.classList.add( 'is-active' );
+        toggleButton.setAttribute( 'aria-label', 'Pause autoplay' );
+        toggleButton.textContent = 'Pause';
       } );
 
-      splide.on( 'autoplay:pause', () => {
-        console.log( 'paused' );
+      splide.on( 'autoplay:pause', function () {
+        toggleButton.classList.remove( 'is-active' );
+        toggleButton.setAttribute( 'aria-label', 'Start autoplay' );
+        toggleButton.textContent = 'Play';
+      } );
+
+      toggleButton.addEventListener( 'click', function () {
+        var Autoplay = splide.Components.Autoplay;
+
+        if ( Autoplay.isPaused() ) {
+          Autoplay.play();
+        } else {
+          Autoplay.pause();
+        }
       } );
 
       splide.mount();
@@ -54,5 +71,9 @@ $settings = get_settings();
   </div>
 </div>
 
+<button class="splide__toggle is-active" type="button">
+  Pause
+</button>
+
 </body>
 </html>

src/js/test/php/examples/default.php

@@ -23,6 +23,7 @@ $settings = get_settings();
         perPage: 1,
         gap    : '1.5rem',
         height : 400,
+        start  : 2,
         // focus  : 'center',
         // cover  : true,
         // speed: 1000,

src/js/test/php/examples/fade.php

@@ -10,7 +10,7 @@ $settings = get_settings();
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width,initial-scale=1">
-  <title>Default</title>
+  <title>Fade</title>
 
   <link rel="stylesheet" href="../../../../../dist/css/themes/splide-<?php echo $settings['theme'] ?>.min.css">
   <link rel="stylesheet" href="../../assets/css/styles.css">
@@ -21,6 +21,11 @@ $settings = get_settings();
       var splide = new Splide( '#splide01', {
         width: 800,
         type : 'fade',
+        breakpoints: {
+          640: {
+            width: '100%',
+          },
+        },
       } );
 
       splide.mount();