Views 3D Carousel (VVJC) turns any Drupal Views listing into an accessible, perspective-depth 3D carousel, built in pure vanilla JavaScript with no jQuery and no other contributed dependency beyond its own shared core. It requires Drupal 11.3 or 12, and it is free on drupal.org.
What it does
VVJC adds a new Views style plugin called 3D Carousel. Choose it in the Format section of any view and each row in your result set — nodes, media, commerce products, anything Views can list — becomes a slide in a rotating 3D display, rather than a flat strip. Because it is a Views style plugin, it inherits your view's filters, sort order and pager exactly like Grid or List would.
Requirements
| Requirement | Value |
|---|---|
| Drupal core | ^11.3 || ^12 |
| PHP | 8.3 or later |
| Package | VVJ |
| Core module dependencies | Views, Filter |
| Contributed dependency | VVJ Core — required, installed automatically |
VVJC 2.x requires VVJ Core. composer require drupal/vvjc:^2.0 pulls it in for you; if you install by downloading a tarball instead of using Composer, you must download VVJ Core separately or the module will not enable. VVJ Core is the shared foundation behind every VVJ module — it supplies the custom-element rendering, the token resolver, and the base Views style plugin that VVJC extends.
What makes it 3D
The difference between VVJC and a flat carousel is the perspective transform applied to each slide as it rotates into and out of view. Format Settings expose a perspective value in pixels that controls how pronounced that depth looks — Drupal calculates a sensible default from your configured max width, but you can override it. Pair that with a configurable background colour and opacity behind the stage, and you get a carousel that reads as a physical, rotating object rather than a slideshow with a transition effect.
Features
- No jQuery. Vanilla JavaScript keeps the payload small and avoids a dependency most modern Drupal sites are trying to drop.
- Comprehensive customization. Max width, large- and small-screen heights, perspective depth, background colour and opacity are all configurable per view.
- Responsive breakpoints. Choose from presets such as 576px, 768px and 992px so the carousel adapts across devices.
- Play/pause with configurable interval. Automatic rotation from 3 to 15 seconds, or disabled entirely for a manually-driven carousel.
- Keyboard navigation. Arrow keys and the space bar move between slides.
- Touch and swipe support for mobile visitors.
- Accessibility-enhanced. Active slides are announced to screen readers, with ARIA roles throughout.
- Hover pause and pause on tab switch, so content does not keep moving while a visitor is reading or has switched away.
- Respects
prefers-reduced-motionfor visitors who have asked their system to limit animation. - Unique ID generation so multiple carousels on one page never conflict.
Configuring the carousel
- Max width
- Preset widths (300px, 400px, 500px and more) that also set the default perspective value.
- Time in seconds
- Interval between automatic slide transitions, 3–15 seconds. Set to 0 to disable autoplay.
- Large / small screen height
- Independent height values so the carousel fits its container on desktop and mobile.
- Perspective
- Overrides the automatic 3D depth calculated from max width.
- Background colour and opacity
- A colour picker plus a 0–100 opacity slider, or a checkbox to disable the background entirely.
- Available breakpoints
- Choose which responsive breakpoints apply to this instance.
Custom tokens for view header and footer
Views header and footer fields set to Global: Text area or Global: Unfiltered text with "Use replacement tokens from the first row" enabled cannot use standard {{ title }}-style tokens — Drupal's default token system does not resolve them in that context. Use VVJC's own syntax instead: [vvjc:title], [vvjc:field_image], and so on for any field on the view. Append :plain to strip HTML, for example [vvjc:title:plain]. These tokens pull directly from the rendered row and do not support complex rewrites built from multiple {{ }} tokens — use one token per field instead. In v2, resolution runs through the shared vvj_core.token_resolver service, but the token syntax itself is unchanged from v1.
JavaScript API
Control carousels programmatically through Drupal.vvjc. Pass a deep-link identifier, a CSS selector, or an element reference as the first argument:
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 <vvjc-carousel>
Drupal.vvjc.getAllInstances();Installation
composer require drupal/vvjc
drush en vvjc -y
drush crThen edit or create a view, and under Format choose 3D Carousel as the display style.
Developer and site builder tips
- Every view using this plugin carries the CSS class
vvj-carouselalongside Views' ownjs-view-dom-id. - The active slide has the class
active— style it directly for state-based emphasis. - Carousel items sit inside one wrapping
<div>; navigation controls sit in a separate<div>, so you can restyle or hide navigation without touching slide markup. - Row style or a view mode both work for slide content — use whichever gives you the markup you want per item.
3D Carousel or Basic Carousel?
VVJC and Views Carousel (VVJB) both rotate through a Views result set, and both share the VVJ Core foundation, but they solve different problems.
| Consideration | VVJC — 3D Carousel | VVJB — Basic Carousel |
|---|---|---|
| Visual style | Perspective-depth rotation, one slide at a time | Flat horizontal or vertical scroll, one or several items at once |
| Best for | Hero banners, featured items, anything meant to draw the eye | Product grids, card rows, content that needs to show several items per screen |
| Items visible at once | One slide | Configurable per breakpoint |
| Orientation | Fixed rotation axis | Horizontal, vertical, or hybrid |
If you want items to flip rather than rotate, Views 3D FlipBox is the closer fit. If your content is better suited to expand-in-place sections than a rotating display at all, see Views Accordion.
Common questions
Does VVJC depend on jQuery or any other library?
No. It is pure vanilla JavaScript. It does depend on Drupal core's Views and Filter modules, and on VVJ Core, which Composer installs automatically.
Will VVJC work on Drupal 12?
Yes. It declares core_version_requirement: ^11.3 || ^12 and PHP 8.3 or later, so it installs cleanly on either.
Do I need to install VVJ Core myself?
Not if you use Composer — composer require drupal/vvjc:^2.0 resolves and installs VVJ Core as part of the same command. A manual, non-Composer download needs both modules downloaded and enabled.
Can I use my own view mode for slide content?
Yes. Set Row style to a view mode, or use field-based row styles — VVJC renders whatever the row produces inside each slide.
What is the difference between VVJC and VVJB?
VVJC rotates one slide at a time with a 3D perspective effect, aimed at content you want to showcase. VVJB shows one or more flat items per screen with horizontal, vertical or hybrid orientation, aimed at browsing a set of items efficiently. See the comparison table above.
Need a hand?
VVJC is free and GPL-licensed, like all my contributed work. If you want a carousel styled to match an existing design, a Views build that goes beyond what Format Settings expose, or a Drupal 10 to 11/12 upgrade so you can run version 2, that is my day job.
Read about my Drupal services, see what a Drupal developer brings to a project, or get in touch.
