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.

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 for fast, modern performance.
• Automatic Height Adjustment based on each slide’s content.
• Play/Pause Controls & Progress Bar with customizable timing.
• Full Keyboard Support (arrows, spacebar).
• Touch & Swipe Navigation on mobile.
• Navigation Options: dots, numbers, or none.
• Accessibility-Focused Rendering with proper aria-hidden, tabindex, and inert-state handling.
• Hover Pause, Pause on Tab Switch, and Reduced Motion Detection.
• Hero Slideshow Mode for full-width, content-overlay designs.
• Dynamic Content sourced directly from Views.
• Responsive Resize Handling for all breakpoints.

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:

// Navigate to slide 3 in the 'gallery' slideshow
Drupal.vvjs.goToSlide('gallery', 3);

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

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

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:

• Slide timing (3–15 seconds or manual).
• Navigation style (dots, numbers, or none).
• Transition style (classic, staged, dynamic).
• Animation style (fade, slide, zoom, etc.).
• Arrow placement settings.
• Hero mode settings.

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.

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 created with this plugin has a CSS class vvj-slideshow placed alongside js-view-dom-id.
• For a hero slideshow, you must choose "Row Style" as the format, with at least two fields.
• The first field must be an image. Under the formatter, it could be an image or responsive image; you cannot use a URL to an image. It can be clickable.
• All other fields will be grouped for the hero overlay text.
• The hero will collapse into a regular card on small devices.
• All items are wrapped in a <div>, the bottom navigation has its own <div>, and the slide indicator is in a separate <div>.
• An active class is added to the button and slide.

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.

back to top ☝️

Developed & Designed By: Alaa Haddad

A Personal Thank You for Your Support

Every project you see here, including this one, reflects countless hours of work driven by my passion for making Drupal better for everyone. Your support truly makes a difference, and there are a few simple ways you can help these projects grow and reach others who might benefit:

• Use & Share Feedback: Have you found this project (or any of my other work) helpful? Let me know what worked well or how it could be improved. Real user input drives better tools for the entire community.
• Click "Like" on Drupal.org: It may seem small, but liking this project on Drupal.org helps others discover and trust these tools.
• Spread the Word: Share these projects on social media, Slack groups, or anywhere Drupal folks connect. Your word of mouth helps these tools find the people who need them.
• Explore More of My Work: Check out my other projects on Drupal.org to see what else might support your workflow or inspire your next build.

W3CSS Theme (d8w3css) - Solo - W3CSS Paragraphs - Paragraphs Bundles - Amun - Amunet - Anhur - Acquia Purge Varnish - Cloudflare Purge - Reference Blocked Users - Solo Copy Blocks - Solo Utilities - PB Import - VVJA - Accordion - VVJC - 3D Carousel - VVJB - Basic Carousel - VVJF - 3D FlipBox - VVJH - Hero - VVJL - Lightbox - VVJP - Parallax - VVJR - Reveal - VVJS - Slideshow - VVJT - Tabs - Module Matrix - Selectify - Utilikit

If you have any questions, ideas, or feedback about my Drupal.org projects, I’d love to hear from you! To keep things open and helpful for the entire community, I encourage you to post directly in the project's issue queue on Drupal.org. This way, your questions and the answers can benefit others who may have the same needs.

At the end of the day, my goal is to make Drupal easier and more enjoyable for everyone, especially small businesses and site builders who want to create professional sites without extra hassle. Together, we can build something even better. Thank you for your support, and for being part of this journey!