Views Carousel (VVJB, "Basic Carousel") renders a Drupal Views listing as a flat, responsive carousel with horizontal, vertical or hybrid orientation, dynamic slide fitting, and configurable items-per-screen — in vanilla JavaScript with no jQuery. It requires Drupal 11.3 or 12, and it is free on drupal.org.
What it does
VVJB adds a Views style plugin called Basic Carousel. Unlike a single-slide showcase, it is built to display several items per screen at once — a product row, a logo strip, a card grid you can scroll through — while still supporting the single-item case. It is a genuine Views style plugin, so filters, sorting and the pager all work exactly as they would with any other display format.
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 |
VVJB 2.x requires VVJ Core. Note the machine name — the module is named vvjb, but its project short name on drupal.org is Basic Carousel, distinct from the 3D Carousel project (vvjc). composer require drupal/vvjb:^2.0 installs VVJ Core for you automatically. A manual, non-Composer download needs VVJ Core downloaded and enabled separately, since VVJB's rendering and its shared token resolver both depend on it.
Orientation and responsive fitting
VVJB's defining feature is orientation control: horizontal, vertical, or hybrid, so the same view can scroll sideways on desktop and stack vertically on mobile, or whatever combination suits your layout. Items-per-screen is configured independently for small and large screens.
On top of that, Responsive Dynamic Slide Fitting recalculates how many slides actually fit as the viewport resizes, treating your configured small/large counts as maximums rather than fixed targets. The practical effect: resizing a browser window on a desktop does not leave slides overflowing or awkwardly cropped between your defined breakpoints — the carousel reduces its visible count to fit cleanly at any width, not just at the breakpoints you configured.
Features
- No jQuery. Pure vanilla JavaScript for better performance and a smaller payload.
- Orientation control. Horizontal, vertical or hybrid, for responsive layout changes across screen sizes.
- Items per screen, set independently for small and large screens.
- Optional fixed item width for precise per-item layout control.
- Gap management — configurable spacing between items in pixels.
- Looping support, optionally wrapping back to the first item after the last.
- Navigation styles: arrows, dots, both, or none.
- Autoplay with play/pause, interval configurable between 1000 and 15000 milliseconds.
- Keyboard navigation via arrow keys and the space bar.
- Touch and swipe support for mobile visitors.
- Accessibility-enhanced, with ARIA roles and live regions for screen readers.
- Hover pause and pause on tab switch, and respect for
prefers-reduced-motion. - Unique ID generation so multiple carousels on one page never conflict.
Configuring the carousel
- Orientation
- Horizontal, vertical, or hybrid, for screen-size-responsive control.
- Items per screen
- Independent counts for small and large screens — treated as maximums under Dynamic Slide Fitting.
- Item width (optional)
- A fixed per-item width in pixels, for precise layouts.
- Gap
- Spacing between items, in pixels.
- Looping
- Whether the carousel wraps around after the last item.
- Navigation
- Arrows, dots, both, or none.
- Autoplay
- Transition interval, 1000–15000 milliseconds, with play/pause controls.
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 resolve standard {{ title }}-style tokens. Use VVJB's own syntax instead: [vvjb:title], [vvjb:field_image], and so on. Append :plain to strip HTML — [vvjb:title:plain]. These pull directly from the rendered first row and do not support complex multi-token rewrites; use one token per field. In v2, resolution runs through the shared vvj_core.token_resolver service, with the same token syntax as v1.
JavaScript API
Control carousels programmatically through Drupal.vvjb. Pass a deep-link identifier, a CSS selector, or an element reference as the first argument:
Drupal.vvjb.goToSlide('products', 3);
Drupal.vvjb.nextSlide('products');
Drupal.vvjb.prevSlide('products');
Drupal.vvjb.pause('products');
Drupal.vvjb.resume('products');
Drupal.vvjb.getCurrentSlide('products');
Drupal.vvjb.getTotalSlides('products');
Drupal.vvjb.getInstance('#vvjb-12345'); // returns <vvjb-carousel>Installation
composer require drupal/vvjb
drush en vvjb -y
drush crThen edit or create a view, and under Format choose Basic Carousel as the display style.
Developer and site builder tips
- Every view using this plugin carries the CSS class
vvj-basic-carouselalongside Views' ownjs-view-dom-id. - The active item has the class
active. - Carousel items sit inside one wrapping
<div>; navigation controls sit in a separate<div>. - A view mode or row style both work for item content — use whichever gives you the markup you want per item.
Basic Carousel or 3D Carousel?
VVJB and Views 3D Carousel (VVJC) share the VVJ Core foundation but serve different layouts.
| Consideration | VVJB — Basic Carousel | VVJC — 3D Carousel |
|---|---|---|
| Items visible at once | Configurable per breakpoint, dynamically fitted | One slide |
| Visual style | Flat scroll, horizontal, vertical or hybrid | Perspective-depth rotation |
| Best for | Product grids, logo strips, browsing a set efficiently | Hero banners, featured items, drawing the eye to one thing at a time |
If your content works better as a card that flips to reveal a back face, see Views 3D FlipBox. If it works better as headings that expand in place, see Views Accordion.
Common questions
Can VVJB show more than one item at a time?
Yes — that is its main difference from VVJC. Set items-per-screen independently for small and large screens, and Responsive Dynamic Slide Fitting keeps the count accurate as the viewport resizes.
Does the carousel scroll vertically?
Yes, if you set orientation to vertical, or hybrid to change orientation by screen size.
Does VVJB need jQuery?
No. It is vanilla JavaScript. It does depend on Drupal core's Views and Filter modules, and on VVJ Core.
Will VVJB work on Drupal 12?
Yes. It declares core_version_requirement: ^11.3 || ^12 and PHP 8.3 or later.
Is "Basic Carousel" a different project from "3D Carousel"?
Yes. VVJB (machine name vvjb) is the Basic Carousel project; VVJC (machine name vvjc) is the separate 3D Carousel project. They share the VVJ Core dependency but are installed and enabled independently.
Need a hand?
VVJB 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.
