Content display

Features

The EU Europa Component Library (ECL) module (eu_europa_component_lib) integrates the Europa Compo

Here, write an introduction that summarizes the purpose and function of this project with a focus on users brand new to Drupal. Answer the question: What solution does this module provide?

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