Views 3D Carousel - Views Vanilla JavaScript 3D Carousel (VVJC)

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/vvjc:^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 3D Carousel module (machine name: vvjc) allows you to create dynamic, responsive, and visually striking 3D 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 VVJC module avoids jQuery dependencies, ensuring a lightweight and modern user experience.

Features

• No jQuery: By using vanilla JavaScript, the module ensures faster performance, reduced page load times, and no reliance on heavy external libraries. This makes it an ideal choice for modern, lightweight Drupal websites.
• 3D Carousel Format: Renders content items in an interactive 3D carousel format for engaging and visually captivating displays.
• Comprehensive Customization Options: Provides a variety of settings, including maximum width, screen heights for different devices, set the background color with opacity, and perspective depth to fine-tune the carousel’s appearance.
• Responsive Design: Built-in breakpoints ensure the carousel adapts seamlessly to various screen sizes, offering a consistent experience across devices.
• Play/Pause Functionality: Includes an automatic scrolling feature with a play/pause button, giving users control over the carousel's movement.
• Customizable Intervals: Set the time interval for slide transitions, with options ranging from 3 to 15 seconds, or disable automatic transitions entirely to allow users full control.
• Keyboard Navigation: Supports arrow keys and the space bar for intuitive slideshow navigation.
• Touch and Swipe Support: Includes swipe gestures for seamless navigation on mobile devices.
• Accessibility-Enhanced: Announces active slides to screen readers and includes ARIA attributes for improved accessibility.
• Hover Pause: Automatically pauses the slideshow on hover and resumes on mouseout for better user interaction.
• Unique ID Generation: To prevent conflicts and ensure consistency across different views, the module automatically generates a unique numeric ID for each slideshow instance.
• Pause on Tab Switch: The carousel automatically pauses when the user switches to another browser tab, preserving content visibility when they return.
• Reduced Motion Support: Respects the user's "prefers-reduced-motion" system setting to reduce animations for users who prefer less movement.

Accessibility

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

• ARIA Roles and Properties: Proper ARIA roles and properties provide context and state information to screen readers, enhancing accessibility.
• Keyboard Navigation: Users can navigate through carousel items using keyboard shortcuts, ensuring full functionality without the need for a mouse.
• Focus Management: The module ensures that the currently displayed item receives focus, improving the experience for keyboard and screen reader users.

Configuration

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

1. Max Width: Define the maximum width of the carousel, choosing from preset options such as 300px, 400px, 500px, etc.
2. Time in Seconds: Set the interval between slides, with options ranging from 3 to 15 seconds. Setting this to 0 disables automatic scrolling.
3. Large Screen Height: Specify the carousel’s height on large screens, ensuring an optimal display on desktops and larger devices.
4. Small Screen Height: Adjust the carousel’s height for smaller screens, enhancing the mobile viewing experience.
5. Perspective: The perspective is automatically set based on the maximum width for optimal 3D display, but you can override this by specifying a custom value in pixels.
6. Available Breakpoints: Select breakpoints to ensure the carousel is responsive, with options such as 576px, 768px, 992px, and more.
7. Background Color: Set the background color of the carousel using a color picker to enhance its visual appeal.
8. Background Opacity: Adjust the opacity of the background with a range slider, allowing values from 0 (fully transparent) to 100 (fully opaque) to achieve the desired transparency effect.
9. Disable Background: Use this checkbox to completely disable the background, making the carousel transparent if checked.

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

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

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

Example: [vvjc:title:plain]

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

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

JavaScript API

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

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

Example Usage

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

Additional Information

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

Installation

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

   composer require drupal/vvjc

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

   drush en vvjc

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!

3D Carousel - Developer & Site Builder Tips:

• Every view created with this plugin has a CSS class vvj-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.