Swiffy Slider

Drupal integration of Swiffy Slider.

This module provides a field formatter for the field type entity_reference and a views format.

Swiffy Slider provides a lightweight slider/carousel solution. All the sliding, dragging, snapping etc. are native browser behavior and not Javascript. Swiffy Slider can even run in a simple mode with no JS at all. Support for any input device (including touch pads, pencils, assistive devices) and 100% WCAG compatible.

How to use it

Implementation

This module ships already the required library, but it is possible to override the used version.

1. Add the following snippet to your composer.json inside repositories

{
  "type": "package",
  "package": {
    "type": "drupal-library",
    "name": "dynamicweb/swiffy-slider",
    "version": "v1.6.0",
    "dist": {
      "url": "https://github.com/dynamicweb/swiffy-slider/archive/refs/tags/v1.6.0.zip",
      "type": "zip"
    }
  }
}

2. Download the dependency

composer require dynamicweb/swiffy-slider

3. Enable the module

Field formatter

Mise en place

1. Build a multi-value media field, e. g. in the content type article
2. Create a content with at least two images in that field
3. Go to https://swiffyslider.com/configuration/ and customize the slider options, copy the "Perma link"

Configure the field formatter

1. In your content type, go to "Manage display", spot the media field
2. Under "Format", select "Swiffy Slider"
3. Click settings (the gear icon) and paste the copied Perma link

No third-party calls. The field allows the complete URL for your convenience, all customized config will be handled locally.

Views display

Have some nodes at hand (e. g. articles) and make sure you have configured a suitable teaser display (e. g. title, body trimmed to 200 characters, teaser image).

1. Add a display to a node-based view, e. g. to the frontpage view
2. Use unformatted list with teasers or fields, as you like
3. Select format: Swiffy Slider
4. Go to https://swiffyslider.com/configuration/ and customize the slider options, copy the "Perma link"
5. Paste the copied link in the Settings field "Configuration URL"

No third-party calls, as stated above.

Known issues

For some reason the loop (at the end of a list go to first item) does not work when snap behaviour is active. Any ideas welcome.

Why only a configuration URL?

Swiffy Slider has a lot of configuration options. We find it very convenient to configure everything on the Configuration page with a sample preview right in place.

Replicating all settings to the field formatter or views settings would add a lot of complexity to the Drupal back-end forms. If you think it would be worth the effort nevertheless, we'd recommend to build a complimentary module with all the settings in the Drupal back-end.