Media Scroller

Introduction

Media Scroller adds a Media Scroller field formatter that turns an image field into a responsive slider, with a synchronized strip of thumbnails underneath. It works with core Image fields and with
Media reference fields that point to the Image media type, so you can use it on any content type without building a View.

If the PhotoSwipe module is installed, clicking a slide opens the full-size original in a lightbox with zoom and next/previous navigation. Without it, the slider works exactly the
same, minus the lightbox.

Project Summary

Show an image or media field as a Slick-powered slider with thumbnail, dot and arrow navigation, and an optional PhotoSwipe lightbox — all configured from Manage display.

Features

• One formatter for both Image fields and Media reference fields using the Image media type.
• A main slider plus a thumbnail strip that stay in sync: moving the slider highlights its thumbnail, and clicking a thumbnail moves the slider.
• Three independent pager controls Thumbnails, Dots and Arrows that can be combined in any way, including none at all.
• Separate image styles for the main slider and the thumbnails, plus a configurable thumbnail height.
• Slide or Fade animation, at a Slow, Medium or Fast transition speed.
• Optional PhotoSwipe lightbox that opens the original, full-size image. Image dimensions are read from the file when the field doesn't record them, so the lightbox always sizes correctly.
• No forced aspect ratio or cropping: each slide keeps the proportions of its image style, so portrait and landscape images can be mixed in the same field.
• Image alt text is carried through to every slide and thumbnail. For media, the media item's name is used when the image has no alt text.
• Responsive and mobile-friendly, with any number of sliders on the same page.

Post-Installation

After installing the module:

1. Install the Slick JavaScript library so that web/libraries/slick/slick/slick.min.js exists. The README explains how to do this by hand or through your project's root composer.json.
2. Go to Structure → Content types → [your type] → Manage display.
3. Choose Media Scroller as the format for an Image field, or for a Media reference field that targets Image media.
4. Open the formatter settings to pick the image styles, animation, speed and pager controls, then save.
5. Optionally, install and enable the PhotoSwipe module (and its library) to get the lightbox. No further configuration is needed on the formatter.

Additional Requirements

• Drupal 10.3+ or 11
• Core modules: Image, and Media for Media reference fields
• Slick module and the Slick JavaScript library (1.8.1)
• Optional: PhotoSwipe module and library, for the lightbox

Composer installs the Slick module for you, but not the Slick or PhotoSwipe JavaScript libraries; see the README for both.

Similar projects

The Slick module itself, together with
Blazy, offers its own highly configurable formatters and optionsets.
Media Scroller is deliberately simpler: it builds on Slick to provide one ready-made slider-plus-thumbnails layout, with a handful of settings on the field formatter and no optionsets to manage.

Supporting this Module

Bug reports, feature requests, patches, and documentation improvements are welcome through the Drupal.org issue
queue.

Community Documentation

Documentation is available in the project repository's README, including installing the Slick and PhotoSwipe libraries and every formatter setting.

The module is fully compatible with Drupal 11.