Add `data-splide-interval` to override the interval duration for the specific slide.

dist/js/splide-renderer.min.js

@@ -1,6 +1,6 @@
 /*!
  * Splide.js
- * Version  : 3.4.2
+ * Version  : 3.5.0
  * License  : MIT
  * Copyright: 2021 Naotoshi Fujita
  */

dist/js/splide.cjs.js

@@ -1,6 +1,6 @@
 /*!
  * Splide.js
- * Version  : 3.4.2
+ * Version  : 3.5.0
  * License  : MIT
  * Copyright: 2021 Naotoshi Fujita
  */
@@ -501,6 +501,9 @@ function RequestInterval(interval, onInterval, onUpdate, limit) {
     id = 0;
     paused = true;
   }
+  function set(time) {
+    interval = time;
+  }
   function isPaused() {
     return paused;
   }
@@ -509,6 +512,7 @@ function RequestInterval(interval, onInterval, onUpdate, limit) {
     rewind,
     pause,
     cancel,
+    set,
     isPaused
   };
 }
@@ -1538,11 +1542,13 @@ function Arrows(Splide2, Components2, options) {
   };
 }
 
+const INTERVAL_DATA_ATTRIBUTE = `${DATA_ATTRIBUTE}-interval`;
+
 function Autoplay(Splide2, Components2, options) {
   const { on, bind, emit } = EventInterface(Splide2);
-  const { Elements } = Components2;
   const interval = RequestInterval(options.interval, Splide2.go.bind(Splide2, ">"), update);
   const { isPaused } = interval;
+  const { Elements } = Components2;
   let hovered;
   let focused;
   let paused;
@@ -1581,6 +1587,7 @@ function Autoplay(Splide2, Components2, options) {
       });
     }
     on([EVENT_MOVE, EVENT_SCROLL, EVENT_REFRESH], interval.rewind);
