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.

Overview

The Views Vanilla JavaScript Slideshow (VVJS) module (machine name: vvjs) is a lightweight, powerful solution for creating dynamic and accessible slideshows directly from Drupal Views. Built entirely in vanilla JavaScript, it avoids jQuery dependencies, ensuring faster performance and aligning with modern web development best practices.

VVJS is now powered by the Awesome Slideshow Engine, a unified, feature-rich slideshow script designed to bring consistent, modern functionality to both Views and Paragraph-based slideshows across Drupal. This upgrade ensures better accessibility, improved mobile behavior, and seamless handling of dynamic content — all while maintaining the simplicity and flexibility VVJS is known for.

Key Features

•  Zero jQuery Dependency: VVJS is fully modern, ensuring fast loading and clean integration with Drupal 10/11.
• Automatic Height Adjustment: Each slide can have different heights, and the slideshow automatically resizes to fit its content.
• Play/Pause & Progress Bar: Includes visual progress indicators and a customizable play/pause button to give users full control over autoplay.
• Keyboard Navigation: Full support for arrow keys and spacebar to navigate slides and toggle autoplay.
• Touch & Swipe Support: Mobile users can swipe left and right to move between slides.
• Navigation Options: Choose from dots, numbers, or no navigation, giving you flexibility for different designs.
• Focus & Accessibility Ready: Full aria-hidden, tabindex, and inert management ensures that only visible slides are accessible to screen readers and keyboard users.
• Hover Pause: Autoplay pauses when the user hovers over the slideshow.
• Animation Types: Choose from slide, fade, zoom, or other effects directly via the Views UI.
• Hero Slideshow Support: Easily create full-width hero slideshows with overlaid content, ideal for landing pages.
• Dynamic Content from Views: Pull slides dynamically from content (nodes, media, or any entity), with the flexibility of Views filters and relationships.
• Respects Reduced Motion Preferences: If the user has prefers-reduced-motion enabled in their operating system, animations and autoplay are automatically disabled.
• Pause on Tab Switch: Autoplay pauses automatically when the user switches tabs and resumes when they return.
• Responsive Resize Handling: The slideshow recalculates dimensions on window resize, ensuring proper layout across all devices.

Accessibility

VVJS follows modern accessibility standards to ensure that your slideshow is usable by everyone, including screen reader users:

• Full ARIA roles and properties to announce active slides.
• Keyboard navigation support out of the box.
• Focus management ensures that only the active slide is accessible, avoiding focus traps and confusion.

Configuration

You can configure VVJS directly within the Views UI after enabling the module:

• Slide Timing: Set the interval between slides (3 to 15 seconds, or static/manual).
• Navigation Style: Choose dots, numbers, or no navigation.
• Animation Style: Pick from fade, slide, zoom, and more.
• Arrow Placement: Choose whether to display slide navigation arrows at the top or sides, on all screen sizes or only on larger screens, or disable them entirely.
• Hero Mode: Enable "Hero Slideshow" to unlock additional layout and design options for full-width presentations.

Custom Token for views header/footer from first row

In Views header/footer, if you add a field using Global: Text area or Global: Unfiltered text, there is an option called "Use replacement tokens from the first row."
The default tokens will not work in this case. Please use the custom tokens created by VVJA instead.
For example:

• The default token {{ title }} should be replaced with [vvjs:title].
• The default token {{ field_image }} should be replaced with [vvjs:field_image].

You can append :plain to the token to strip any HTML.

Example: [vvjs:title:plain]

Note: The [vvjs:*] tokens pull data directly from the rendered View fields.
Fields using complex rewrites (e.g., Global: Custom text with {{ tokens }}) are not supported by default for token replacement. Please use individual field tokens like [vvjs:title], [vvjs:field_image], etc.

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
  , the bottom navigation has its own
  , and the slide indicator is in a separate
  .
• An active class is added to the button and slide.

back to top ☝️

Developed & Designed By: Alaa Haddad