cm_hero_slider
Accessible, fully contained hero image and carousel blocks. No dependencies on external JS libraries, built-in keyboard/screen-reader support, and a pause/play toggle whenever autoplay is on (WCAG 2.2.2).
Many sites need a "hero" — a big image (or a rotating carousel of them) at the top of the homepage, often with a headline and a button. This module gives you exactly that: an editor-friendly way to add a single hero image, or a slideshow of several, without writing any code.
What makes this different from other hero/slider modules already on Drupal.org: it doesn't use jQuery or any external js libraries at all, and every interactive feature (keyboard operation, screen reader announcements, a pause button for auto-advancing slides, respecting a visitor's "reduce motion" setting) is built in from the start, not bolted on after.
Features
This module adds two new kinds of content blocks you can create and edit like any other content on your site:
- Hero Slide — a single image with a title, optional descriptive text, and an optional button (call to action). You choose which side of the image the text sits on, and whether the text is light or dark depending on the image behind it.
- Hero Slider — a carousel made up of several Hero Slides, in whatever order you choose. You control whether it auto-advances, how fast it transitions, and the label screen readers announce for it.
A Hero Slide works perfectly well on its own — place just one in a region for a plain, non-rotating hero image with no slideshow controls at all. Reference several of them from a Hero Slider to get a full carousel.
Both can be added to a page two ways:
- The traditional way: place them as blocks anywhere on your site through Drupal's Block Layout screen.
- Or, attach one directly to a piece of content (an article, a landing page, anything) as a field — so an individual page can carry its own hero image or carousel without touching Block Layout at all.
Accessibility and resilience are built in, not optional:
- Proper semantics for screen readers (announces the carousel as a region, each slide as "Slide 2 of 4", etc.).
- If autoplay is turned on, a pause/play button is always shown — this isn't a configurable option, because WCAG 2.2.2 requires it whenever content moves on its own.
- Respects a visitor's operating-system "reduce motion" preference: autoplay won't self-start and slide changes become instant instead of animated.
- Fully keyboard-operable arrows and dots, and a "no-JavaScript" fallback: if JavaScript fails to load, every slide still displays (just without the carousel behavior), rather than a blank block.
- Touch and mouse swipe/drag support, on top of the arrows and dots.
Post-Installation
After enabling the module, no separate configuration page is needed — you start by creating content, the same way you'd create any other block:
- Go to Content → Block library → Add content block and choose Hero Slide. Fill in an image, title, and the other fields. Create one of these per slide you want.
- If you want a carousel rather than a single static image, add another block and choose Hero Slider instead, then reference the Hero Slide blocks you just created, in the order you want them to play.
- Go to Structure → Block layout and place your Hero Slide or Hero Slider block into whichever region you want it to appear in (for example, a "Hero" region at the top of the homepage, if your theme has one).
If you'd rather attach a hero image/carousel to a specific piece of content instead of placing it as a block: add an Entity reference field to that content type (targeting "Content block", allowing the Hero Slide/Hero Slider types), and set that field's format to "Hero slide/slider (SDC)" on the Manage Display screen.
Setup note: if Media and Media Library aren't already enabled on your site, enable them first, separately, before enabling this module (
drush en media media_library -y, thendrush en cm_hero_slider -y). Enabling everything in one step can occasionally fail with an "unmet dependency" error — this two-step order avoids it.
Additional Requirements
No contributed modules are required — everything this module depends on ships in Drupal core: Block Content, Media and Media Library (for the hero images), Link, Text, Image, and Options. Media/Media Library are pulled in automatically when you install this module (see the setup note above for the one edge case around install order).
Drupal 11 is required. No jQuery, no external JavaScript libraries, and no build step — the carousel behavior is plain, dependency-free JavaScript.
Recommended modules/libraries
Paragraphs support is planned as a follow-up (see "Similar projects" below for why it isn't built in yet). Once available, it will ship as a separate, optional companion module rather than a required dependency of this one.
Similar projects
Drupal.org has several existing slider/carousel modules, but nearly all of them fall into one of two categories: they depend on jQuery (which Drupal core dropped, and which has become harder to keep secure and maintained over time), or they haven't been actively maintained in some time. Several also have real accessibility gaps — no pause control for autoplay, no keyboard support, or no graceful fallback when JavaScript doesn't load.
This module was built specifically to avoid all three problems: no jQuery, actively maintained, and accessibility treated as a requirement rather than an afterthought (see "Features" above for specifics).
Paragraphs integration is intentionally not included in this initial release. It's planned, but as a separate companion module rather than a hard dependency here — not every site running this module also runs Paragraphs, and adding it as a required dependency would force it on everyone.
Supporting this Module
This module is supported by Lisa Harrison (lisa.rae), an individual contributor and long-time member of the Drupal community.
Community Documentation
None yet — a demo site and/or short walkthrough video are good candidates for a future update to this page