Views Carousel - Views Vanilla JavaScript Carousel (VVJB)

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/vvjb:^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 Basic Carousel module (machine name: vvjb) allows you to create accessible, responsive, and configurable carousels for displaying content items on your Drupal site. Seamlessly integrated with the Views module, this module introduces a new display style that can be selected when creating or editing views. Built using pure vanilla JavaScript, the VVJB module avoids jQuery dependencies, ensuring a lightweight and modern user experience.

Features

• No jQuery: Uses vanilla JavaScript for better performance, lower load times, and modern architecture.
• Basic Carousel Format: Renders content items in a horizontally or vertically scrollable carousel.
• Orientation Control: Choose horizontal, vertical, or hybrid orientation for responsiveness across screen sizes.
• Items Per Screen: Customize the number of items shown on small and large screens independently.
• Optional Item Width: Set fixed widths per item for fine-tuned layout control.
• Gap Management: Configure the gap (spacing) between items using pixel values.
• Looping Support: Optionally loop back to the beginning after the last item is shown.
• Navigation Styles: Choose from arrows, dots, both, or none to suit your design needs.
• Autoplay with Play/Pause: Enable automatic slide transitions and provide play/pause controls.
• Autoplay Interval: Set transition intervals between 1000 and 15000 milliseconds.
• Keyboard Navigation: Supports intuitive navigation using arrow keys and space bar.
• Touch and Swipe Support: Built-in gesture support for smooth mobile interactions.
• Accessibility-Enhanced: Includes ARIA roles and live regions to support screen reader users.
• Hover Pause: Pauses autoplay when hovering over the carousel and resumes when the mouse leaves.
• Pause on Tab Switch: Autoplay pauses automatically when switching tabs to preserve user context.
• Reduced Motion Support: Respects the user's reduced motion preferences for accessibility.
• Unique ID Generation: Prevents DOM conflicts by assigning unique IDs to each instance.
• Responsive Dynamic Slide Fitting: Automatically adjusts the number of visible slides based on available page width, even before breakpoints are reached. The configured “small” and “big” item counts act as maximums, allowing the carousel to reduce slides dynamically to fit within the viewport without overflow, ensuring a cleaner, contained, and user-friendly experience on large screens during browser resizing.

Accessibility

The Views Vanilla JavaScript Basic Carousel module is designed with accessibility in mind, ensuring that your carousels are usable by all visitors, including those using screen readers. Accessibility features include:

• ARIA Roles and Properties: Provides semantic context and state updates for assistive technologies.
• Keyboard Navigation: Navigate through carousel items using keyboard shortcuts.
• Focus Management: Automatically manages focus for the visible carousel item.

Configuration

After installing and enabling the module, you can configure it through the Views UI:

1. Orientation: Choose horizontal, vertical, or hybrid layouts for screen-size responsive control.
2. Items Per Screen: Set different item counts for small and large screens.
3. Item Width (optional): Define a custom width per item to fine-tune layout appearance.
4. Gap: Adjust spacing between items in pixels.
5. Looping: Toggle looping to control whether the carousel wraps around.
6. Navigation: Select arrows, dots, both, or none as your navigation style.
7. Autoplay: Define slide transition interval between 1000 and 15000 ms.

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 VVJB instead.
For example:

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

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

Example: [vvjb:title:plain]

Note: The [vvjb:*] 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 [vvjb:title], [vvjb:field_image], etc.

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

JavaScript API

Control carousels programmatically via Drupal.vvjb. Pass the deep link identifier, a CSS selector, or an element reference as the first argument.

<pre class="codeblock"><code class="language-php">Drupal.vvjb.goToSlide('products', 3);
Drupal.vvjb.nextSlide('products');
Drupal.vvjb.prevSlide('products');
Drupal.vvjb.pause('products');
Drupal.vvjb.resume('products');
Drupal.vvjb.getCurrentSlide('products');
Drupal.vvjb.getTotalSlides('products');
Drupal.vvjb.getInstance('#vvjb-12345'); // returns &amp;lt;vvjb-carousel&amp;gt;

Example Usage

1. Install and enable the Views Vanilla JavaScript Basic Carousel module.
2. Create or edit a view using the Views module.
3. In the Format section, choose Basic Carousel as the display style.
4. Configure the available options under Format Settings to match your design needs.

Additional Information

• Dependencies: This module has no dependencies on other contributed modules.

Installation

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

   composer require drupal/vvjb

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

   drush en vvjb

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

   drush cr

Support and Contributions

If you encounter any issues or have suggestions for improvements, please open an issue in the module's issue queue. Contributions are welcome and appreciated!

Basic Carousel - Developer & Site Builder Tips:

• Every view created with this plugin has a CSS class vvj-basic-carousel placed alongside js-view-dom-id.
• The active item has the class active for easy customization.
• You can use a view mode or row styles for your carousel items.
• Carousel items are wrapped in a single <div>, and the navigation is wrapped in a separate <div>.

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.