In the fast-paced world of web design, delivering content in a clean, interactive, and accessible manner is vital for engaging visitors and elevating user experience. Today, we're pleased to introduce the Views Vanilla JavaScript Basic Carousel module, a lightweight yet powerful tool for your Drupal site. Seamlessly integrated with the Views module, this module empowers you to present your content in a modern carousel format without relying on jQuery, ensuring your site remains fast and efficient.
What is the Views Vanilla JavaScript Basic Carousel?
The Views Vanilla JavaScript Basic Carousel (VVJB) module provides a fully configurable, accessible, and responsive carousel display style for your Drupal Views. Whether showcasing articles, products, testimonials, or images, VVJB allows you to control the orientation, navigation style, item spacing, and autoplay behavior directly within the Views UI. Built with vanilla JavaScript, the module ensures a modern, dependency-free implementation for optimal performance across devices.
Key Features
- Vanilla JavaScript: Lightweight implementation with no jQuery dependency for improved performance.
- Flexible Orientation: Choose horizontal, vertical, or hybrid layouts for responsive design needs.
- Dynamic Item Fitting: Automatically adjusts the number of visible items based on available screen width, maintaining a clean and contained layout across devices.
- Configurable Navigation: Use arrows, dots, both, or no navigation based on your site’s design preferences.
- Autoplay with Play/Pause Controls: Enable or disable automatic slide transitions with user-friendly controls.
- Touch and Keyboard Navigation: Provides smooth mobile interactions and intuitive keyboard support.
- Accessibility-Enhanced: Includes ARIA roles, live regions, and reduced motion support to ensure inclusivity.
- Looping Support: Optionally loop slides for continuous content cycling.
- Optional Item Width and Gaps: Fine-tune layout with precise control over item width and spacing.
- Unique ID Generation: Prevents DOM conflicts, supporting multiple carousels on the same page without interference.
- Token Replacement Support: Use custom tokens in Views headers, footers, and empty text for dynamic content pulled from the first row.
Installation and Setup
Getting started with VVJB is straightforward. Follow these steps to integrate the module into your Drupal site:
Install the Module:
composer require drupal/vvjbEnable the Module:
drush en vvjbClear Caches:
drush cr- Create or Edit a View in the Views UI to select the Basic Carousel display format.
- Configure Options to adjust orientation, autoplay intervals, item count, item width, gaps, and navigation style as needed.
Important Considerations
- Accessibility: The carousel supports ARIA live regions, keyboard navigation, and respects reduced motion preferences for inclusive design.
- Responsive Fitting: VVJB dynamically reduces visible items if space is limited while maintaining your configured maximum for larger screens.
- Token Support: Use
[vvjb:field_name]tokens in the Views header/footer to pull field values from the first row dynamically.
Example Use Cases
VVJB is ideal for:
- Content Highlights: Showcase featured articles, blog posts, or news updates.
- Product Displays: Present product galleries in e-commerce sites with clear, responsive navigation.
- Testimonial Rotators: Rotate client testimonials with automatic or manual navigation controls.
Final Thoughts
The Views Vanilla JavaScript Basic Carousel module is a powerful addition to your Drupal toolkit, offering a lightweight, modern approach to displaying content interactively and responsively. Its seamless Views integration and extensive customization options enable you to tailor your carousels to match your site's design while maintaining accessibility and performance best practices.
Ready to elevate your content presentation? Download the Views Vanilla JavaScript Basic Carousel module today and create clean, accessible, and engaging carousels on your Drupal site.
For detailed instructions and ongoing support, visit the module's page on Drupal.org or reach out to our team if you need assistance.
