Flatten the `wheel` option.

dist/js/splide.cjs.js

@@ -2508,7 +2508,7 @@ function Pagination(Splide2, Components2, options) {
       go = Controller.go;
   var resolve = Components2.Direction.resolve;
   var items = [];
-  var pagination;
+  var list;
   var paginationClasses;
 
   function mount() {
@@ -2520,19 +2520,19 @@ function Pagination(Splide2, Components2, options) {
       createPagination();
       update();
       emit(EVENT_PAGINATION_MOUNTED, {
-        list: pagination,
+        list: list,
         items: items
       }, getAt(Splide2.index));
     }
   }
 
   function destroy() {
-    if (pagination) {
+    if (list) {
       destroyEvents();
-      remove(Elements.pagination ? slice(pagination.children) : pagination);
-      removeClass(pagination, paginationClasses);
+      remove(Elements.pagination ? slice(list.children) : list);
+      removeClass(list, paginationClasses);
       empty(items);
-      pagination = null;
+      list = null;
     }
   }
 
@@ -2542,14 +2542,14 @@ function Pagination(Splide2, Components2, options) {
         i18n = options.i18n,
         perPage = options.perPage;
     var max = hasFocus() ? length : ceil(length / perPage);
-    pagination = Elements.pagination || create("ul", classes.pagination, Elements.root);
-    addClass(pagination, paginationClasses = CLASS_PAGINATION + "--" + options.direction);
-    setAttribute(pagination, ROLE, "tablist");
-    setAttribute(pagination, ARIA_LABEL, i18n.select);
-    setAttribute(pagination, ARIA_ORIENTATION, options.direction === TTB ? "vertical" : "");
+    list = Elements.pagination || create("ul", classes.pagination, Elements.root);
+    addClass(list, paginationClasses = CLASS_PAGINATION + "--" + getDirection());
+    setAttribute(list, ROLE, "tablist");
+    setAttribute(list, ARIA_LABEL, i18n.select);
+    setAttribute(list, ARIA_ORIENTATION, getDirection() === TTB ? "vertical" : "");
 
     for (var i = 0; i < max; i++) {
-      var li = create("li", null, pagination);
+      var li = create("li", null, list);
       var button = create("button", {
         class: classes.page,
         type: "button"
@@ -2584,11 +2584,12 @@ function Pagination(Splide2, Components2, options) {
   function onKeydown(page, e) {
     var length = items.length;
     var key = normalizeKey(e);
+    var dir = getDirection();
     var nextPage = -1;
 
-    if (key === resolve("ArrowRight")) {
+    if (key === resolve("ArrowRight", false, dir)) {
       nextPage = ++page % length;
-    } else if (key === resolve("ArrowLeft")) {
+    } else if (key === resolve("ArrowLeft", false, dir)) {
       nextPage = (--page + length) % length;
     } else if (key === "Home") {
       nextPage = 0;
@@ -2605,6 +2606,10 @@ function Pagination(Splide2, Components2, options) {
     }
   }
 
+  function getDirection() {
+    return options.paginationDirection || options.direction;
+  }
+
   function getAt(index) {
     return items[Controller.toPage(index)];
   }
@@ -2628,7 +2633,7 @@ function Pagination(Splide2, Components2, options) {
     }
 
     emit(EVENT_PAGINATION_UPDATED, {
-      list: pagination,
+      list: list,
       items: items
     }, prev, curr);
   }
@@ -2832,7 +2837,6 @@ var DEFAULTS = {
   easing: "cubic-bezier(0.25, 1, 0.5, 1)",
   drag: true,
   direction: "ltr",
-  slideFocus: true,
   trimSpace: true,
   focusableNodes: "a, button, textarea, input, select, iframe",
   live: true,

dist/js/splide.esm.js

@@ -2503,7 +2503,7 @@ function Pagination(Splide2, Components2, options) {
       go = Controller.go;
   var resolve = Components2.Direction.resolve;
   var items = [];
-  var pagination;
+  var list;
   var paginationClasses;
 
   function mount() {
@@ -2515,19 +2515,19 @@ function Pagination(Splide2, Components2, options) {
       createPagination();
       update();
       emit(EVENT_PAGINATION_MOUNTED, {
-        list: pagination,
+        list: list,
         items: items
       }, getAt(Splide2.index));
     }
   }
 
   function destroy() {
-    if (pagination) {
+    if (list) {
       destroyEvents();
-      remove(Elements.pagination ? slice(pagination.children) : pagination);
-      removeClass(pagination, paginationClasses);
+      remove(Elements.pagination ? slice(list.children) : list);
+      removeClass(list, paginationClasses);
       empty(items);
-      pagination = null;
+      list = null;
     }
   }
 
@@ -2537,14 +2537,14 @@ function Pagination(Splide2, Components2, options) {
         i18n = options.i18n,
         perPage = options.perPage;
     var max = hasFocus() ? length : ceil(length / perPage);
-    pagination = Elements.pagination || create("ul", classes.pagination, Elements.root);
-    addClass(pagination, paginationClasses = CLASS_PAGINATION + "--" + options.direction);
-    setAttribute(pagination, ROLE, "tablist");
-    setAttribute(pagination, ARIA_LABEL, i18n.select);
-    setAttribute(pagination, ARIA_ORIENTATION, options.direction === TTB ? "vertical" : "");
+    list = Elements.pagination || create("ul", classes.pagination, Elements.root);
+    addClass(list, paginationClasses = CLASS_PAGINATION + "--" + getDirection());
+    setAttribute(list, ROLE, "tablist");
+    setAttribute(list, ARIA_LABEL, i18n.select);
+    setAttribute(list, ARIA_ORIENTATION, getDirection() === TTB ? "vertical" : "");
 
     for (var i = 0; i < max; i++) {
-      var li = create("li", null, pagination);
+      var li = create("li", null, list);
       var button = create("button", {
         class: classes.page,
         type: "button"
@@ -2579,11 +2579,12 @@ function Pagination(Splide2, Components2, options) {
   function onKeydown(page, e) {
     var length = items.length;
     var key = normalizeKey(e);
+    var dir = getDirection();
     var nextPage = -1;
 
-    if (key === resolve("ArrowRight")) {
+    if (key === resolve("ArrowRight", false, dir)) {
       nextPage = ++page % length;
-    } else if (key === resolve("ArrowLeft")) {
+    } else if (key === resolve("ArrowLeft", false, dir)) {
       nextPage = (--page + length) % length;
     } else if (key === "Home") {
       nextPage = 0;
@@ -2600,6 +2601,10 @@ function Pagination(Splide2, Components2, options) {
     }
   }
 
+  function getDirection() {
+    return options.paginationDirection || options.direction;
+  }
+
   function getAt(index) {
     return items[Controller.toPage(index)];
   }
@@ -2623,7 +2628,7 @@ function Pagination(Splide2, Components2, options) {
     }
 
     emit(EVENT_PAGINATION_UPDATED, {
-      list: pagination,
+      list: list,
       items: items
     }, prev, curr);
   }
@@ -2827,7 +2832,6 @@ var DEFAULTS = {
   easing: "cubic-bezier(0.25, 1, 0.5, 1)",
   drag: true,
   direction: "ltr",
-  slideFocus: true,
   trimSpace: true,
   focusableNodes: "a, button, textarea, input, select, iframe",
   live: true,

dist/js/splide.js

@@ -2718,12 +2718,10 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
     var _EventInterface16 = EventInterface(Splide2),
         bind = _EventInterface16.bind;
 
-    var wheelOption = options.wheel;
-    var wheel = isObject(wheelOption) ? wheelOption : wheelOption && {};
     var lastTime = 0;
 
     function mount() {
-      if (wheel) {
+      if (options.wheel) {
         bind(Components2.Elements.track, "wheel", onWheel, SCROLL_LISTENER_OPTIONS);
       }
     }
@@ -2734,7 +2732,11 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
         var backwards = deltaY < 0;
         var timeStamp = timeOf(e);
 
-        if (abs(deltaY) > (wheel.min || 0) && timeStamp - lastTime > (wheel.sleep || 0)) {
+        var _min = options.wheelMinThreshold || 0;
+
+        var sleep = options.wheelSleep || 0;
+
+        if (abs(deltaY) > _min && timeStamp - lastTime > sleep) {
           Splide2.go(backwards ? "<" : ">");
           lastTime = timeStamp;
         }
@@ -2833,7 +2835,6 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
     easing: "cubic-bezier(0.25, 1, 0.5, 1)",
     drag: true,
     direction: "ltr",
-    slideFocus: true,
     trimSpace: true,
     focusableNodes: "a, button, textarea, input, select, iframe",
     live: true,

dist/types/index.d.ts

@@ -561,10 +561,17 @@ interface ResponsiveOptions {
     /**
      * Determines whether to create pagination (indicator dots) or not.
      */
-    pagination?: boolean | {
-        keyboard?: boolean;
-        direction?: 'ltr' | 'rtl' | 'ttb';
-    };
+    pagination?: boolean;
+    /**
+     * Determines whether to enable keyboard shortcuts for pagination when it contains focus.
+     * The default value is `true`.
+     */
+    paginationKeyboard?: boolean;
+    /**
+     * Explicitly sets the pagination direction that does not only affect appearance but also shortcuts and ARIA attributes.
+     * The default value is same with the carousel direction.
+     */
+    paginationDirection?: Options['direction'];
     /**
      * The timing function for the CSS transition. For example, `linear`, ease or `cubic-bezier()`.
      */

src/js/components/Pagination/Pagination.ts

@@ -28,7 +28,6 @@ import {
   empty,
   focus,
   format,
-  isObject,
   prevent,
   remove,
   removeAttribute,

src/js/components/Wheel/Wheel.ts

@@ -3,7 +3,7 @@ import { MOVING } from '../../constants/states';
 import { EventInterface } from '../../constructors';
 import { Splide } from '../../core/Splide/Splide';
 import { BaseComponent, Components, Options } from '../../types';
-import { abs, isObject, prevent, timeOf } from '../../utils';
+import { abs, prevent, timeOf } from '../../utils';
 
 
 /**
@@ -27,8 +27,6 @@ export interface WheelComponent extends BaseComponent {
  */
 export function Wheel( Splide: Splide, Components: Components, options: Options ): WheelComponent {
   const { bind } = EventInterface( Splide );
-  const { wheel: wheelOption } = options;
-  const wheel = isObject( wheelOption ) ? wheelOption : wheelOption && {};
 
   /**
    * Holds the last time when the wheel moves the slider.
@@ -39,7 +37,7 @@ export function Wheel( Splide: Splide, Components: Components, options: Options
    * Called when the component is mounted.
    */
   function mount(): void {
-    if ( wheel ) {
+    if ( options.wheel ) {
       bind( Components.Elements.track, 'wheel', onWheel, SCROLL_LISTENER_OPTIONS );
     }
   }
@@ -54,8 +52,10 @@ export function Wheel( Splide: Splide, Components: Components, options: Options
       const { deltaY } = e;
       const backwards = deltaY < 0;
       const timeStamp = timeOf( e );
+      const min       = options.wheelMinThreshold || 0;
+      const sleep     = options.wheelSleep || 0;
 
-      if ( abs( deltaY ) > ( wheel.min || 0 ) && timeStamp - lastTime > ( wheel.sleep || 0 ) ) {
+      if ( abs( deltaY ) > min && timeStamp - lastTime > sleep ) {
         Splide.go( backwards ? '<' : '>' );
         lastTime = timeStamp;
       }

src/js/components/Wheel/test/inertia.test.ts

@@ -4,7 +4,7 @@ import { fireCancelable } from './general.test';
 
 describe( 'Wheel', () => {
   test( 'should move the slider only when the delta is greater than the min threshold.', () => {
-    const splide = init( { speed: 0, wheel: { min: 50 } } );
+    const splide = init( { speed: 0, wheel: true, wheelMinThreshold: 50 } );
     const { track } = splide.Components.Elements;
 
     fireCancelable( track, 'wheel', { deltaY: 49 } );
@@ -27,7 +27,7 @@ describe( 'Wheel', () => {
   } );
 
   test( 'should not move the slider while the wheel component is sleeping.', () => {
-    const splide = init( { speed: 0, wheel: { sleep: 500 } } );
+    const splide = init( { speed: 0, wheel: true, wheelSleep: 500 } );
     const { track } = splide.Components.Elements;
 
     fireCancelable( track, 'wheel', { deltaY: 100, timeStamp: 1000 } );

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

@@ -22,7 +22,7 @@ $settings = get_settings();
     document.addEventListener( 'DOMContentLoaded', function () {
       var splide = new Splide( '#splide01', {
 	      width       : 800,
-	      type        : 'loop',
+	      // type        : 'loop',
 	      perPage     : 3,
 	      rewind      : true,
 	      rewindByDrag: true,

src/js/types/options.ts

@@ -104,20 +104,20 @@ export interface Options extends ResponsiveOptions {
 
   /**
    * Enables navigation by the mouse wheel.
-   * Set `waitForTransition` to `ture` or provide the `sleep` duration.
-   */
-  wheel?: boolean | {
-    /**
-     * The threshold to cut off the small delta produced by inertia scroll.
-     */
-    min?: number,
-
-    /**
-     * The sleep time in milliseconds until accepting next wheel.
-     * The timer starts when the transition begins.
-     */
-    sleep?: number,
-  };
+   * Set `waitForTransition` to `ture` or provide the `wheelSleep` duration.
+   */
+  wheel?: boolean;
+
+  /**
+   * The threshold to cut off the small delta produced by inertia scroll.
+   */
+  wheelMinThreshold?: number;
+
+  /**
+   * The sleep time in milliseconds until accepting next wheel.
+   * The timer starts when the transition begins.
+   */
+  wheelSleep?: number;
 
   /**
    * Determines whether to release the wheel event when the slider reaches the first or last slide.