Breakpoints feature

Created on 18 April 2024, 7 months ago

The new version is ready with this feature that was requested through several issues here. Please take a look into attached screenshots, the idea was to reference other Swiper template (via entity_reference field) that would serve as a breakpoint template. Rather than adding more options directly into a main template that can make the whole UI more messy but also would require more work in case there are new properties (options) to be added to a breakpoint template.

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 two reasons:
1. Make form more condensed, UX wise
2. Secure that no unsupported option end into breakpoint property object in JS. Swiper is very "delicate" on this things.

For the moment the following breakpoint properties are included:

  • breakpointsBase
  • slidesPerView
  • spaceBetween
  • slidesPerGroup
  • Navigation
  • Pagination (with two flags for bullets case)

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
drush updb

Additional here 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:
drush cim --partial --source="modules/contrib/swiper_formatter/config/install/optional"

In favor of this feature there are a couple of related Swiper's options added as well, such as Breakpoint base, Update on window resize, Use ResizeObserver, Space between slides and Number of slides per group. As usual - careful with combinations :)

There is also a new method in JS, Swiper's _beforeBreakpoint 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.

Feature request
Status

Needs review

Version

2.0

Component

Code

Created by

🇳🇱Netherlands nk_

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

Production build 0.71.5 2024