feat(core): possible to enable breakpoints based on container width (instead of window width)

fixes #4244

Author: nolimits4web

src/components/core/breakpoints/getBreakpoint.js

@@ -1,15 +1,17 @@
 import { getWindow } from 'ssr-window';
 
-export default function getBreakpoints(breakpoints) {
-  const window = getWindow();
-  // Get breakpoint for window width
-  if (!breakpoints) return undefined;
+export default function getBreakpoint(breakpoints, base = 'window', containerEl) {
+  if (!breakpoints || (base === 'container' && !containerEl)) return undefined;
   let breakpoint = false;
 
+  const window = getWindow();
+  const currentWidth = base === 'window' ? window.innerWidth : containerEl.clientWidth;
+  const currentHeight = base === 'window' ? window.innerHeight : containerEl.clientHeight;
+
   const points = Object.keys(breakpoints).map((point) => {
     if (typeof point === 'string' && point.indexOf('@') === 0) {
       const minRatio = parseFloat(point.substr(1));
-      const value = window.innerHeight * minRatio;
+      const value = currentHeight * minRatio;
       return { value, point };
     }
     return { value: point, point };
@@ -18,7 +20,7 @@ export default function getBreakpoints(breakpoints) {
   points.sort((a, b) => parseInt(a.value, 10) - parseInt(b.value, 10));
   for (let i = 0; i < points.length; i += 1) {
     const { point, value } = points[i];
-    if (value <= window.innerWidth) {
+    if (value <= currentWidth) {
       breakpoint = point;
     }
   }

src/components/core/breakpoints/setBreakpoint.js

@@ -7,7 +7,7 @@ export default function setBreakpoint() {
   if (!breakpoints || (breakpoints && Object.keys(breakpoints).length === 0)) return;
 
   // Get breakpoint for window width and update parameters
-  const breakpoint = swiper.getBreakpoint(breakpoints);
+  const breakpoint = swiper.getBreakpoint(breakpoints, swiper.params.breakpointsBase, swiper.el);
 
   if (breakpoint && swiper.currentBreakpoint !== breakpoint) {
     const breakpointOnlyParams = breakpoint in breakpoints ? breakpoints[breakpoint] : undefined;

src/components/core/defaults.js

@@ -48,6 +48,7 @@ export default {
 
   // Breakpoints
   breakpoints: undefined,
+  breakpointsBase: 'window',
 
   // Slides grid
   spaceBetween: 0,

src/types/swiper-options.d.ts

@@ -722,6 +722,15 @@ export interface SwiperOptions {
     [ratio: string]: SwiperOptions;
   };
 
+  /**
+   * Base for breakpoints (beta). Can be `window` or `container`. If set to `window` (by default) then breakpoint keys mean window width. If set to `container` then breakpoint keys treated as swiper container width
+   *
+   * @default 'window'
+   *
+   * @note Currently in beta and not supported by Swiper Angular, React, Svelte and Vue components
+   */
+  breakpointsBase?: string;
+
   // Observer
   /**
    * Set to `true` to enable Mutation Observer on Swiper and its elements. In this case Swiper will be updated (reinitialized) each time if you change its style (like hide/show) or modify its child elements (like adding/removing slides)