Needs to update arrows while moving.

Author: NaotoshiFujita

dist/js/splide-extension-auto-scroll.cjs.js

@@ -1,6 +1,6 @@
 /*!
  * @splidejs/splide-extension-auto-scroll
- * Version  : 0.5.2
+ * Version  : 0.5.3
  * License  : MIT
  * Copyright: 2022 Naotoshi Fujita
  */
@@ -246,6 +246,22 @@ function RequestInterval(interval, onInterval, onUpdate, limit) {
     isPaused: isPaused
   };
 }
+
+function Throttle(func, duration) {
+  var interval;
+
+  function throttled() {
+    if (!interval) {
+      interval = RequestInterval(duration || 0, function () {
+        func();
+        interval = null;
+      }, null, 1);
+      interval.start();
+    }
+  }
+
+  return throttled;
+}
 var CLASS_ACTIVE = "is-active";
 
 var SLIDE = "slide";
@@ -366,6 +382,7 @@ function AutoScroll(Splide2, Components2, options) {
   const { toggle } = Components2.Elements;
   const { Live } = Components2;
   const { root } = Splide2;
+  const throttledUpdateArrows = Throttle(Components2.Arrows.update, 500);
   let autoScrollOptions = {};
   let interval;
   let stopped;
@@ -477,9 +494,10 @@ function AutoScroll(Splide2, Components2, options) {
     } else {
       pause(false);
       if (autoScrollOptions.rewind) {
-        Splide2.go(0);
+        Splide2.go(autoScrollOptions.speed > 0 ? 0 : Components2.Controller.getEnd());
       }
     }
+    throttledUpdateArrows();
   }
   function computeDestination(position) {
     const speed = autoScrollOptions.speed || 1;

dist/js/splide-extension-auto-scroll.esm.js

@@ -1,6 +1,6 @@
 /*!
  * @splidejs/splide-extension-auto-scroll
- * Version  : 0.5.2
+ * Version  : 0.5.3
  * License  : MIT
  * Copyright: 2022 Naotoshi Fujita
  */
@@ -242,6 +242,22 @@ function RequestInterval(interval, onInterval, onUpdate, limit) {
     isPaused: isPaused
   };
 }
+
+function Throttle(func, duration) {
+  var interval;
+
+  function throttled() {
+    if (!interval) {
+      interval = RequestInterval(duration || 0, function () {
+        func();
+        interval = null;
+      }, null, 1);
+      interval.start();
+    }
+  }
+
+  return throttled;
+}
 var CLASS_ACTIVE = "is-active";
 
 var SLIDE = "slide";
@@ -362,6 +378,7 @@ function AutoScroll(Splide2, Components2, options) {
   const { toggle } = Components2.Elements;
   const { Live } = Components2;
   const { root } = Splide2;
+  const throttledUpdateArrows = Throttle(Components2.Arrows.update, 500);
   let autoScrollOptions = {};
   let interval;
   let stopped;
@@ -473,9 +490,10 @@ function AutoScroll(Splide2, Components2, options) {
     } else {
       pause(false);
       if (autoScrollOptions.rewind) {
-        Splide2.go(0);
+        Splide2.go(autoScrollOptions.speed > 0 ? 0 : Components2.Controller.getEnd());
       }
     }
+    throttledUpdateArrows();
   }
   function computeDestination(position) {
     const speed = autoScrollOptions.speed || 1;

dist/js/splide-extension-auto-scroll.js.map

@@ -1,6 +1,6 @@
 {
   "name": "@splidejs/splide-extension-auto-scroll",
-  "version": "0.5.2",
+  "version": "0.5.3",
   "description": "The Splide extension for continuously scrolling the slider.",
   "author": "Naotoshi Fujita",
   "license": "MIT",
@@ -30,7 +30,7 @@
     "@babel/preset-env": "^7.18.10",
     "@rollup/plugin-babel": "^5.3.1",
     "@rollup/plugin-node-resolve": "^13.3.0",
-    "@splidejs/splide": "^4.0.11",
+    "@splidejs/splide": "^4.0.17",
     "@types/jest": "^29.0.0",
     "@types/node": "^18.7.14",
     "@typescript-eslint/eslint-plugin": "^5.36.1",

dist/js/splide-extension-auto-scroll.min.js

@@ -12,6 +12,7 @@ import {
   FADE,
   Options,
   RequestInterval,
+  Throttle,
   RequestIntervalInterface,
   SLIDE,
   Splide,
@@ -66,6 +67,11 @@ export function AutoScroll( Splide: Splide, Components: Components, options: Opt
   const { Live } = Components;
   const { root } = Splide;
 
+  /**
+   * The throttled function to update arrows.
+   */
+  const throttledUpdateArrows = Throttle( Components.Arrows.update, 500 );
+
   /**
    * Keeps the latest options.
    */
@@ -260,9 +266,11 @@ export function AutoScroll( Splide: Splide, Components: Components, options: Opt
       pause( false );
 
       if ( autoScrollOptions.rewind ) {
-        Splide.go( 0 );
+        Splide.go( autoScrollOptions.speed > 0 ? 0 : Components.Controller.getEnd() );
       }
     }
+
+    throttledUpdateArrows();
   }
 
   /**

dist/types/extensions/AutoScroll/AutoScroll.d.ts.map

@@ -16,11 +16,12 @@
 				height : 300,
 				gap    : '1rem',
         drag   : 'free',
-        type   : 'loop',
+        // type   : 'loop',
+        perPage: 3,
         autoScroll: {
           useToggleButton: true,
           // autoStart: false,
-          // speed: -3,
+          speed: 1,
           rewind: true,
         },
         reducedMotion: {
@@ -68,7 +69,7 @@
 	<div class="splide__track">
 		<ul class="splide__list">
 			<?php
-			for ( $i = 0; $i < 3; $i++ ) {
+			for ( $i = 0; $i < 9; $i++ ) {
 				echo '<li class="splide__slide">' . PHP_EOL;
 				echo $i + 1;
 				echo '</li>' . PHP_EOL;