feat(core): Allow using a CSS selector as breakpointsBase (#7818)

* Allow using a CSS selector as breakpointsBase * Fix to use document selector instead of closets as the el can be inside shadow DOM * add CSS Selector to types and use swiper.el --------- Co-authored-by: Vladimir Kharlampidi <[email protected]>
nolimits4web · Jan 2, 2025 · 44d3443 · 44d3443
1 parent 21610bd
commit 44d3443
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 4 deletions.
diff --git a/src/core/breakpoints/setBreakpoint.mjs b/src/core/breakpoints/setBreakpoint.mjs
@@ -1,3 +1,4 @@
+import { getDocument } from 'ssr-window';
 import { extend } from '../../shared/utils.mjs';
 
 const isGridEnabled = (swiper, params) => {
@@ -9,9 +10,19 @@ export default function setBreakpoint() {
   const { realIndex, initialized, params, el } = swiper;
   const breakpoints = params.breakpoints;
   if (!breakpoints || (breakpoints && Object.keys(breakpoints).length === 0)) return;
-
-  // Get breakpoint for window width and update parameters
-  const breakpoint = swiper.getBreakpoint(breakpoints, swiper.params.breakpointsBase, swiper.el);
+  const document = getDocument();
+
+  // Get breakpoint for window/container width and update parameters
+  const breakpointsBase =
+    params.breakpointsBase === 'window' || !params.breakpointsBase
+      ? params.breakpointsBase
+      : 'container';
+  const breakpointContainer =
+    ['window', 'container'].includes(params.breakpointsBase) || !params.breakpointsBase
+      ? swiper.el
+      : document.querySelector(params.breakpointsBase);
+
+  const breakpoint = swiper.getBreakpoint(breakpoints, breakpointsBase, breakpointContainer);
 
   if (!breakpoint || swiper.currentBreakpoint === breakpoint) return;
 

diff --git a/src/types/swiper-options.d.ts b/src/types/swiper-options.d.ts
@@ -741,7 +741,7 @@ export interface SwiperOptions {
    *
    * @default 'window'
    */
-  breakpointsBase?: 'window' | 'container';
+  breakpointsBase?: 'window' | 'container' | CSSSelector;
 
   // Observer
   /**