>>> [!note] Migrated issue <!-- Drupal.org comment --> <!-- Migrated from issue #3441764. --> Reported by: [nk_](https://www.drupal.org/user/137658) >>> <p>The new 2.0.x version is pushed and ready for testing (also 2.0.1-beta4 release) on this feature that was requested through several issues here. Please take a look into attached screenshots, the idea was to reference other Swiper templates (via <em>entity_reference</em> field) that would serve as a breakpoint templates. Rather than adding more options directly into a main template/config form, which can make the whole UI more messy, but also would require more work in perspective, in case there are new properties (options) to be added to a breakpoint template as breakpoints properties.</p> <p>Note also that when you check the template to be a breakpoint template (checkbox) many unsupported properties/fields on the form will be invisible and disabled, for three reasons:</p> <ol> <li>Swiper template flagged as a breakpoint won't be visible where it's not applicable, on various formatters settings, as it is always meant to be bind to a parent/main template.</li> <li>Make Swiper template form more condensed, UX wise, in case of breakpoint kind of template</li> <li>Secure that no unsupported option ends into breakpoint property object in JS. Swiper is very "delicate" on this things.</li> </ol> <p>For the moment the following breakpoint properties are included: </p> <ul> <li>breakpointsBase</li> <li>slidesPerView</li> <li>spaceBetween</li> <li>slidesPerGroup</li> <li>navigation</li> <li>pagination (with clickable and dynamicBullets flags)</li> </ul> <p>It should be possible to use breakpoints defined in pixels but also as "ratio breakpoints" with values like <code>@0.75</code> etc. See <a href="https://swiperjs.com/swiper-api#param-breakpoints">here</a>.</p> <p>Because of the new properties, as well as some other properties (unrelated to breakpoints) added and coming in this version, make sure to run DB update script<br> <code>drush updb</code></p> <p>I am attaching 3 templates seen on screenshots, as an example of the setup with main template and two breakpoints (480 and 960). These will be added to a new installations but can be also imported (for existing installations) through Config sync UI in Drupal or via drush:<br> <code>drush cim --partial --source="modules/contrib/swiper_formatter/config/install/optional"</code></p> <p>In favor of this feature there are a couple of related Swiper's options added as well, such as <em>Breakpoint base</em>, <em>Update on window resize</em>, <em>Use ResizeObserver</em>, <em>Space between slides</em> and <em>Number of slides per group</em>. As usual - careful with combinations :)</p> <p>There is also a new method in JS, Swiper's <code>_beforeBreakpoint</code> event listener for a proper handling of (browser) window resize action in case of pagination with different properties in main and breakpoint templates. In fact, this method is made only to slightly improve and be useful for developers, because without it pagination breakpoint specifics are actually also working on defined viewports/devices or on page reload in browser.</p> >>> [!note] Pre-migration files - [Screenshot 2024-04-18 at 12.07.22.png](https://www.drupal.org/files/issues/2024-04-18/Screenshot%202024-04-18%20at%2012.07.22.png) - [Screenshot 2024-04-18 at 12.06.52.png](https://www.drupal.org/files/issues/2024-04-18/Screenshot%202024-04-18%20at%2012.06.52.png) - [Screenshot 2024-04-18 at 12.06.14.png](https://www.drupal.org/files/issues/2024-04-18/Screenshot%202024-04-18%20at%2012.06.14.png) - [swiper\_formatter.swiper\_formatter.responsive\_breakpoints.yml](https://www.drupal.org/files/issues/2024-04-18/swiper_formatter.swiper_formatter.responsive_breakpoints.yml) - [swiper\_formatter.swiper\_formatter.breakpoint480\_template.yml](https://www.drupal.org/files/issues/2024-04-18/swiper_formatter.swiper_formatter.breakpoint480_template.yml) - [swiper\_formatter.swiper\_formatter.breakpoint960\_template.yml](https://www.drupal.org/files/issues/2024-04-18/swiper_formatter.swiper_formatter.breakpoint960_template.yml) >>>