Views Slideshow - Views Vanilla JavaScript Slideshow (VVJS)

The Vanilla Views suite F.L.A.S.H.C.R.P.T.B FlashCrptb is a collection of ten powerful Drupal modules designed to enhance the visual and interactive experience of Drupal Views using pure, lightweight Vanilla JavaScript. Originally developed as Paragraphs Bundles, these modules Accordion, Basic Carousel, 3D Carousel, 3D FlipBox, Hero, Lightbox, Parallax, Reveal, Slideshow, and Tabs.

Additionally, I have created a demo for each module: Accordion Demo, 3D Carousel Demo, Carousel Demo, 3D FlipBox Demo, Hero Demo, Lightbox Demo, Parallax Demo, Reveal Demo, Slideshow Demo, and Tabs Demo.
To get started, check out our Video Demo for a step-by-step guide on using the module effectively. Explore our mixed demos here: Live Demo One | Live Demo Two. The site for the live demo is built with the Solo Theme.

VVJ v2.x requires VVJ Core (composer require drupal/vvjs:^2.0 pulls it in automatically). Requires Drupal 11.3+ or 12 and PHP 8.3+. v2 runs front-end behavior in custom elements via the shared vvj_core foundation; token and JavaScript API details below reflect v2.

Overview

The Views Vanilla JavaScript Slideshow (VVJS) module (machine name: vvjs) is a lightweight, high-performance solution for creating dynamic and accessible slideshows directly from Drupal Views. Built entirely in vanilla JavaScript, it avoids jQuery dependencies, delivering faster performance and aligning with modern Drupal 10/11 standards.

VVJS is powered by the Awesome Slideshow Engine, a unified script used across both Views and Paragraph-based slideshows. It provides consistent behavior, improved accessibility, better mobile interaction, and robust handling of dynamic content-while keeping VVJS simple and flexible.

Key Features

