From ce16428ca5b63f5cc31ab583250b1d4c106fe9b0 Mon Sep 17 00:00:00 2001 From: Sergiu Cazac Date: Thu, 5 Dec 2024 15:47:02 +0200 Subject: [PATCH 1/2] Allow using a CSS selector as breakpointsBase --- src/core/breakpoints/setBreakpoint.mjs | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/core/breakpoints/setBreakpoint.mjs b/src/core/breakpoints/setBreakpoint.mjs index 453f9ef47..95b009baf 100644 --- a/src/core/breakpoints/setBreakpoint.mjs +++ b/src/core/breakpoints/setBreakpoint.mjs @@ -10,8 +10,10 @@ export default function setBreakpoint() { 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); + // Get breakpoint for window/container width and update parameters + const breakpointsBase = params.breakpointsBase === 'window' || !params.breakpointsBase ? params.breakpointsBase : 'container'; + const breakpointContainer = params.breakpointsBase === 'window' || !params.breakpointsBase ? el : el.closest(params.breakpointsBase); + const breakpoint = swiper.getBreakpoint(breakpoints, breakpointsBase, breakpointContainer); if (!breakpoint || swiper.currentBreakpoint === breakpoint) return; From f8976250e49176e06d2611b9102c5f37c169cc4c Mon Sep 17 00:00:00 2001 From: Sergiu Cazac Date: Thu, 5 Dec 2024 16:41:53 +0200 Subject: [PATCH 2/2] Fix to use document selector instead of closets as the el can be inside shadow DOM --- src/core/breakpoints/setBreakpoint.mjs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/core/breakpoints/setBreakpoint.mjs b/src/core/breakpoints/setBreakpoint.mjs index 95b009baf..6b6bee701 100644 --- a/src/core/breakpoints/setBreakpoint.mjs +++ b/src/core/breakpoints/setBreakpoint.mjs @@ -12,7 +12,7 @@ export default function setBreakpoint() { // Get breakpoint for window/container width and update parameters const breakpointsBase = params.breakpointsBase === 'window' || !params.breakpointsBase ? params.breakpointsBase : 'container'; - const breakpointContainer = params.breakpointsBase === 'window' || !params.breakpointsBase ? el : el.closest(params.breakpointsBase); + const breakpointContainer = ['window', 'container'].includes(params.breakpointsBase) || !params.breakpointsBase ? params.el : document.querySelector(params.breakpointsBase); const breakpoint = swiper.getBreakpoint(breakpoints, breakpointsBase, breakpointContainer); if (!breakpoint || swiper.currentBreakpoint === breakpoint) return;