The `direction` option becomes responsive. Add the `paginationDirection` option.

dist/js/splide.cjs.js

@@ -631,7 +631,9 @@ function Media(Splide2, Components2, options) {
       destroy(true);
       Splide2.mount();
     } else {
+      var oriented = Splide2.options.direction !== options2.direction;
       Splide2.options = options2;
+      oriented && Splide2.refresh();
     }
   }
 
@@ -672,8 +674,8 @@ var ORIENTATION_MAP = {
 };
 
 function Direction(Splide2, Components2, options) {
-  function resolve(prop, axisOnly) {
-    var direction = options.direction;
+  function resolve(prop, axisOnly, direction) {
+    direction = direction || options.direction;
     var index = direction === RTL && !axisOnly ? 1 : direction === TTB ? 0 : -1;
     return ORIENTATION_MAP[prop][index] || prop;
   }
@@ -703,7 +705,6 @@ var ARIA_ATOMIC = ARIA_PREFIX + "atomic";
 var ARIA_LIVE = ARIA_PREFIX + "live";
 var ALL_ATTRIBUTES = [ROLE, TAB_INDEX, DISABLED, ARIA_CONTROLS, ARIA_CURRENT, ARIA_LABEL, ARIA_HIDDEN, ARIA_ORIENTATION, ARIA_ROLEDESCRIPTION, ARIA_ATOMIC, ARIA_LIVE];
 var CLASS_ROOT = PROJECT_CODE;
-var CLASS_SLIDER = PROJECT_CODE + "__slider";
 var CLASS_TRACK = PROJECT_CODE + "__track";
 var CLASS_LIST = PROJECT_CODE + "__list";
 var CLASS_SLIDE = PROJECT_CODE + "__slide";
@@ -766,14 +767,15 @@ function Elements(Splide2, Components2, options) {
   var i18n = options.i18n;
   var elements = {};
   var slides = [];
-  var classes;
+  var rootClasses = [];
+  var trackClasses = [];
   var track;
   var list;
 
   function setup() {
     collect();
     init();
-    addClass(root, classes = getClasses());
+    update();
   }
 
   function mount() {
@@ -784,13 +786,18 @@ function Elements(Splide2, Components2, options) {
 
   function destroy() {
     empty(slides);
-    removeClass(root, classes);
+    removeClass(root, rootClasses);
+    removeClass(track, trackClasses);
     removeAttribute([root, track, list], ALL_ATTRIBUTES.concat("style"));
   }
 
   function update() {
-    removeClass(root, classes);
-    addClass(root, classes = getClasses());
+    removeClass(root, rootClasses);
+    removeClass(track, trackClasses);
+    rootClasses = getClasses(CLASS_ROOT);
+    trackClasses = getClasses(CLASS_TRACK);
+    addClass(root, rootClasses);
+    addClass(track, trackClasses);
   }
 
   function collect() {
@@ -833,8 +840,8 @@ function Elements(Splide2, Components2, options) {
     return elm && closest(elm, "." + CLASS_ROOT) === root ? elm : null;
   }
 
-  function getClasses() {
-    return [CLASS_ROOT + "--" + options.type, CLASS_ROOT + "--" + options.direction, options.drag && CLASS_ROOT + "--draggable", options.isNavigation && CLASS_ROOT + "--nav", CLASS_ACTIVE];
+  function getClasses(base) {
+    return [base + "--" + options.type, base + "--" + options.direction, options.drag && base + "--draggable", options.isNavigation && base + "--nav", base === CLASS_ROOT && CLASS_ACTIVE];
   }
 
   return assign(elements, {
@@ -1739,6 +1746,7 @@ function Arrows(Splide2, Components2, options) {
   var prev = Elements.prev;
   var next = Elements.next;
   var created;
+  var wrapperClasses;
   var arrows = {};
 
   function mount() {
@@ -1764,6 +1772,7 @@ function Arrows(Splide2, Components2, options) {
         next: next
       });
       display(wrapper, enabled ? "" : "none");
+      addClass(wrapper, wrapperClasses = CLASS_ARROWS + "--" + options.direction);
 
       if (enabled) {
         listen();
@@ -1776,6 +1785,7 @@ function Arrows(Splide2, Components2, options) {
 
   function destroy() {
     destroyEvents();
+    removeClass(wrapper, wrapperClasses);
 
     if (created) {
       remove(userArrows ? [prev, next] : wrapper);
@@ -2499,6 +2509,7 @@ function Pagination(Splide2, Components2, options) {
   var resolve = Components2.Direction.resolve;
   var items = [];
   var pagination;
+  var paginationClasses;
 
   function mount() {
     destroy();
@@ -2507,11 +2518,11 @@ function Pagination(Splide2, Components2, options) {
     if (options.pagination && Slides.isEnough()) {
       on([EVENT_MOVE, EVENT_SCROLL, EVENT_SCROLLED], update);
       createPagination();
+      update();
       emit(EVENT_PAGINATION_MOUNTED, {
         list: pagination,
         items: items
       }, getAt(Splide2.index));
-      update();
     }
   }
 
@@ -2519,6 +2530,7 @@ function Pagination(Splide2, Components2, options) {
     if (pagination) {
       destroyEvents();
       remove(Elements.pagination ? slice(pagination.children) : pagination);
+      removeClass(pagination, paginationClasses);
       empty(items);
       pagination = null;
     }
@@ -2531,6 +2543,7 @@ function Pagination(Splide2, Components2, options) {
         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" : "");
@@ -3630,7 +3643,6 @@ exports.CLASS_PROGRESS = CLASS_PROGRESS;
 exports.CLASS_PROGRESS_BAR = CLASS_PROGRESS_BAR;
 exports.CLASS_ROOT = CLASS_ROOT;
 exports.CLASS_SLIDE = CLASS_SLIDE;
-exports.CLASS_SLIDER = CLASS_SLIDER;
 exports.CLASS_SPINNER = CLASS_SPINNER;
 exports.CLASS_TRACK = CLASS_TRACK;
 exports.CLASS_VISIBLE = CLASS_VISIBLE;

dist/js/splide.esm.js

@@ -626,7 +626,9 @@ function Media(Splide2, Components2, options) {
       destroy(true);
       Splide2.mount();
     } else {
+      var oriented = Splide2.options.direction !== options2.direction;
       Splide2.options = options2;
+      oriented && Splide2.refresh();
     }
   }
 
@@ -667,8 +669,8 @@ var ORIENTATION_MAP = {
 };
 
 function Direction(Splide2, Components2, options) {
-  function resolve(prop, axisOnly) {
-    var direction = options.direction;
+  function resolve(prop, axisOnly, direction) {
+    direction = direction || options.direction;
     var index = direction === RTL && !axisOnly ? 1 : direction === TTB ? 0 : -1;
     return ORIENTATION_MAP[prop][index] || prop;
   }
@@ -698,7 +700,6 @@ var ARIA_ATOMIC = ARIA_PREFIX + "atomic";
 var ARIA_LIVE = ARIA_PREFIX + "live";
 var ALL_ATTRIBUTES = [ROLE, TAB_INDEX, DISABLED, ARIA_CONTROLS, ARIA_CURRENT, ARIA_LABEL, ARIA_HIDDEN, ARIA_ORIENTATION, ARIA_ROLEDESCRIPTION, ARIA_ATOMIC, ARIA_LIVE];
 var CLASS_ROOT = PROJECT_CODE;
-var CLASS_SLIDER = PROJECT_CODE + "__slider";
 var CLASS_TRACK = PROJECT_CODE + "__track";
 var CLASS_LIST = PROJECT_CODE + "__list";
 var CLASS_SLIDE = PROJECT_CODE + "__slide";
@@ -761,14 +762,15 @@ function Elements(Splide2, Components2, options) {
   var i18n = options.i18n;
   var elements = {};
   var slides = [];
-  var classes;
+  var rootClasses = [];
+  var trackClasses = [];
   var track;
   var list;
 
   function setup() {
     collect();
     init();
-    addClass(root, classes = getClasses());
+    update();
   }
 
   function mount() {
@@ -779,13 +781,18 @@ function Elements(Splide2, Components2, options) {
 
   function destroy() {
     empty(slides);
-    removeClass(root, classes);
+    removeClass(root, rootClasses);
+    removeClass(track, trackClasses);
     removeAttribute([root, track, list], ALL_ATTRIBUTES.concat("style"));
   }
 
   function update() {
-    removeClass(root, classes);
-    addClass(root, classes = getClasses());
+    removeClass(root, rootClasses);
+    removeClass(track, trackClasses);
+    rootClasses = getClasses(CLASS_ROOT);
+    trackClasses = getClasses(CLASS_TRACK);
+    addClass(root, rootClasses);
+    addClass(track, trackClasses);
   }
 
   function collect() {
@@ -828,8 +835,8 @@ function Elements(Splide2, Components2, options) {
     return elm && closest(elm, "." + CLASS_ROOT) === root ? elm : null;
   }
 
-  function getClasses() {
-    return [CLASS_ROOT + "--" + options.type, CLASS_ROOT + "--" + options.direction, options.drag && CLASS_ROOT + "--draggable", options.isNavigation && CLASS_ROOT + "--nav", CLASS_ACTIVE];
+  function getClasses(base) {
+    return [base + "--" + options.type, base + "--" + options.direction, options.drag && base + "--draggable", options.isNavigation && base + "--nav", base === CLASS_ROOT && CLASS_ACTIVE];
   }
 
   return assign(elements, {
@@ -1734,6 +1741,7 @@ function Arrows(Splide2, Components2, options) {
   var prev = Elements.prev;
   var next = Elements.next;
   var created;
+  var wrapperClasses;
   var arrows = {};
 
   function mount() {
@@ -1759,6 +1767,7 @@ function Arrows(Splide2, Components2, options) {
         next: next
       });
       display(wrapper, enabled ? "" : "none");
+      addClass(wrapper, wrapperClasses = CLASS_ARROWS + "--" + options.direction);
 
       if (enabled) {
         listen();
@@ -1771,6 +1780,7 @@ function Arrows(Splide2, Components2, options) {
 
   function destroy() {
     destroyEvents();
+    removeClass(wrapper, wrapperClasses);
 
     if (created) {
       remove(userArrows ? [prev, next] : wrapper);
@@ -2494,6 +2504,7 @@ function Pagination(Splide2, Components2, options) {
   var resolve = Components2.Direction.resolve;
   var items = [];
   var pagination;
+  var paginationClasses;
 
   function mount() {
     destroy();
@@ -2502,11 +2513,11 @@ function Pagination(Splide2, Components2, options) {
     if (options.pagination && Slides.isEnough()) {
       on([EVENT_MOVE, EVENT_SCROLL, EVENT_SCROLLED], update);
       createPagination();
+      update();
       emit(EVENT_PAGINATION_MOUNTED, {
         list: pagination,
         items: items
       }, getAt(Splide2.index));
-      update();
     }
   }
 
@@ -2514,6 +2525,7 @@ function Pagination(Splide2, Components2, options) {
     if (pagination) {
       destroyEvents();
       remove(Elements.pagination ? slice(pagination.children) : pagination);
+      removeClass(pagination, paginationClasses);
       empty(items);
       pagination = null;
     }
@@ -2526,6 +2538,7 @@ function Pagination(Splide2, Components2, options) {
         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" : "");
@@ -3603,4 +3616,4 @@ var SplideRenderer = /*#__PURE__*/function () {
   return SplideRenderer;
 }();
 
-export { CLASSES, CLASS_ACTIVE, CLASS_ARROW, CLASS_ARROWS, CLASS_ARROW_NEXT, CLASS_ARROW_PREV, CLASS_AUTOPLAY, CLASS_CLONE, CLASS_CONTAINER, CLASS_INITIALIZED, CLASS_LIST, CLASS_LOADING, CLASS_NEXT, CLASS_PAGINATION, CLASS_PAGINATION_PAGE, CLASS_PAUSE, CLASS_PLAY, CLASS_PREV, CLASS_PROGRESS, CLASS_PROGRESS_BAR, CLASS_ROOT, CLASS_SLIDE, CLASS_SLIDER, CLASS_SPINNER, CLASS_TRACK, CLASS_VISIBLE, EVENT_ACTIVE, EVENT_ARROWS_MOUNTED, EVENT_ARROWS_UPDATED, EVENT_AUTOPLAY_PAUSE, EVENT_AUTOPLAY_PLAY, EVENT_AUTOPLAY_PLAYING, EVENT_CLICK, EVENT_DESTROY, EVENT_DRAG, EVENT_DRAGGED, EVENT_DRAGGING, EVENT_HIDDEN, EVENT_INACTIVE, EVENT_LAZYLOAD_LOADED, EVENT_MEDIA, EVENT_MOUNTED, EVENT_MOVE, EVENT_MOVED, EVENT_NAVIGATION_MOUNTED, EVENT_PAGINATION_MOUNTED, EVENT_PAGINATION_UPDATED, EVENT_READY, EVENT_REFRESH, EVENT_REPOSITIONED, EVENT_RESIZE, EVENT_RESIZED, EVENT_SCROLL, EVENT_SCROLLED, EVENT_SHIFTED, EVENT_SLIDE_KEYDOWN, EVENT_UPDATED, EVENT_VISIBLE, EventBinder, EventInterface, RequestInterval, STATUS_CLASSES, Splide, SplideRenderer, State, Throttle, Splide as default };
+export { CLASSES, CLASS_ACTIVE, CLASS_ARROW, CLASS_ARROWS, CLASS_ARROW_NEXT, CLASS_ARROW_PREV, CLASS_AUTOPLAY, CLASS_CLONE, CLASS_CONTAINER, CLASS_INITIALIZED, CLASS_LIST, CLASS_LOADING, CLASS_NEXT, CLASS_PAGINATION, CLASS_PAGINATION_PAGE, CLASS_PAUSE, CLASS_PLAY, CLASS_PREV, CLASS_PROGRESS, CLASS_PROGRESS_BAR, CLASS_ROOT, CLASS_SLIDE, CLASS_SPINNER, CLASS_TRACK, CLASS_VISIBLE, EVENT_ACTIVE, EVENT_ARROWS_MOUNTED, EVENT_ARROWS_UPDATED, EVENT_AUTOPLAY_PAUSE, EVENT_AUTOPLAY_PLAY, EVENT_AUTOPLAY_PLAYING, EVENT_CLICK, EVENT_DESTROY, EVENT_DRAG, EVENT_DRAGGED, EVENT_DRAGGING, EVENT_HIDDEN, EVENT_INACTIVE, EVENT_LAZYLOAD_LOADED, EVENT_MEDIA, EVENT_MOUNTED, EVENT_MOVE, EVENT_MOVED, EVENT_NAVIGATION_MOUNTED, EVENT_PAGINATION_MOUNTED, EVENT_PAGINATION_UPDATED, EVENT_READY, EVENT_REFRESH, EVENT_REPOSITIONED, EVENT_RESIZE, EVENT_RESIZED, EVENT_SCROLL, EVENT_SCROLLED, EVENT_SHIFTED, EVENT_SLIDE_KEYDOWN, EVENT_UPDATED, EVENT_VISIBLE, EventBinder, EventInterface, RequestInterval, STATUS_CLASSES, Splide, SplideRenderer, State, Throttle, Splide as default };

dist/js/splide.js

@@ -627,7 +627,9 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
         destroy(true);
         Splide2.mount();
       } else {
+        var oriented = Splide2.options.direction !== options2.direction;
         Splide2.options = options2;
+        oriented && Splide2.refresh();
       }
     }
 
@@ -668,8 +670,8 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
   };
 
   function Direction(Splide2, Components2, options) {
-    function resolve(prop, axisOnly) {
-      var direction = options.direction;
+    function resolve(prop, axisOnly, direction) {
+      direction = direction || options.direction;
       var index = direction === RTL && !axisOnly ? 1 : direction === TTB ? 0 : -1;
       return ORIENTATION_MAP[prop][index] || prop;
     }
@@ -1736,11 +1738,11 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
     var Elements = Components2.Elements,
         Controller = Components2.Controller;
     var userArrows = Elements.arrows;
-    var wrapperClasses = CLASS_ARROWS + "--" + options.direction;
     var wrapper = userArrows;
     var prev = Elements.prev;
     var next = Elements.next;
     var created;
+    var wrapperClasses;
     var arrows = {};
 
     function mount() {
@@ -1766,7 +1768,7 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
           next: next
         });
         display(wrapper, enabled ? "" : "none");
-        addClass(wrapper, wrapperClasses);
+        addClass(wrapper, wrapperClasses = CLASS_ARROWS + "--" + options.direction);
 
         if (enabled) {
           listen();
@@ -2501,9 +2503,9 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
         getIndex = Controller.getIndex,
         go = Controller.go;
     var resolve = Components2.Direction.resolve;
-    var paginationClasses = CLASS_PAGINATION + "--" + options.direction;
     var items = [];
-    var pagination;
+    var list;
+    var paginationClasses;
 
     function mount() {
       destroy();
@@ -2512,21 +2514,21 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
       if (options.pagination && Slides.isEnough()) {
         on([EVENT_MOVE, EVENT_SCROLL, EVENT_SCROLLED], update);
         createPagination();
+        update();
         emit(EVENT_PAGINATION_MOUNTED, {
-          list: pagination,
+          list: list,
           items: items
         }, getAt(Splide2.index));
-        update();
       }
     }
 
     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;
       }
     }
 
@@ -2536,14 +2538,14 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
           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);
-      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"
@@ -2578,11 +2580,12 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
     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;
@@ -2599,6 +2602,10 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
       }
     }
 
+    function getDirection() {
+      return options.paginationDirection || options.direction;
+    }
+
     function getAt(index) {
       return items[Controller.toPage(index)];
     }
@@ -2622,7 +2629,7 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
       }
 
       emit(EVENT_PAGINATION_UPDATED, {
-        list: pagination,
+        list: list,
         items: items
       }, prev, curr);
     }

dist/types/index.d.ts

@@ -12,7 +12,7 @@ interface MediaComponent extends BaseComponent {
  * @since 3.0.0
  */
 interface DirectionComponent extends BaseComponent {
-    resolve(prop: string, axisOnly?: boolean): string;
+    resolve(prop: string, axisOnly?: boolean, direction?: Options['direction']): string;
     orient(value: number): number;
 }
 
@@ -352,11 +352,6 @@ interface Options extends ResponsiveOptions {
      * - `false`: Disables keyboard shortcuts (default).
      */
     keyboard?: boolean | string;
-    /**
-     * Enables keyboard shortcuts for the pagination, recommended by W3C.
-     * The default value is `true`.
-     */
-    paginationKeyboard?: boolean;
     /**
      * Enables navigation by the mouse wheel.
      * Set `waitForTransition` to `ture` or provide the `sleep` duration.
@@ -566,7 +561,10 @@ interface ResponsiveOptions {
     /**
      * Determines whether to create pagination (indicator dots) or not.
      */
-    pagination?: boolean;
+    pagination?: boolean | {
+        keyboard?: boolean;
+        direction?: 'ltr' | 'rtl' | 'ttb';
+    };
     /**
      * The timing function for the CSS transition. For example, `linear`, ease or `cubic-bezier()`.
      */
@@ -1567,7 +1565,6 @@ declare const EVENT_AUTOPLAY_PAUSE = "autoplay:pause";
 declare const EVENT_LAZYLOAD_LOADED = "lazyload:loaded";
 
 declare const CLASS_ROOT = "splide";
-declare const CLASS_SLIDER: string;
 declare const CLASS_TRACK: string;
 declare const CLASS_LIST: string;
 declare const CLASS_SLIDE: string;
@@ -1614,4 +1611,4 @@ declare const CLASSES: {
     spinner: string;
 };
 
-export { AnyFunction, ArrowsComponent, AutoplayComponent, BaseComponent, CLASSES, CLASS_ACTIVE, CLASS_ARROW, CLASS_ARROWS, CLASS_ARROW_NEXT, CLASS_ARROW_PREV, CLASS_AUTOPLAY, CLASS_CLONE, CLASS_CONTAINER, CLASS_INITIALIZED, CLASS_LIST, CLASS_LOADING, CLASS_NEXT, CLASS_PAGINATION, CLASS_PAGINATION_PAGE, CLASS_PAUSE, CLASS_PLAY, CLASS_PREV, CLASS_PROGRESS, CLASS_PROGRESS_BAR, CLASS_ROOT, CLASS_SLIDE, CLASS_SLIDER, CLASS_SPINNER, CLASS_TRACK, CLASS_VISIBLE, Cast, ClonesComponent, ComponentConstructor, Components, ControllerComponent, CoverComponent, DirectionComponent, DragComponent, EVENT_ACTIVE, EVENT_ARROWS_MOUNTED, EVENT_ARROWS_UPDATED, EVENT_AUTOPLAY_PAUSE, EVENT_AUTOPLAY_PLAY, EVENT_AUTOPLAY_PLAYING, EVENT_CLICK, EVENT_DESTROY, EVENT_DRAG, EVENT_DRAGGED, EVENT_DRAGGING, EVENT_HIDDEN, EVENT_INACTIVE, EVENT_LAZYLOAD_LOADED, EVENT_MEDIA, EVENT_MOUNTED, EVENT_MOVE, EVENT_MOVED, EVENT_NAVIGATION_MOUNTED, EVENT_PAGINATION_MOUNTED, EVENT_PAGINATION_UPDATED, EVENT_READY, EVENT_REFRESH, EVENT_REPOSITIONED, EVENT_RESIZE, EVENT_RESIZED, EVENT_SCROLL, EVENT_SCROLLED, EVENT_SHIFTED, EVENT_SLIDE_KEYDOWN, EVENT_UPDATED, EVENT_VISIBLE, ElementsComponent, EventBinder, EventBinderObject, EventInterface, EventInterfaceObject, EventMap, Head, KeyboardComponent, LayoutComponent, LazyLoadComponent, LiveComponent, MediaComponent, MoveComponent, Options, PaginationComponent, PaginationData, PaginationItem, Push, RequestInterval, RequestIntervalInterface, Resolve, ResponsiveOptions, STATUS_CLASSES, ScrollComponent, Shift, ShiftN, SlideComponent, SlidesComponent, Splide, SplideRenderer, State, StateObject, SyncComponent, SyncTarget, Throttle, ThrottleInstance, TransitionComponent, WheelComponent, Splide as default };
+export { AnyFunction, ArrowsComponent, AutoplayComponent, BaseComponent, CLASSES, CLASS_ACTIVE, CLASS_ARROW, CLASS_ARROWS, CLASS_ARROW_NEXT, CLASS_ARROW_PREV, CLASS_AUTOPLAY, CLASS_CLONE, CLASS_CONTAINER, CLASS_INITIALIZED, CLASS_LIST, CLASS_LOADING, CLASS_NEXT, CLASS_PAGINATION, CLASS_PAGINATION_PAGE, CLASS_PAUSE, CLASS_PLAY, CLASS_PREV, CLASS_PROGRESS, CLASS_PROGRESS_BAR, CLASS_ROOT, CLASS_SLIDE, CLASS_SPINNER, CLASS_TRACK, CLASS_VISIBLE, Cast, ClonesComponent, ComponentConstructor, Components, ControllerComponent, CoverComponent, DirectionComponent, DragComponent, EVENT_ACTIVE, EVENT_ARROWS_MOUNTED, EVENT_ARROWS_UPDATED, EVENT_AUTOPLAY_PAUSE, EVENT_AUTOPLAY_PLAY, EVENT_AUTOPLAY_PLAYING, EVENT_CLICK, EVENT_DESTROY, EVENT_DRAG, EVENT_DRAGGED, EVENT_DRAGGING, EVENT_HIDDEN, EVENT_INACTIVE, EVENT_LAZYLOAD_LOADED, EVENT_MEDIA, EVENT_MOUNTED, EVENT_MOVE, EVENT_MOVED, EVENT_NAVIGATION_MOUNTED, EVENT_PAGINATION_MOUNTED, EVENT_PAGINATION_UPDATED, EVENT_READY, EVENT_REFRESH, EVENT_REPOSITIONED, EVENT_RESIZE, EVENT_RESIZED, EVENT_SCROLL, EVENT_SCROLLED, EVENT_SHIFTED, EVENT_SLIDE_KEYDOWN, EVENT_UPDATED, EVENT_VISIBLE, ElementsComponent, EventBinder, EventBinderObject, EventInterface, EventInterfaceObject, EventMap, Head, KeyboardComponent, LayoutComponent, LazyLoadComponent, LiveComponent, MediaComponent, MoveComponent, Options, PaginationComponent, PaginationData, PaginationItem, Push, RequestInterval, RequestIntervalInterface, Resolve, ResponsiveOptions, STATUS_CLASSES, ScrollComponent, Shift, ShiftN, SlideComponent, SlidesComponent, Splide, SplideRenderer, State, StateObject, SyncComponent, SyncTarget, Throttle, ThrottleInstance, TransitionComponent, WheelComponent, Splide as default };

src/js/components/Arrows/Arrows.ts

@@ -52,8 +52,7 @@ export function Arrows( Splide: Splide, Components: Components, options: Options
   const { on, bind, emit, destroy: destroyEvents } = EventInterface( Splide );
   const { classes, i18n } = options;
   const { Elements, Controller } = Components;
-  const userArrows     = Elements.arrows;
-  const wrapperClasses = `${ CLASS_ARROWS }--${ options.direction }`;
+  const userArrows = Elements.arrows;
 
   /**
    * The wrapper element.
@@ -75,6 +74,11 @@ export function Arrows( Splide: Splide, Components: Components, options: Options
    */
   let created: boolean;
 
+  /**
+   * Holds modifier classes.
+   */
+  let wrapperClasses: string;
+
   /**
    * An object with previous and next arrows.
    */
@@ -109,7 +113,7 @@ export function Arrows( Splide: Splide, Components: Components, options: Options
     if ( prev && next ) {
       assign( arrows, { prev, next } );
       display( wrapper, enabled ? '' : 'none' );
-      addClass( wrapper, wrapperClasses );
+      addClass( wrapper, ( wrapperClasses = `${ CLASS_ARROWS }--${ options.direction }` ) );
 
       if ( enabled ) {
         listen();

src/js/components/Direction/Direction.ts

@@ -9,7 +9,7 @@ import { BaseComponent, Components, Options } from '../../types';
  * @since 3.0.0
  */
 export interface DirectionComponent extends BaseComponent {
-  resolve( prop: string, axisOnly?: boolean ): string;
+  resolve( prop: string, axisOnly?: boolean, direction?: Options['direction'] ): string;
   orient( value: number ): number;
 }
 
@@ -53,8 +53,8 @@ export function Direction( Splide: Splide, Components: Components, options: Opti
    * @param prop     - A property name to translate.
    * @param axisOnly - Optional. If `ture`, returns the same property for LTR and RTL.
    */
-  function resolve( prop: string, axisOnly?: boolean ): string {
-    const { direction } = options;
+  function resolve( prop: string, axisOnly?: boolean, direction?: Options['direction'] ): string {
+    direction = direction || options.direction;
     const index = direction === RTL && ! axisOnly ? 1 : direction === TTB ? 0 : -1;
     return ORIENTATION_MAP[ prop ][ index ] || prop;
   }

src/js/components/Media/Media.ts

@@ -95,7 +95,9 @@ export function Media( Splide: Splide, Components: Components, options: Options
       destroy( true );
       Splide.mount();
     } else {
+      const oriented = Splide.options.direction !== options.direction;
       Splide.options = options;
+      oriented && Splide.refresh();
     }
   }
 

src/js/components/Pagination/Pagination.ts

@@ -28,6 +28,7 @@ import {
   empty,
   focus,
   format,
+  isObject,
   prevent,
   remove,
   removeAttribute,
@@ -87,7 +88,6 @@ export function Pagination( Splide: Splide, Components: Components, options: Opt
   const { Slides, Elements, Controller } = Components;
   const { hasFocus, getIndex, go } = Controller;
   const { resolve } = Components.Direction;
-  const paginationClasses = `${ CLASS_PAGINATION }--${ options.direction }`;
 
   /**
    * Stores all pagination items.
@@ -97,7 +97,12 @@ export function Pagination( Splide: Splide, Components: Components, options: Opt
   /**
    * The pagination element.
    */
-  let pagination: HTMLUListElement | null;
+  let list: HTMLUListElement | null;
+
+  /**
+   * Holds modifier classes.
+   */
+  let paginationClasses: string;
 
   /**
    * Called when the component is mounted.
@@ -110,8 +115,8 @@ export function Pagination( Splide: Splide, Components: Components, options: Opt
     if ( options.pagination && Slides.isEnough() ) {
       on( [ EVENT_MOVE, EVENT_SCROLL, EVENT_SCROLLED ], update );
       createPagination();
-      emit( EVENT_PAGINATION_MOUNTED, { list: pagination, items }, getAt( Splide.index ) );
       update();
+      emit( EVENT_PAGINATION_MOUNTED, { list, items }, getAt( Splide.index ) );
     }
   }
 
@@ -119,12 +124,12 @@ export function Pagination( Splide: Splide, Components: Components, options: Opt
    * Destroys the component.
    */
   function destroy(): void {
-    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;
     }
   }
 
@@ -134,17 +139,17 @@ export function Pagination( Splide: Splide, Components: Components, options: Opt
   function createPagination(): void {
     const { length } = Splide;
     const { classes, i18n, perPage } = options;
-    const max = hasFocus() ? length : ceil( length / perPage );
+    const max       = hasFocus() ? length : ceil( length / perPage );
 
-    pagination = Elements.pagination || create( 'ul', classes.pagination, Elements.root );
+    list = Elements.pagination || create( 'ul', classes.pagination, Elements.root );
 
-    addClass( pagination, paginationClasses );
-    setAttribute( pagination, ROLE, 'tablist' );
-    setAttribute( pagination, ARIA_LABEL, i18n.select );
-    setAttribute( pagination, ARIA_ORIENTATION, options.direction === TTB ? 'vertical' : '' );
+    addClass( list, ( paginationClasses = `${ CLASS_PAGINATION }--${ getDirection() }` ) );
+    setAttribute( list, ROLE, 'tablist' );
+    setAttribute( list, ARIA_LABEL, i18n.select );
+    setAttribute( list, ARIA_ORIENTATION, getDirection() === TTB ? 'vertical' : '' );
 
     for ( let i = 0; i < max; i++ ) {
-      const li       = create( 'li', null, pagination );
+      const li       = create( 'li', null, list );
       const button   = create( 'button', { class: classes.page, type: 'button' }, li );
       const controls = Slides.getIn( i ).map( Slide => Slide.slide.id );
       const text     = ! hasFocus() && perPage > 1 ? i18n.pageX : i18n.slideX;
@@ -188,12 +193,13 @@ export function Pagination( Splide: Splide, Components: Components, options: Opt
   function onKeydown( page: number, e: KeyboardEvent ): void {
     const { length } = items;
     const key = normalizeKey( e );
+    const dir = getDirection();
 
     let 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;
@@ -210,6 +216,13 @@ export function Pagination( Splide: Splide, Components: Components, options: Opt
     }
   }
 
+  /**
+   * Returns the latest direction for pagination.
+   */
+  function getDirection(): Options['direction'] {
+    return options.paginationDirection || options.direction;
+  }
+
   /**
    * Returns the pagination item at the specified index.
    *
@@ -242,7 +255,7 @@ export function Pagination( Splide: Splide, Components: Components, options: Opt
       setAttribute( button, TAB_INDEX, '' );
     }
 
-    emit( EVENT_PAGINATION_UPDATED, { list: pagination, items }, prev, curr );
+    emit( EVENT_PAGINATION_UPDATED, { list, items }, prev, curr );
   }
 
   return {

src/js/test/php/examples/breakpoints.php

@@ -18,30 +18,32 @@ $settings = get_settings();
 
   <script>
     document.addEventListener( 'DOMContentLoaded', function () {
-      var splide = new Splide( '#splide01', {
-        perPage    : 3,
-        arrows     : false,
-        mediaQuery : 'max',
-        breakpoints: {
-          1200: {
-            perPage: 1,
-            gap    : '1rem',
-            arrows : true,
-            padding: 50,
-          },
-          1000: {
-            perPage: 2,
-            gap    : 0,
-            arrows : false,
-            padding: 0,
-          },
-          800: {
-            destroy: true,
-          },
-        },
-      } );
+			const options = {
+				perPage    : 3,
+				arrows     : false,
+				mediaQuery : 'max',
+				breakpoints: {
+					1200: {
+						perPage: 1,
+						gap    : '1rem',
+						arrows : true,
+						padding: 50,
+					},
+					1000: {
+						perPage   : 2,
+						gap       : 0,
+						arrows    : false,
+						padding   : 0,
+						pagination: false,
+					},
+					800 : {
+						destroy: true,
+					},
+				},
+			}
 
-      splide.mount();
+	    new Splide( '#splide01', options ).mount();
+	    new Splide( '#splide02', options ).mount();
     } );
   </script>
 </head>
@@ -53,14 +55,24 @@ $settings = get_settings();
 			<?php render_slides(); ?>
 		</div>
 	</div>
+</div>
 
-	<div class="splide__arrows">
-		<div class="splide__arrow splide__arrow--prev">
-			←
+<div id="splide02" class="splide">
+	<div class="splide__track">
+		<div class="splide__list">
+			<?php render_slides(); ?>
 		</div>
-		<div class="splide__arrow splide__arrow--next">
-			→
+
+		<div class="splide__arrows">
+			<button class="splide__arrow splide__arrow--prev">
+				←
+			</button>
+			<button class="splide__arrow splide__arrow--next">
+				→
+			</button>
 		</div>
+
+		<div class="splide__pagination"></div>
 	</div>
 </div>
 

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

@@ -28,6 +28,17 @@ $settings = get_settings();
 	      rewindByDrag: true,
 	      padding     : 40,
 	      updateOnMove: true,
+	      direction   : 'ltr',
+	      height      : undefined,
+	      paginationDirection: 'ttb',
+
+	      breakpoints: {
+					1200: {
+						direction: 'ttb',
+						height   : 500,
+						perPage  : 2,
+					}
+	      }
       } );
 
 	    // splide.on( 'move', function () {

src/js/test/php/examples/live-regions.php

@@ -22,7 +22,7 @@ $settings = get_settings();
 	      type        : 'loop',
 	      width       : 480,
 	      rewind      : true,
-	      live        : true,
+	      live        : false,
 	      speed       : 600,
 	      arrowPath   : 'm13.5 7.01 13 13m-13 13 13-13',
 	      updateOnMove: true,

src/js/types/options.ts

@@ -102,12 +102,6 @@ export interface Options extends ResponsiveOptions {
    */
   keyboard?: boolean | string;
 
-  /**
-   * Enables keyboard shortcuts for the pagination, recommended by W3C.
-   * The default value is `true`.
-   */
-  paginationKeyboard?: boolean;
-
   /**
    * Enables navigation by the mouse wheel.
    * Set `waitForTransition` to `ture` or provide the `sleep` duration.
@@ -352,6 +346,18 @@ export interface ResponsiveOptions {
    */
   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()`.
    */