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 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.