Views Slideshow turns a Drupal View into an accessible, autoplaying slideshow — or a full-width hero banner with overlay content — built in vanilla JavaScript with deep linking and a JavaScript API for custom controls. It is a Views style plugin, machine name vvjs, with no jQuery dependency at all.
Two display modes, one module
Views Slideshow does two distinct jobs depending on how you configure it:
- Standard slideshow — any number of fields per row, cycling through slides with autoplay, arrows, dots or numbered navigation.
- Hero slideshow — a full-width banner where the first field is an image or media field and every other field becomes overlay content (heading, text, a button) positioned over the image in one of twelve layouts.
Both modes share the same configuration screen and the same underlying engine, so switching a standard slideshow into a hero banner is a checkbox, not a rebuild.
Requirements
| Requirement | Value |
|---|---|
| Drupal core | ^11.3 || ^12 |
| PHP | 8.3+ |
| Core modules | Views, Filter |
| Contributed dependency | VVJ Core — required by every VVJ v2 module, pulled in automatically by Composer |
There is no Drupal 10 support on the 2.x branch. If you need Drupal 10, install the 1.x series; for a path off Drupal 10 entirely, that migration is work I do.
Row structure
Set the row style to Fields. Every view built with this plugin carries the CSS class vvj-slideshow alongside js-view-dom-id. For hero mode, the first field must be an Image or Media field using an image or responsive image formatter — not a plain URL field — and it can be clickable. All remaining fields render as the overlay content. Slides sit in one wrapper element, navigation in another, and indicators (arrows and dots) in a third; the active slide and its matching nav control both receive an active class.
Configuration
| Setting | Controls |
|---|---|
| Auto-advance timing | Off, or an interval between roughly 2 and 15 seconds per slide |
| Navigation | None, dot indicators, or numbered indicators |
| Arrows | None, sides, sides on large screens only, top, or top on large screens only |
| Slide animation | None, zoom, fade, or slide from top, bottom, left or right |
| Transition type | When animation is off: instant switch, or crossfade — classic, staged, or dynamic — with a duration between 200ms and 2000ms |
| Show total slides / progress bar / play-pause | Independent toggles for a "1 of N" counter, an animated progress bar, and a play/pause control |
| Pause on hover, looping, swipe, keyboard | Independent on/off toggles for each behavior |
| Start index | Which slide shows first — useful for staggered layouts with multiple slideshows on one page |
| Responsive breakpoint | 576, 768, 992, 1200 or 1400px, controlling layout and "large screens only" arrow behavior |
| Hero layout | Minimum height, maximum content width, overlay position (12 options), overlay background color and opacity |
| Enable CSS library | Turn the shipped stylesheet off for full custom styling |
Deep linking to a specific slide
Turn on deep linking and set a URL identifier (for example gallery), and each slide gets a shareable URL fragment such as #gallery-3. A visitor can bookmark a slide, share it directly, or land on it from an external link rather than the first slide every time — useful for portfolio pieces, individual products in a gallery, or a specific step in an educational sequence.
JavaScript API
Every instance is reachable through Drupal.vvjs by its deep-link identifier, so you can drive a slideshow from a separate thumbnail view, an external control, or an analytics hook without touching the module's internals:
Drupal.vvjs.goToSlide('gallery', 3);
Drupal.vvjs.nextSlide('gallery');
Drupal.vvjs.prevSlide('gallery');
const current = Drupal.vvjs.getCurrentSlide('gallery');
const total = Drupal.vvjs.getTotalSlides('gallery');
const paused = Drupal.vvjs.isPaused('gallery');
Drupal.vvjs.pause('gallery');
Drupal.vvjs.resume('gallery');
Drupal.vvjs.pauseAll();
Drupal.vvjs.resumeAll();
const instance = Drupal.vvjs.getInstance('#vvjs-12345'); //
const all = Drupal.vvjs.getAllInstances(); Typical uses: a separate thumbnail view that drives the main slideshow, custom navigation placed in a menu or block, jumping to a slide based on a filter or search result, or synchronizing two related slideshows.
Accessibility
Views Slideshow ships ARIA roles for announcing slide changes, full keyboard support — arrow keys to navigate, Space to pause or play, Home and End for the first and last slide — swipe support on touch devices, focus management so only the active slide is reachable, and reduced-motion handling for visitors who have asked their operating system to limit animation.
Custom tokens in Views header and footer
With Global: Text area or Global: Unfiltered text and "Use replacement tokens from the first row" enabled, Drupal's default tokens will not resolve. Use the module's own tokens instead — {{ title }} becomes [vvjs:title], {{ field_image }} becomes [vvjs:field_image] — and append :plain to strip HTML, as in [vvjs:title:plain]. Complex rewrite expressions with embedded tokens are not supported; reference individual fields instead. Resolution runs through the shared vvj_core.token_resolver service in v2, with the same token syntax as v1.
Installation
composer require drupal/vvjs
drush en vvjs -y
drush crThen edit your view, choose Views Vanilla JavaScript Slideshow as the format, and configure it under Format Settings.
A known limitation
Views Slideshow does not support the Views Grouping Field feature — grouping rows by a field is not compatible with the current implementation, so avoid combining the two.
Common questions
Can I run a hero banner and a regular gallery on the same site?
Yes — hero mode is a per-view setting, not a separate module, so you can run both patterns from the same codebase.
What happens to the hero layout on mobile?
It collapses to a regular stacked card below your configured responsive breakpoint rather than trying to preserve the overlay at a width where it would not read well.
Can I link directly to slide 3 of a gallery?
Yes, if deep linking is enabled and given a URL identifier — the resulting fragment (like #gallery-3) is shareable and bookmarkable.
Do I need custom JavaScript to build a thumbnail navigator?
No custom module code — the Drupal.vvjs API is designed for exactly this: a separate thumbnails view calling goToSlide() on the main slideshow.
Will it run on Drupal 10?
Not on the 2.x branch, which requires Drupal 11.3 or later, or Drupal 12. Stay on 1.x for Drupal 10.
Related modules
Views Slideshow is one of ten Views display styles built on the same VVJ Core foundation. For a two-state interaction instead of a sequence, see Views Reveal; for a label-driven set of panes, see Views Tabs. Pages built with Paragraphs Bundles can use the same slideshow engine without a view at all.
Need a slideshow or hero banner built properly?
Views Slideshow is free and GPL-licensed, like all my contributed work. If you want a hero banner, product gallery or portfolio built around it, or a Drupal 10 to 11/12 upgrade so you can run the current branch, that is my day job. Read about my Drupal services, see what a Drupal developer handles day to day, or get in touch.