• Zero jQuery dependency - vanilla JavaScript only for fast, modern performance (Drupal 10/11).
• Automatic height adjustment based on each slide’s content.
• Auto-advance timing - none, or 2–15 seconds per slide with configurable interval.
• Play/Pause button & animated progress bar when auto-advance is enabled.
• Slide counter - optional “1 of N” display.
• Navigation options - dots, numbers, or none; scrollable dots when there are many slides (configurable max width).
• Arrow placement - none, sides, sides (big screen only), top, or top (big screen only).
• Slide animations - none, zoom, fade, or slide from top/bottom/left/right.
• Transition effects - when animation is “none”: instant switch, or crossfade (classic, staged, or dynamic) with configurable duration (200–2000 ms).
• Full keyboard support - arrow keys, Space (pause/play), Home/End (first/last slide).
• Touch & swipe navigation on mobile (can be disabled).
• Pause on hover and looping (on/off).
• Start index - choose which slide is shown first (e.g. for staggered multi-slideshow layouts).
• Hero slideshow mode - full-width hero with overlay content; first field can be an Image or Media field; overlay position (12 options), background color, and opacity; responsive breakpoints.
• Responsive breakpoints - 576, 768, 992, 1200, or 1400 px for layout/arrow behavior.
• Unique ID per instance to avoid conflicts when multiple slideshows appear on one page.
• Optional default CSS - can be disabled for full custom styling.
• Accessibility - ARIA roles, aria-hidden, tabindex, focus management, live region announcements, reduced-motion handling.
• Deep linking - shareable URLs to specific slides (e.g. #gallery-3).
• Custom tokens - [vvjs:field_name] and [vvjs:field_name:plain] for Views header/footer/empty text when using “Use replacement tokens from the first row.”
• JavaScript API - programmatic control (goToSlide, pause, resume, getCurrentSlide, events) for custom thumbnails, external controls, and analytics.

New: Transition Styles

VVJS now includes multiple transition types selectable directly in the Views UI:

• Crossfade – Classic
• Crossfade – Staged
• Crossfade – Dynamic

These transitions are exposed as options in the slideshow settings and integrate seamlessly with autoplay, navigation, accessibility handling, and hero mode.

New: Deep Linking & Programmable Control

Share Specific Slides with Deep Linking

VVJS now supports deep linking, enabling users to link directly to specific slides in your slideshow. Perfect for marketing campaigns, social media sharing, and collaborative workflows, deep linking transforms your slideshow from a passive display into an interactive, shareable experience.

When enabled, each slide generates a unique URL fragment (e.g., #gallery-3) that appears in the browser's address bar. Users can bookmark favorite slides, share specific content via email or social media, and return to exactly where they left off. This feature is invaluable for:

• Portfolio showcases – link directly to featured work
• Product galleries – share specific products with customers
• Event highlights – direct visitors to key moments
• Educational content – reference specific slides in presentations
• Multi-slideshow pages – manage multiple galleries with unique identifiers

Powerful JavaScript API for Custom Integrations

Beyond deep linking, VVJS exposes a comprehensive JavaScript API that empowers developers and site builders to create custom navigation experiences without modifying the module's core. Build thumbnail galleries, integrate with custom filters, synchronize multiple slideshows, or create entirely new interaction patterns-all through a clean, documented API.

Common Use Cases:

• Custom Thumbnail Navigation – Create a separate View of thumbnails that controls the main slideshow
• External Controls – Add slideshow navigation to menus, blocks, or custom interfaces
• Programmatic Navigation – Jump to slides based on user actions, search results, or filtered content
• Analytics Integration – Track which slides receive the most engagement
• Multi-Slideshow Coordination – Synchronize related slideshows or create before/after comparisons

Simple, Intuitive API:

<pre class="codeblock"><code class="language-php">// Navigate to slide 3 in the 'gallery' slideshow (1-based index)
Drupal.vvjs.goToSlide('gallery', 3);
Drupal.vvjs.nextSlide('gallery');
Drupal.vvjs.prevSlide('gallery');

// Get current state
const current = Drupal.vvjs.getCurrentSlide('gallery');
const total = Drupal.vvjs.getTotalSlides('gallery');
const paused = Drupal.vvjs.isPaused('gallery');
const ready = Drupal.vvjs.isInitialized('gallery');

// Control playback
Drupal.vvjs.pause('gallery');
Drupal.vvjs.resume('gallery');
Drupal.vvjs.pauseAll();
Drupal.vvjs.resumeAll();

// Access custom element instances
const instance = Drupal.vvjs.getInstance('#vvjs-12345'); // &amp;lt;vvjs-slideshow&amp;gt;
const all = Drupal.vvjs.getAllInstances();

The API is designed following Drupal coding standards with comprehensive error handling, making it reliable for production use. All methods return meaningful values, enabling developers to build responsive, user-friendly interfaces that adapt to slideshow state changes.

Why This Matters: Modern websites demand flexibility. Whether you're building a portfolio for a creative agency, an e-commerce product showcase, or an educational resource library, VVJS now provides the tools to create exactly the experience your users need-without requiring custom module development or complex workarounds.

Accessibility

VVJS follows modern accessibility standards:

• Proper ARIA roles for announcing slide changes.
• Keyboard navigation out of the box.
• Focus management ensuring only the active slide is accessible.

Configuration

All options are configurable in the Views UI under Format → Settings:

• Hero slideshow - enable/disable; layout (max width, min height, content width %); overlay (position, background color, opacity).
• Responsive - breakpoint (576–1400 px) for layout and “big screen only” arrows.
• Deep linking - enable/disable; URL identifier (e.g. gallery for #gallery-3).
• Timing & auto-play - auto-advance interval (none, 2–15 seconds).
• Navigation - arrows (none, sides, sides big-screen only, top, top big-screen only); indicators (none, dots, numbers); scrollable dots max width.
• Animation & transitions - slide animation (none, zoom, fade, slide from top/bottom/left/right); when “none,” transition type (instant, crossfade classic/staged/dynamic) and duration.
• Display options - show total slide count; show progress bar; show play/pause button.
• Behavior - pause on hover; enable swipe; enable keyboard; enable looping; start index.
• Advanced - enable/disable default CSS.

Custom Tokens (Views Header/Footer)

When using Global: Text area or Global: Unfiltered text with “Use replacement tokens from the first row,” default Views tokens will not work. Use VVJS custom tokens instead:

• {{ title }} → [vvjs:title]
• {{ field_image }} → [vvjs:field_image]

Append :plain to strip HTML, e.g., [vvjs:title:plain].

Note: [vvjs:*] tokens pull data from the rendered fields. Complex rewrite expressions are not supported; use individual field tokens as needed.

v2 note: Token resolution is handled by the shared vvj_core.token_resolver service; the [vvjs:field] and [vvjs:field:plain] syntax is unchanged from v1.

Example Usage

1. Create or edit a View.
2. In the Format section, choose Views Vanilla JavaScript Slideshow.
3. Configure your slideshow options.
4. Save the view and preview the slideshow.

Dependencies

This module remains independent - no contrib dependencies required.

Installation

1. Download and install the VVJS module from Drupal.org:
   

   composer require drupal/vvjs

2. Enable the module through the Drupal admin interface or using Drush:
   

   drush en vvjs

3. Clear caches to ensure the new plugin is available:
   

   drush cr

Support

For issues, feature requests, and contributions, please visit the issue queue on Drupal.org.

Slideshow - Developer & Site Builder Tips

• Every view using this plugin gets the CSS class vvj-slideshow alongside js-view-dom-id.
• For a hero slideshow, set row style to Fields with at least two fields. The first field must be an Image or Media field (image or responsive image formatter; not a plain URL). It can be clickable. All other fields are used for the hero overlay content.
• The hero layout collapses to a regular card below the configured responsive breakpoint.
• Markup: slides in a wrapper <div>, bottom navigation in its own <div>, and slide indicator (arrows) in a separate <div>. Active slide and active nav button receive an active class.

Module Limitation Notice: Grouping Field Feature

Please note that the current version of this module does not support the
Grouping Field feature available in Drupal Views. The
"Grouping Field" option allows you to group records by a specified field,
but this functionality is not compatible with the module's current implementation.

We recommend avoiding the use of this feature with this module to ensure
proper functionality and display of your Views.

Support and maintenance

Questions, ideas, and bug reports are welcome. Please use this project’s issue queue so discussions and solutions remain available to the Drupal community.

Maintainers monitor issues, but response times depend on availability.

Developed and maintained by Alaa Haddad of Flash Web Center, LLC.

AI disclosure: AI tools assisted with drafting and reviewing this project description. The maintainer verified the final content against the project source.