fix(scrollbar): correctly update scrollbar on changeDirection

fixes #7263

Author: nolimits4web

src/core/core.mjs

@@ -504,7 +504,11 @@ class Swiper {
     }
 
     el.swiper = swiper;
-    if (el.parentNode && el.parentNode.host && el.parentNode.host.nodeName === swiper.params.swiperElementNodeName.toUpperCase()) {
+    if (
+      el.parentNode &&
+      el.parentNode.host &&
+      el.parentNode.host.nodeName === swiper.params.swiperElementNodeName.toUpperCase()
+    ) {
       swiper.isElement = true;
     }
 

src/modules/a11y/a11y.mjs

@@ -1,5 +1,5 @@
 import classesToSelector from '../../shared/classes-to-selector.mjs';
-import { createElement, elementIndex } from '../../shared/utils.mjs';
+import { createElement, elementIndex, makeElementsArray } from '../../shared/utils.mjs';
 
 export default function A11y({ swiper, extendParams, on }) {
   extendParams({
@@ -33,9 +33,6 @@ export default function A11y({ swiper, extendParams, on }) {
     notification.innerHTML = message;
   }
 
-  const makeElementsArray = el =>
-    (Array.isArray(el) ? el : [el]).filter((e) => !!e)
-
   function getRandomNumber(size = 16) {
     const randomChar = () => Math.round(16 * Math.random()).toString(16);
     return 'x'.repeat(size).replace(/x/g, randomChar);
@@ -297,7 +294,7 @@ export default function A11y({ swiper, extendParams, on }) {
 
     // Pagination
     if (hasClickablePagination()) {
-      const paginationEl = makeElementsArray(swiper.pagination.el)
+      const paginationEl = makeElementsArray(swiper.pagination.el);
       paginationEl.forEach((el) => {
         el.addEventListener('keydown', onEnterOrSpaceKey);
       });
@@ -322,7 +319,7 @@ export default function A11y({ swiper, extendParams, on }) {
 
     // Pagination
     if (hasClickablePagination()) {
-      const paginationEl = makeElementsArray(swiper.pagination.el)
+      const paginationEl = makeElementsArray(swiper.pagination.el);
       paginationEl.forEach((el) => {
         el.removeEventListener('keydown', onEnterOrSpaceKey);
       });

src/modules/navigation/navigation.mjs

@@ -1,4 +1,5 @@
 import createElementIfNotDefined from '../../shared/create-element-if-not-defined.mjs';
+import { makeElementsArray } from '../../shared/utils.mjs';
 
 export default function Navigation({ swiper, extendParams, on, emit }) {
   extendParams({
@@ -19,8 +20,6 @@ export default function Navigation({ swiper, extendParams, on, emit }) {
     prevEl: null,
   };
 
-  const makeElementsArray = (el) => (Array.isArray(el) ? el : [el]).filter((e) => !!e);
-
   function getEl(el) {
     let res;
     if (el && typeof el === 'string' && swiper.isElement) {

src/modules/pagination/pagination.mjs

@@ -1,6 +1,11 @@
 import classesToSelector from '../../shared/classes-to-selector.mjs';
 import createElementIfNotDefined from '../../shared/create-element-if-not-defined.mjs';
-import { elementIndex, elementOuterSize, elementParents } from '../../shared/utils.mjs';
+import {
+  elementIndex,
+  elementOuterSize,
+  elementParents,
+  makeElementsArray,
+} from '../../shared/utils.mjs';
 
 export default function Pagination({ swiper, extendParams, on, emit }) {
   const pfx = 'swiper-pagination';
@@ -44,8 +49,6 @@ export default function Pagination({ swiper, extendParams, on, emit }) {
   let bulletSize;
   let dynamicBulletIndex = 0;
 
-  const makeElementsArray = (el) => (Array.isArray(el) ? el : [el]).filter((e) => !!e);
-
   function isPaginationDisabled() {
     return (
       !swiper.params.pagination.el ||

src/modules/scrollbar/scrollbar.mjs

@@ -1,5 +1,5 @@
 import { getDocument } from 'ssr-window';
-import { createElement, elementOffset, nextTick } from '../../shared/utils.mjs';
+import { createElement, elementOffset, makeElementsArray, nextTick } from '../../shared/utils.mjs';
 import createElementIfNotDefined from '../../shared/create-element-if-not-defined.mjs';
 import classesToSelector from '../../shared/classes-to-selector.mjs';
 import classesToTokens from '../../shared/classes-to-tokens.mjs';
@@ -301,6 +301,17 @@ export default function Scrollbar({ swiper, extendParams, on, emit }) {
     disableDraggable();
   }
 
+  on('changeDirection', () => {
+    if (!swiper.scrollbar || !swiper.scrollbar.el) return;
+    const params = swiper.params.scrollbar;
+    let { el } = swiper.scrollbar;
+    el = makeElementsArray(el);
+    el.forEach((subEl) => {
+      subEl.classList.remove(params.horizontalClass, params.verticalClass);
+      subEl.classList.add(swiper.isHorizontal() ? params.horizontalClass : params.verticalClass);
+    });
+  });
+
   on('init', () => {
     if (swiper.params.scrollbar.enabled === false) {
       // eslint-disable-next-line
@@ -311,7 +322,7 @@ export default function Scrollbar({ swiper, extendParams, on, emit }) {
       setTranslate();
     }
   });
-  on('update resize observerUpdate lock unlock', () => {
+  on('update resize observerUpdate lock unlock changeDirection', () => {
     updateSize();
   });
   on('setTranslate', () => {

src/shared/utils.mjs

@@ -316,7 +316,9 @@ function elementOuterSize(el, size, includeMargins) {
   }
   return el.offsetWidth;
 }
-
+function makeElementsArray(el) {
+  return (Array.isArray(el) ? el : [el]).filter((e) => !!e);
+}
 export {
   animateCSSModeScroll,
   deleteProps,
@@ -341,4 +343,5 @@ export {
   elementParents,
   elementTransitionEnd,
   elementOuterSize,
+  makeElementsArray,
 };