Swiper formatter

Overview

Integration with up to date version of one of the most modern swiping/sliding libraries. Swiper is mobile first, layout and gestures wise, it provides great amount of options for designing your own widget and related events.

This module is not meant to be yet another images slider, or such. It is rather a swiping UI widget for almost any kind of content, and in both directions horizontal and vertical - markup/text fields, media fields (i.e. video), content entity references fields, Paragraphs, Views content in the classic way, some type of fields within Views etc.

Features

• A solid group of Swiper parameters are included and mostly tested. Note that combinations of some particular ones are not meant by Swiper.js design.
• Configuration Entity implementation. Those entities are unique sets of configurations (which become parameters and modules for Swiper.js definition in front-end) and there can be unlimited number of these, each ready as a sort of pre-defined template for usage on Field formatter settings or in the Views.
• Views style plugin "Swiper formatter" which will turn any View into a swiping game (see more below about advanced usage).
• Swiper markup field formatter plugin for text field types - renders slides from any kind of text/markup, coming from text fields, including rich text fields.
• Swiper images field formatter plugin for image type of fields. It extends on a current image formatter and respects all of parent settings, such as Image style and Image link. Additionally Lazy Loading Swiper module can be used for images.
• Swiper entity field formatter plugin, currently basic tested on Media entity reference field as well as Content entity reference field. More to follow.
• Swiper paragraphs field formatter plugin for Paragraphs (as slides).
• Each Swiper.js instance is fully unique so we can have as many, and as different or the same, in parallel on the same page.
• Captions for slides can be any multiple values fields of text type belonging to a same entity. For images this can be Alt or Title sub-fields as well.
• Swiper.js modules integrated: Pagination, Navigation, Autoplay, Lazy Loading (for images).
• PHP 8.x version compatibility.

Features in version 2.0.x

• Breakpoints - see this issue and last two screenshots above
• A couple of new Swiper properties/fields, such as Scrollbar module, Mousewheel, Slides per group, Space between, Update on window resize, Resize observer
• Drupal 11 compatibility
• PHP 8.3 version compatibility.
• Swiper @11 (when loaded from remote CDN)

Swiper.js documentation

Please check out Swiper.js extensive API for more in depth documentation.

Swiper Versions

• For Drupal 10+ recommended branch is 2.0.xwith Swiper @11
• For Drupal 8.8 and 9 use 1.0.7. Uses Swiper @8

Use

1. Make sure "Administer Swiper formatter" permission is set for operating user.
2. Visit "Configuration > Content authoring > Swipers" and create your first swiper template.
3. Configure Field formatter or a View style

• a. For a field, on a Node for instance, go to "Manage display" for the content type in question and set appropriate formatter, either for image type of field or text type of field. Or both!
• b. For a view style - either on existing or a new view display set "Swiper formatter" for a format and assign the rest of the settings found there.

Advanced usage in Views

This module provides possibility for at least three different ways for using with Views:

1. Most common usage, just any regular View display having "Swiper formatter" set for "Format" whereas both fields and content with a view mode ("Show: Fields" and "Show: Content") will work. Everything that is one view result or #row will become one slide.
2. In case of Content formatted view (with usage of View mode) field enabled in such, with any swiper formatter should work, being part of the result.
3. It is possible to use a single field, say multiple values field (images or text) belonging to multiple entities returned as a view result to render in Swiper in sequential order - i.e.:
   • Node[delta=0]
     • Image[delta0 = 0]
     • Image[delta0 = 1]
     • Image[delta0 = 2]
   • Node[delta=1]
     • Image[delta0 = 3]
     • Image[delta1 = 4]

   For this you'd need to have only one multiple values field (or may be maximum two fields in a View if setting one for Captions) which would have"Display all values in the same row" turned of within "Multiple field settings" for that field.

Similar projects and what's new here

• Swiper
• Views Swiper Style
• Swiper Slider
• Reference Swiper

Contrary to already existing contributed modules for Swiper.js, this module brings somewhat different concept, by taking advantage of Configuration Entity. Those entities are unique sets of configurations (which become parameters and modules for Swiper.js definition in front-end) and there can be unlimited number of these, each ready as a sort of pre-defined template for usage on Field formatter settings or in the Views. Additionally this module contains:

• A real big number of Swiper.js parameters and modules are integrated and configurable in UI with Drupal config entity form.
• Swiper formatter implements the latest version of Swiper.js, currently that is 8.x.x.
• Likewise the field formatter for Image type of field, this module has additional one, for text/markup type of fields that can be wrapped in a swiper, on a node page for instance.
• Each Swiper.js instance on a single page is fully unique meaning that many can run in parallel with unique or same or similar options.
• There is a extended coverage for Views, see above in Advanced usage section.
• Module is compatible with the PHP 8.2 version (1.0.x) and PHP 8.3 version (2.0.x)

Dependencies

Swiper.js library, either from CDN or from libraries/ folder, manually downloaded, see instructions on Swiper config entity form for using it locally.

TODO

• Develop CKEditor5 plugin
• Create command for Swiper package updates, development and custom builds.