+    on(EVENT_MOVE, updateInterval);
   }
   function play() {
     if (isPaused() && Components2.Slides.isEnough()) {
@@ -1607,11 +1614,13 @@ function Autoplay(Splide2, Components2, options) {
   }
   function update(rate) {
     const { bar } = Elements;
-    if (bar) {
-      style(bar, "width", `${rate * 100}%`);
-    }
+    bar && style(bar, "width", `${rate * 100}%`);
     emit(EVENT_AUTOPLAY_PLAYING, rate);
   }
+  function updateInterval() {
+    const Slide = Components2.Slides.getAt(Splide2.index);
+    interval.set(Slide && +getAttribute(Slide.slide, INTERVAL_DATA_ATTRIBUTE) || options.interval);
+  }
   return {
     mount,
     destroy: interval.cancel,
@@ -1816,6 +1825,7 @@ function Drag(Splide2, Components2, options) {
   function onPointerUp(e) {
     unbind(target, POINTER_MOVE_EVENTS, onPointerMove);
     unbind(target, POINTER_UP_EVENTS, onPointerUp);
+    const { index } = Splide2;
     if (lastEvent) {
       if (dragging || e.cancelable && isSliderDirection()) {
         const velocity = computeVelocity(e);
@@ -1823,7 +1833,7 @@ function Drag(Splide2, Components2, options) {
         if (isFree) {
           Controller.scroll(destination);
         } else if (Splide2.is(FADE)) {
-          Controller.go(Splide2.index + orient(sign(velocity)));
+          Controller.go(index + orient(sign(velocity)));
         } else {
           Controller.go(Controller.toDest(destination), true);
         }
@@ -1831,8 +1841,8 @@ function Drag(Splide2, Components2, options) {
       }
       emit(EVENT_DRAGGED);
     } else {
-      if (!isFree) {
-        Controller.go(Splide2.index, true);
+      if (!isFree && getPosition() !== Move.toPosition(index)) {
+        Controller.go(index, true);
       }
     }
     dragging = false;

dist/js/splide.esm.js

@@ -1,6 +1,6 @@
 /*!
  * Splide.js
- * Version  : 3.4.2
+ * Version  : 3.5.0
  * License  : MIT
  * Copyright: 2021 Naotoshi Fujita
  */
@@ -497,6 +497,9 @@ function RequestInterval(interval, onInterval, onUpdate, limit) {
     id = 0;
     paused = true;
   }
+  function set(time) {
+    interval = time;
+  }
   function isPaused() {
     return paused;
   }
@@ -505,6 +508,7 @@ function RequestInterval(interval, onInterval, onUpdate, limit) {
     rewind,
     pause,
     cancel,
+    set,
     isPaused
   };
 }
@@ -1534,11 +1538,13 @@ function Arrows(Splide2, Components2, options) {
   };
 }
 
+const INTERVAL_DATA_ATTRIBUTE = `${DATA_ATTRIBUTE}-interval`;
+
 function Autoplay(Splide2, Components2, options) {
   const { on, bind, emit } = EventInterface(Splide2);
-  const { Elements } = Components2;
   const interval = RequestInterval(options.interval, Splide2.go.bind(Splide2, ">"), update);
   const { isPaused } = interval;
+  const { Elements } = Components2;
   let hovered;
   let focused;
   let paused;
@@ -1577,6 +1583,7 @@ function Autoplay(Splide2, Components2, options) {
       });
     }
     on([EVENT_MOVE, EVENT_SCROLL, EVENT_REFRESH], interval.rewind);
+    on(EVENT_MOVE, updateInterval);
   }
   function play() {
     if (isPaused() && Components2.Slides.isEnough()) {
@@ -1603,11 +1610,13 @@ function Autoplay(Splide2, Components2, options) {
   }
   function update(rate) {
     const { bar } = Elements;
-    if (bar) {
-      style(bar, "width", `${rate * 100}%`);
-    }
+    bar && style(bar, "width", `${rate * 100}%`);
     emit(EVENT_AUTOPLAY_PLAYING, rate);
   }
+  function updateInterval() {
+    const Slide = Components2.Slides.getAt(Splide2.index);
+    interval.set(Slide && +getAttribute(Slide.slide, INTERVAL_DATA_ATTRIBUTE) || options.interval);
+  }
   return {
     mount,
     destroy: interval.cancel,
@@ -1812,6 +1821,7 @@ function Drag(Splide2, Components2, options) {
   function onPointerUp(e) {
     unbind(target, POINTER_MOVE_EVENTS, onPointerMove);
     unbind(target, POINTER_UP_EVENTS, onPointerUp);
+    const { index } = Splide2;
     if (lastEvent) {
       if (dragging || e.cancelable && isSliderDirection()) {
         const velocity = computeVelocity(e);
@@ -1819,7 +1829,7 @@ function Drag(Splide2, Components2, options) {
         if (isFree) {
           Controller.scroll(destination);
         } else if (Splide2.is(FADE)) {
-          Controller.go(Splide2.index + orient(sign(velocity)));
+          Controller.go(index + orient(sign(velocity)));
         } else {
           Controller.go(Controller.toDest(destination), true);
         }
@@ -1827,8 +1837,8 @@ function Drag(Splide2, Components2, options) {
       }
       emit(EVENT_DRAGGED);
     } else {
-      if (!isFree) {
-        Controller.go(Splide2.index, true);
+      if (!isFree && getPosition() !== Move.toPosition(index)) {
+        Controller.go(index, true);
       }
     }
     dragging = false;

dist/js/splide.js

@@ -4,7 +4,7 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
 
 /*!
  * Splide.js
- * Version  : 3.4.2
+ * Version  : 3.5.0
  * License  : MIT
  * Copyright: 2021 Naotoshi Fujita
  */
@@ -566,6 +566,10 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
       paused = true;
     }
 
+    function set(time) {
+      interval = time;
+    }
+
     function isPaused() {
       return paused;
     }
@@ -575,6 +579,7 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
       rewind: rewind,
       pause: pause,
       cancel: cancel,
+      set: set,
       isPaused: isPaused
     };
   }
@@ -1834,15 +1839,17 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
     };
   }
 
+  var INTERVAL_DATA_ATTRIBUTE = DATA_ATTRIBUTE + "-interval";
+
   function Autoplay(Splide2, Components2, options) {
     var _EventInterface9 = EventInterface(Splide2),
         on = _EventInterface9.on,
         bind = _EventInterface9.bind,
         emit = _EventInterface9.emit;
 
-    var Elements = Components2.Elements;
     var interval = RequestInterval(options.interval, Splide2.go.bind(Splide2, ">"), update);
     var isPaused = interval.isPaused;
+    var Elements = Components2.Elements;
     var hovered;
     var focused;
     var paused;
@@ -1890,6 +1897,7 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
       }
 
       on([EVENT_MOVE, EVENT_SCROLL, EVENT_REFRESH], interval.rewind);
+      on(EVENT_MOVE, updateInterval);
     }
 
     function play() {
@@ -1925,14 +1933,15 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
 
     function update(rate) {
       var bar = Elements.bar;
-
-      if (bar) {
-        style(bar, "width", rate * 100 + "%");
-      }
-
+      bar && style(bar, "width", rate * 100 + "%");
       emit(EVENT_AUTOPLAY_PLAYING, rate);
     }
 
+    function updateInterval() {
+      var Slide = Components2.Slides.getAt(Splide2.index);
+      interval.set(Slide && +getAttribute(Slide.slide, INTERVAL_DATA_ATTRIBUTE) || options.interval);
+    }
+
     return {
       mount: mount,
       destroy: interval.cancel,
@@ -2191,6 +2200,7 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
     function onPointerUp(e) {
       unbind(target, POINTER_MOVE_EVENTS, onPointerMove);
       unbind(target, POINTER_UP_EVENTS, onPointerUp);
+      var index = Splide2.index;
 
       if (lastEvent) {
         if (dragging || e.cancelable && isSliderDirection()) {
@@ -2200,7 +2210,7 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
           if (isFree) {
             Controller.scroll(destination);
           } else if (Splide2.is(FADE)) {
-            Controller.go(Splide2.index + orient(sign(velocity)));
+            Controller.go(index + orient(sign(velocity)));
           } else {
             Controller.go(Controller.toDest(destination), true);
           }
@@ -2210,8 +2220,8 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
 
         emit(EVENT_DRAGGED);
       } else {
-        if (!isFree) {
-          Controller.go(Splide2.index, true);
+        if (!isFree && getPosition() !== Move.toPosition(index)) {
+          Controller.go(index, true);
         }
       }
 

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

@@ -1 +1 @@
-{"version":3,"file":"Autoplay.d.ts","sourceRoot":"","sources":["Autoplay.ts"],"names":[],"mappings":"AAUA,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAClD,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAIjE;;;;GAIG;AACH,MAAM,WAAW,iBAAkB,SAAQ,aAAa;IACtD,IAAI,IAAI,IAAI,CAAC;IACb,KAAK,IAAI,IAAI,CAAC;IACd,QAAQ,IAAI,OAAO,CAAC;CACrB;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,QAAQ,CAAE,MAAM,EAAE,MAAM,EAAE,UAAU,EAAE,UAAU,EAAE,OAAO,EAAE,OAAO,GAAI,iBAAiB,CA2ItG"}
+{"version":3,"file":"Autoplay.d.ts","sourceRoot":"","sources":["Autoplay.ts"],"names":[],"mappings":"AAUA,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAClD,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAKjE;;;;GAIG;AACH,MAAM,WAAW,iBAAkB,SAAQ,aAAa;IACtD,IAAI,IAAI,IAAI,CAAC;IACb,KAAK,IAAI,IAAI,CAAC;IACd,QAAQ,IAAI,OAAO,CAAC;CACrB;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,QAAQ,CAAE,MAAM,EAAE,MAAM,EAAE,UAAU,EAAE,UAAU,EAAE,OAAO,EAAE,OAAO,GAAI,iBAAiB,CAgJtG"}

dist/types/components/Autoplay/constants.d.ts

@@ -0,0 +1,7 @@
+/**
+ * The data attribute for the autoplay interval duration.
+ *
+ * @since 3.5.0
+ */
+export declare const INTERVAL_DATA_ATTRIBUTE: string;
+//# sourceMappingURL=../../../../src/js/components/Autoplay/constants.d.ts.map

dist/types/components/Autoplay/constants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["constants.ts"],"names":[],"mappings":"AAGA;;;;GAIG;AACH,eAAO,MAAM,uBAAuB,QAAiC,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"Drag.d.ts","sourceRoot":"","sources":["Drag.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAClD,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAKjE;;;;GAIG;AACH,MAAM,WAAW,aAAc,SAAQ,aAAa;IAClD,OAAO,CAAE,QAAQ,EAAE,OAAO,GAAI,IAAI,CAAC;IACnC,UAAU,IAAI,OAAO,CAAC;CACvB;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,IAAI,CAAE,MAAM,EAAE,MAAM,EAAE,UAAU,EAAE,UAAU,EAAE,OAAO,EAAE,OAAO,GAAI,aAAa,CAyU9F"}
+{"version":3,"file":"Drag.d.ts","sourceRoot":"","sources":["Drag.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAClD,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAKjE;;;;GAIG;AACH,MAAM,WAAW,aAAc,SAAQ,aAAa;IAClD,OAAO,CAAE,QAAQ,EAAE,OAAO,GAAI,IAAI,CAAC;IACnC,UAAU,IAAI,OAAO,CAAC;CACvB;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,IAAI,CAAE,MAAM,EAAE,MAAM,EAAE,UAAU,EAAE,UAAU,EAAE,OAAO,EAAE,OAAO,GAAI,aAAa,CA2U9F"}

dist/types/constructors/RequestInterval/RequestInterval.d.ts

@@ -8,6 +8,7 @@ export interface RequestIntervalInterface {
     pause(): void;
     rewind(): void;
     cancel(): void;
+    set(interval: number): void;
     isPaused(): boolean;
 }
 /**

dist/types/constructors/RequestInterval/RequestInterval.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RequestInterval.d.ts","sourceRoot":"","sources":["RequestInterval.ts"],"names":[],"mappings":"AAGA;;;;GAIG;AACH,MAAM,WAAW,wBAAwB;IACvC,KAAK,CAAE,MAAM,CAAC,EAAE,OAAO,GAAI,IAAI,CAAC;IAChC,KAAK,IAAI,IAAI,CAAC;IACd,MAAM,IAAI,IAAI,CAAC;IACf,MAAM,IAAI,IAAI,CAAC;IACf,QAAQ,IAAI,OAAO,CAAC;CACrB;AAED;;;;;;;;;GASG;AACH,wBAAgB,eAAe,CAC7B,QAAQ,EAAE,MAAM,EAChB,UAAU,EAAE,MAAM,IAAI,EACtB,QAAQ,CAAC,EAAE,CAAE,IAAI,EAAE,MAAM,KAAM,IAAI,EACnC,KAAK,CAAC,EAAE,MAAM,GACb,wBAAwB,CAmH1B"}
+{"version":3,"file":"RequestInterval.d.ts","sourceRoot":"","sources":["RequestInterval.ts"],"names":[],"mappings":"AAGA;;;;GAIG;AACH,MAAM,WAAW,wBAAwB;IACvC,KAAK,CAAE,MAAM,CAAC,EAAE,OAAO,GAAI,IAAI,CAAC;IAChC,KAAK,IAAI,IAAI,CAAC;IACd,MAAM,IAAI,IAAI,CAAC;IACf,MAAM,IAAI,IAAI,CAAC;IACf,GAAG,CAAE,QAAQ,EAAE,MAAM,GAAI,IAAI,CAAC;IAC9B,QAAQ,IAAI,OAAO,CAAC;CACrB;AAED;;;;;;;;;GASG;AACH,wBAAgB,eAAe,CAC7B,QAAQ,EAAE,MAAM,EAChB,UAAU,EAAE,MAAM,IAAI,EACtB,QAAQ,CAAC,EAAE,CAAE,IAAI,EAAE,MAAM,KAAM,IAAI,EACnC,KAAK,CAAC,EAAE,MAAM,GACb,wBAAwB,CA6H1B"}

dist/types/test/fixtures/html.d.ts

@@ -7,6 +7,7 @@ export interface BuildHtmlArgs {
     src?: boolean | string;
     dataSrc?: boolean | string;
     dataSrcset?: boolean | string;
+    dataInterval?: number[];
     json?: string;
 }
 /**
@@ -20,14 +21,15 @@ export declare function buildHtml(args?: BuildHtmlArgs): string;
 /**
  * Generates slides.
  *
- * @param length     - A number of slides.
- * @param src        - Whether to add src attribute or not.
- * @param dataSrc    - Whether to add data-splide-lazy attribute or not.
- * @param dataSrcset - Whether to add data-splide-lazy-srcset attribute or not.
+ * @param length       - A number of slides.
+ * @param src          - Whether to add src attribute or not.
+ * @param dataSrc      - Whether to add data-splide-lazy attribute or not.
+ * @param dataSrcset   - Whether to add data-splide-lazy-srcset attribute or not.
+ * @param dataInterval - An array with autoplay interval.
  *
  * @return A built HTML.
  */
-export declare function generateSlides(length: number, src?: boolean | string, dataSrc?: boolean | string, dataSrcset?: boolean | string): string;
+export declare function generateSlides(length: number, src?: boolean | string, dataSrc?: boolean | string, dataSrcset?: boolean | string, dataInterval?: number[]): string;
 export declare const HTML_ARROWS = "\n<div class=\"splide__arrows\">\n  <button class=\"splide__arrow splide__arrow--prev\">\n    Prev\n  </button>\n\n  <button class=\"splide__arrow splide__arrow--next\">\n    Next\n  </button>\n</div>\n";
 export declare const HTML_PROGRESS = "\n<div class=\"splide__progress\">\n  <div class=\"splide__progress__bar\">\n  </div>\n</div>\n";
 export declare const HTML_AUTOPLAY = "\n<div class=\"splide__autoplay\">\n  <button class=\"splide__play\">\n    Play\n  </button>\n\n  <button class=\"splide__pause\">\n    Pause\n  </button>\n</div>\n";

dist/types/test/fixtures/html.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"html.d.ts","sourceRoot":"","sources":["html.ts"],"names":[],"mappings":"AAIA,MAAM,WAAW,aAAa;IAC5B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,GAAG,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IACvB,OAAO,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAC3B,UAAU,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAC9B,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED;;;;;;GAMG;AACH,wBAAgB,SAAS,CAAE,IAAI,GAAE,aAAkB,GAAI,MAAM,CA0B5D;AAED;;;;;;;;;GASG;AACH,wBAAgB,cAAc,CAC5B,MAAM,EAAE,MAAM,EACd,GAAG,CAAC,EAAE,OAAO,GAAG,MAAM,EACtB,OAAO,CAAC,EAAE,OAAO,GAAG,MAAM,EAC1B,UAAU,CAAC,EAAE,OAAO,GAAG,MAAM,GAC5B,MAAM,CAwBR;AAED,eAAO,MAAM,WAAW,+MAUvB,CAAC;AAEF,eAAO,MAAM,aAAa,oGAKzB,CAAC;AAEF,eAAO,MAAM,aAAa,yKAUzB,CAAC"}
+{"version":3,"file":"html.d.ts","sourceRoot":"","sources":["html.ts"],"names":[],"mappings":"AAKA,MAAM,WAAW,aAAa;IAC5B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,GAAG,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IACvB,OAAO,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAC3B,UAAU,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAC9B,YAAY,CAAC,EAAE,MAAM,EAAE,CAAC;IACxB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED;;;;;;GAMG;AACH,wBAAgB,SAAS,CAAE,IAAI,GAAE,aAAkB,GAAI,MAAM,CA2B5D;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,cAAc,CAC5B,MAAM,EAAE,MAAM,EACd,GAAG,CAAC,EAAE,OAAO,GAAG,MAAM,EACtB,OAAO,CAAC,EAAE,OAAO,GAAG,MAAM,EAC1B,UAAU,CAAC,EAAE,OAAO,GAAG,MAAM,EAC7B,YAAY,GAAE,MAAM,EAAO,GAC1B,MAAM,CAkCR;AAED,eAAO,MAAM,WAAW,+MAUvB,CAAC;AAEF,eAAO,MAAM,aAAa,oGAKzB,CAAC;AAEF,eAAO,MAAM,aAAa,yKAUzB,CAAC"}

dist/types/test/utils/utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["utils.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAClD,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAEtC,OAAO,EAAa,aAAa,EAAE,MAAM,aAAa,CAAC;AAIvD,UAAU,QAAS,SAAQ,aAAa;IACtC,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED;;;;;;;GAOG;AACH,wBAAgB,IAAI,CAAE,OAAO,GAAE,OAAY,EAAE,IAAI,GAAE,QAAa,GAAI,MAAM,CAqFzE;AAED;;;;;;GAMG;AACH,wBAAgB,cAAc,CAAE,GAAG,EAAE,WAAW,GAAI;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,GAAG,EAAE,MAAM,CAAA;CAAE,CAgBhF;AAED;;;;;;;;;GASG;AACH,wBAAgB,IAAI,CAClB,MAAM,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,EACnC,IAAI,EAAE,MAAM,EACZ,IAAI,GAAE,GAAQ,EACd,aAAa,GAAE,SAAc,GAC5B,KAAK,CAUP;AAED;;;;;GAKG;AACH,wBAAgB,OAAO,CAAE,GAAG,EAAE,MAAM,EAAE,MAAM,GAAE,MAAM,GAAG,OAAgB,GAAI,IAAI,CAE9E;AAED;;;;;;GAMG;AACH,wBAAgB,IAAI,CAAE,QAAQ,SAAI,GAAI,OAAO,CAAC,IAAI,CAAC,CAIlD"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["utils.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAClD,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAEtC,OAAO,EAAa,aAAa,EAAE,MAAM,aAAa,CAAC;AAIvD,UAAU,QAAS,SAAQ,aAAa;IACtC,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED;;;;;;;GAOG;AACH,wBAAgB,IAAI,CAAE,OAAO,GAAE,OAAY,EAAE,IAAI,GAAE,QAAa,GAAI,MAAM,CAsFzE;AAED;;;;;;GAMG;AACH,wBAAgB,cAAc,CAAE,GAAG,EAAE,WAAW,GAAI;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,GAAG,EAAE,MAAM,CAAA;CAAE,CAgBhF;AAED;;;;;;;;;GASG;AACH,wBAAgB,IAAI,CAClB,MAAM,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,EACnC,IAAI,EAAE,MAAM,EACZ,IAAI,GAAE,GAAQ,EACd,aAAa,GAAE,SAAc,GAC5B,KAAK,CAUP;AAED;;;;;GAKG;AACH,wBAAgB,OAAO,CAAE,GAAG,EAAE,MAAM,EAAE,MAAM,GAAE,MAAM,GAAG,OAAgB,GAAI,IAAI,CAE9E;AAED;;;;;;GAMG;AACH,wBAAgB,IAAI,CAAE,QAAQ,SAAI,GAAI,OAAO,CAAC,IAAI,CAAC,CAIlD"}

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@splidejs/splide",
-  "version": "3.4.2",
+  "version": "3.5.0",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@splidejs/splide",
-  "version": "3.4.2",
+  "version": "3.5.0",
   "description": "Splide is a lightweight, flexible and accessible slider/carousel. No dependencies, no Lighthouse errors.",
   "author": "Naotoshi Fujita",
   "license": "MIT",

src/js/components/Autoplay/Autoplay.ts

@@ -10,7 +10,8 @@ import {
 import { EventInterface, RequestInterval } from '../../constructors';
 import { Splide } from '../../core/Splide/Splide';
 import { BaseComponent, Components, Options } from '../../types';
-import { setAttribute, style } from '../../utils';
+import { getAttribute, setAttribute, style } from '../../utils';
+import { INTERVAL_DATA_ATTRIBUTE } from './constants';
 
 
 /**
@@ -37,9 +38,9 @@ export interface AutoplayComponent extends BaseComponent {
  */
 export function Autoplay( Splide: Splide, Components: Components, options: Options ): AutoplayComponent {
   const { on, bind, emit } = EventInterface( Splide );
-  const { Elements } = Components;
   const interval = RequestInterval( options.interval, Splide.go.bind( Splide, '>' ), update );
   const { isPaused } = interval;
+  const { Elements } = Components;
 
   /**
    * Indicates whether the slider is hovered or not.
@@ -111,6 +112,7 @@ export function Autoplay( Splide: Splide, Components: Components, options: Optio
     }
 
     on( [ EVENT_MOVE, EVENT_SCROLL, EVENT_REFRESH ], interval.rewind );
+    on( EVENT_MOVE, updateInterval );
   }
 
   /**
@@ -153,20 +155,24 @@ export function Autoplay( Splide: Splide, Components: Components, options: Optio
   }
 
   /**
-   * Called on every animation frame when auto playing.
+   * Called on every animation frame while autoplay is active.
    *
    * @param rate - The progress rate between 0 to 1.
    */
   function update( rate: number ): void {
     const { bar } = Elements;
-
-    if ( bar ) {
-      style( bar, 'width', `${ rate * 100 }%` );
-    }
-
+    bar && style( bar, 'width', `${ rate * 100 }%` );
     emit( EVENT_AUTOPLAY_PLAYING, rate );
   }
 
+  /**
+   * Updates or restores the interval duration.
+   */
+  function updateInterval(): void {
+    const Slide = Components.Slides.getAt( Splide.index );
+    interval.set( Slide && +getAttribute( Slide.slide, INTERVAL_DATA_ATTRIBUTE ) || options.interval );
+  }
+
   return {
     mount,
     destroy: interval.cancel,

src/js/components/Autoplay/constants.ts

@@ -0,0 +1,9 @@
+import { DATA_ATTRIBUTE } from '../../constants/project';
+
+
+/**
+ * The data attribute for the autoplay interval duration.
+ *
+ * @since 3.5.0
+ */
+export const INTERVAL_DATA_ATTRIBUTE = `${ DATA_ATTRIBUTE }-interval`;

src/js/components/Autoplay/test/general.test.ts

@@ -30,6 +30,28 @@ describe( 'Autoplay', () => {
     expect( splide.index ).toBe( 2 );
   } );
 
+  test( 'can use the interval duration provided by the data attribute.', async () => {
+    const interval = 1000;
+    const splide   = init(
+      { autoplay: true, interval, waitForTransition: false },
+      { dataInterval: [ 0, 2000 ] }
+    );
+
+    expect( splide.index ).toBe( 0 );
+
+    await wait( 1100 );
+    expect( splide.index ).toBe( 1 );
+
+    await wait( 1100 ); // Should be still 1 because using 2000
+    expect( splide.index ).toBe( 1 );
+
+    await wait( 1000 ); // 2100
+    expect( splide.index ).toBe( 2 );
+
+    await wait( 1100 ); // Should restore the interval to 1000
+    expect( splide.index ).toBe( 3 );
+  } );
+
   test( 'can play/pause autoplay manually.', async () => {
     const interval          = 1000;
     const intervalAndBuffer = 1100;

src/js/components/Drag/Drag.ts

@@ -192,6 +192,8 @@ export function Drag( Splide: Splide, Components: Components, options: Options )
     unbind( target, POINTER_MOVE_EVENTS, onPointerMove );
     unbind( target, POINTER_UP_EVENTS, onPointerUp );
 
+    const { index } = Splide;
+
     if ( lastEvent ) {
       if ( dragging || ( e.cancelable && isSliderDirection() ) ) {
         const velocity    = computeVelocity( e );
@@ -200,7 +202,7 @@ export function Drag( Splide: Splide, Components: Components, options: Options )
         if ( isFree ) {
           Controller.scroll( destination );
         } else if ( Splide.is( FADE ) ) {
-          Controller.go( Splide.index + orient( sign( velocity ) ) );
+          Controller.go( index + orient( sign( velocity ) ) );
         } else {
           Controller.go( Controller.toDest( destination ), true );
         }
@@ -210,8 +212,8 @@ export function Drag( Splide: Splide, Components: Components, options: Options )
 
       emit( EVENT_DRAGGED );
     } else {
-      if ( ! isFree ) {
-        Controller.go( Splide.index, true );
+      if ( ! isFree && getPosition() !== Move.toPosition( index ) ) {
+        Controller.go( index, true );
       }
     }
 

src/js/constructors/RequestInterval/RequestInterval.ts

@@ -11,6 +11,7 @@ export interface RequestIntervalInterface {
   pause(): void;
   rewind(): void;
   cancel(): void;
+  set( interval: number ): void;
   isPaused(): boolean;
 }
 
@@ -128,6 +129,15 @@ export function RequestInterval(
     paused = true;
   }
 
+  /**
+   * Sets new interval duration.
+   *
+   * @param time - The interval duration in milliseconds.
+   */
+  function set( time: number ): void {
+    interval = time;
+  }
+
   /**
    * Checks if the interval is paused or not.
    *
@@ -142,6 +152,7 @@ export function RequestInterval(
     rewind,
     pause,
     cancel,
+    set,
     isPaused,
   };
 }

src/js/test/fixtures/html.ts

@@ -1,3 +1,4 @@
+import { INTERVAL_DATA_ATTRIBUTE } from '../../components/Autoplay/constants';
 import { SRC_DATA_ATTRIBUTE, SRCSET_DATA_ATTRIBUTE } from '../../components/LazyLoad/constants';
 import { URL } from './constants';
 
@@ -11,6 +12,7 @@ export interface BuildHtmlArgs {
   src?: boolean | string;
   dataSrc?: boolean | string;
   dataSrcset?: boolean | string;
+  dataInterval?: number[];
   json?: string;
 }
 
@@ -31,6 +33,7 @@ export function buildHtml( args: BuildHtmlArgs = {} ): string {
     src = true,
     dataSrc,
     dataSrcset,
+    dataInterval,
     json,
   } = args;
 
@@ -38,7 +41,7 @@ export function buildHtml( args: BuildHtmlArgs = {} ): string {
 <div class="splide"${ id ? ` id=${ id }` : '' }${ json ? ` data-splide='${ json }'` : '' }>
   <div class="splide__track">
     <ul class="splide__list">
-      ${ generateSlides( length, src, dataSrc, dataSrcset ) }
+      ${ generateSlides( length, src, dataSrc, dataSrcset, dataInterval ) }
     </ul>
   </div>
 
@@ -52,10 +55,11 @@ export function buildHtml( args: BuildHtmlArgs = {} ): string {
 /**
  * Generates slides.
  *
- * @param length     - A number of slides.
- * @param src        - Whether to add src attribute or not.
- * @param dataSrc    - Whether to add data-splide-lazy attribute or not.
- * @param dataSrcset - Whether to add data-splide-lazy-srcset attribute or not.
+ * @param length       - A number of slides.
+ * @param src          - Whether to add src attribute or not.
+ * @param dataSrc      - Whether to add data-splide-lazy attribute or not.
+ * @param dataSrcset   - Whether to add data-splide-lazy-srcset attribute or not.
+ * @param dataInterval - An array with autoplay interval.
  *
  * @return A built HTML.
  */
@@ -63,28 +67,39 @@ export function generateSlides(
   length: number,
   src?: boolean | string,
   dataSrc?: boolean | string,
-  dataSrcset?: boolean | string
+  dataSrcset?: boolean | string,
+  dataInterval: number[] = []
 ): string {
   return Array.from<string>( { length } ).reduce( ( html, item, index ) => {
-    html += `<li class="splide__slide">`;
+    const attrs: string[] = [];
 
-    const attrs = [ `alt="${ index }"` ];
+    if ( dataInterval ) {
+      const interval = dataInterval[ index ];
+
+      if ( interval ) {
+        attrs.push( `${ INTERVAL_DATA_ATTRIBUTE }="${ interval }"` );
+      }
+    }
+
+    html += `<li class="splide__slide" ${ attrs.join( ' ' ) }>`;
+
+    const imgAttrs = [ `alt="${ index }"` ];
 
     if ( src ) {
-      attrs.push( `src="${ URL }/${ typeof src === 'string' ? src + '-' : '' }${ index }.jpg"` );
+      imgAttrs.push( `src="${ URL }/${ typeof src === 'string' ? src + '-' : '' }${ index }.jpg"` );
     }
 
     if ( dataSrc ) {
-      attrs.push( `${ SRC_DATA_ATTRIBUTE }="${ URL }/${ typeof dataSrc === 'string' ? dataSrc + '-' : '' }${ index }.jpg"` );
+      imgAttrs.push( `${ SRC_DATA_ATTRIBUTE }="${ URL }/${ typeof dataSrc === 'string' ? dataSrc + '-' : '' }${ index }.jpg"` );
     }
 
     if ( dataSrcset ) {
-      attrs.push(
+      imgAttrs.push(
         `${ SRCSET_DATA_ATTRIBUTE }="${ URL }/${ typeof dataSrcset === 'string' ? dataSrcset + '-' : '' }${ index }.jpg 320w"`
       );
     }
 
-    html += `<img ${ attrs.join( ' ' ) }>`;
+    html += `<img ${ imgAttrs.join( ' ' ) }>`;
     html += `</li>`;
     return html;
   }, '' );

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

@@ -19,6 +19,7 @@ $settings = get_settings();
   <script>
     document.addEventListener( 'DOMContentLoaded', function () {
       var splide = new Splide( '#splide01', {
+        rewind       : true,
         autoplay     : true,
         pauseOnHover : false,
         resetProgress: false,
@@ -57,7 +58,19 @@ $settings = get_settings();
 <div id="splide01" class="splide">
   <div class="splide__track">
     <ul class="splide__list">
-      <?php render_slides(); ?>
+      <li class="splide__slide">
+        <img src="../../assets/images/pics/slide01.jpg">
+      </li>
+      <li class="splide__slide" data-splide-interval="1000">
+        <img src="../../assets/images/pics/slide02.jpg">
+      </li>
+      <li class="splide__slide" data-splide-interval="10000">
+        <img src="../../assets/images/pics/slide03.jpg">
+      </li>
+      <li class="splide__slide">
+        <img src="../../assets/images/pics/slide04.jpg">
+      </li>
+<!--      --><?php //render_slides(); ?>
     </ul>
   </div>
 

src/js/test/utils/utils.ts

@@ -35,12 +35,13 @@ export function init( options: Options = {}, args: InitArgs = {} ): Splide {
     dataSrcset,
     json,
     insertHtml,
+    dataInterval,
   } = args;
 
   const slideWidth  = +width / ( options.perPage || 1 );
   const slideHeight = +height / ( options.perPage || 1 );
   const innerHtml   = html
-    || buildHtml( { length, arrows, autoplay, progress, src, dataSrc, dataSrcset, json, id } );
+    || buildHtml( { length, arrows, autoplay, progress, src, dataSrc, dataSrcset, json, id, dataInterval } );
 
   if ( insertHtml ) {
     if ( ! document.body.innerHTML ) {