Keen Slider

Keen Slider turns image fields, entity references, views and blocks into touch-friendly sliders and carousels. Configure the behaviour once, reuse it anywhere, and write no JavaScript to do it.

Most slider modules ask you to configure the same options over and over, once per field display and once per view. Keen Slider takes a different approach: you create a named optionset that describes how a slider should behave, then point as many displays at it as you like. Change the optionset and every slider using it changes with it.

Under the hood it integrates Keen Slider 6.x, a dependency-free library of roughly 6 KB gzipped. There is no jQuery, no extra framework, and nothing bundled into the module itself.

Features

Reusable optionsets. A configuration entity holds one slider's behaviour: slides per view, spacing, origin, snap or free scrolling, looping, vertical orientation, RTL, drag speed, rubberbanding, transition duration and starting slide. Optionsets are exportable configuration, so they move between environments with the rest of your config.

Breakpoints. Any optionset can override any of its own options at a media query, so a slider can show one slide on a phone, two on a tablet and four on a desktop without a second optionset.

Four places to use one optionset:

• Image fields: a field formatter that turns a multi-value image field into a slider, with a separate image style for the thumbnail strip.
• Entity reference fields: a formatter that renders referenced media, nodes or paragraphs as slides in the view mode you choose. Anything you can build as an entity can become a slide.
• Views: a "Keen Slider" format plugin, so any view of any content becomes a carousel.
• Blocks: a configurable block that takes a list of media items and a view mode, for sliders that are placed rather than fielded.

Features the library deliberately leaves out. Keen Slider ships the sliding mechanism and nothing else, which is why it is so small. This module supplies the rest as its own code:

• Arrows and dots, rendered as real buttons outside the slider track.
• Autoplay, with configurable interval, pause on hover and pause on interaction.
• A synced thumbnail strip that scrolls with the main slider and navigates it.
• Carousel-aware lazy loading that loads slides within a configurable distance of the current one, rather than everything at once.

A library check that means something. The status report names the version of the library you actually have installed, rather than only confirming that a file is present, and raises an error when that version is one the module cannot drive. Version 5 and 6 of Keen Slider ship different file names, so an unnoticed version mismatch otherwise surfaces as a silently broken slider rather than as a clear message.

Accessibility. The slider is exposed as a labelled carousel region, slides are announced as "N of M", and arrows and dots are focusable buttons rather than clickable divs. Autoplay stops entirely under prefers-reduced-motion: reduce, and the live region that announces slide changes is suppressed while autoplay runs, since the two together flood assistive technology with announcements.

An API for custom code. A keen_slider render element covers the simple case:

$build['gallery'] = [
  '#type' => 'keen_slider',
  '#optionset' => 'default',
  '#slides' => [
    ['#markup' => 'First'],
    ['#markup' => 'Second'],
  ],
];

The keen_slider.builder service takes per-display overrides when one slider needs to differ from its optionset, and hook_keen_slider_settings_alter() lets other modules adjust resolved settings before they reach the browser. Both paths keep cache metadata intact.

When to use it. Product image galleries, testimonial and logo carousels, related-content strips below an article, hero sliders, media galleries on landing pages: anywhere a set of items should scroll horizontally instead of stacking. It suits sites that care about front-end weight, and sites that want slider behaviour treated as configuration rather than as a per-display setting duplicated across dozens of displays.

Post-Installation

The Keen Slider library is not bundled with the module and must be installed separately. The module looks for it at web/libraries/keen-slider/, so that web/libraries/keen-slider/keen-slider.js exists.

1. Install the library. The simplest route is the module's own Drush command:

drush keen-slider:download

With Composer, note that there is no npm-asset/keen-slider package on Packagist and asset-packagist is not configured on most sites. Declare the package inline instead:

composer config repositories.keen_slider '{"type":"package","package":{"name":"rcbyr/keen-slider","version":"6.8.6","type":"drupal-library","dist":{"type":"tar","url":"https://registry.npmjs.org/keen-slider/-/keen-slider-6.8.6.tgz"}}}'
composer require rcbyr/keen-slider

This requires your extra.installer-paths to map web/libraries/{$name} to type:drupal-library, which the standard drupal/recommended-project layout already does.

To install by hand, download the npm tarball and copy keen-slider.js, keen-slider.min.css and package.json from the archive root into web/libraries/keen-slider/. The first two are what Drupal serves; package.json is what lets the status report name the installed version.

A note on file names. Keen Slider 6.x ships no keen-slider.min.js; the distributed keen-slider.js is already minified. Guides referencing keen-slider.min.js are describing version 5. Requesting that file from jsDelivr appears to work because jsDelivr generates it on demand, but unpkg returns a 404 and the generated file cannot be used with subresource integrity.

2. Confirm the library is detected. Visit Reports → Status report (/admin/reports/status). The module reports whether it found the library and which version, and raises an error if that version is one it does not support.

For evaluation only, you can skip the local install: set Library source to jsDelivr CDN at /admin/config/media/keen-slider/settings. The library is then requested from an external host on every page that renders a slider, which many production sites will not want.

3. Create an optionset. Go to Configuration → Media → Keen Slider (/admin/config/media/keen-slider). The module installs a Default optionset showing one slide at a time with arrows and dots, which is enough to try things out. Add your own for other layouts.

4. Apply it. There is no new content type and no text format to configure. Instead:

• For a field, go to Manage display on the bundle, set a multi-value image or entity reference field to the Keen Slider formatter, and pick your optionset in the formatter settings.
• For a view, set Format to Keen Slider and pick the optionset.
• For a block, place the Keen Slider block in Block layout and choose media items, a view mode and an optionset.

Managing optionsets and library settings requires the Administer Keen Slider permission.

Theming. The module renders a keen-slider.html.twig template with the structure the library requires:

.keen-slider-wrapper        outer wrapper; arrows, dots and thumbnails live here
  .keen-slider              the flex track; only slides may be direct children
    .keen-slider__slide

Arrows, dots and thumbnails sit deliberately outside .keen-slider. The library's CSS makes that element display: flex; overflow: hidden and treats its children as slides, so navigation markup placed inside it gets dragged along with the content. Keep that in mind when overriding the template. The module's own stylesheet styles only its additions and never overrides library CSS, so a theme can safely drop or replace it.

Additional Requirements

• Drupal 11.1 or newer (Drupal 12 supported).
• PHP 8.3 or newer.
• The Keen Slider library, 6.x: MIT licensed, installed separately as described above. It is not bundled with this module.
• Core Field and Image modules, both enabled by default in a standard install.

Recommended modules/libraries

• Views (core): required only if you want the Keen Slider view format.
• Media and Media Library (core): required for the Keen Slider block, and the most convenient way to build galleries as entity reference fields.
• Paragraphs: pairs well with the entity reference formatter when slides need to be richer than a single image, such as a heading, body text and a call to action per slide.
• Responsive Image (core): useful for the underlying image display; the module's lazy loading is about which slides load, not which image variant.

Similar projects

Drupal has a long history of slider modules and several remain good choices. The differences are mostly about the JavaScript library each one wraps and how much surrounding infrastructure it brings.

• Slick Carousel: the most established option, with a large feature set built on top of Blazy. It wraps slick.js, which depends on jQuery and is no longer actively developed upstream. Choose Slick if you want its ecosystem and its depth of options; choose this module if you want a smaller, dependency-free library and a thinner stack.
• Splide: also wraps a modern dependency-free library and is a close comparison. It is built on the same Blazy foundation as Slick, which brings extra capability along with an extra dependency. This module has no such dependency and a correspondingly smaller surface.
• Tiny Slider 2: the closest comparison in spirit. It also wraps a dependency-free vanilla library and depends on no other contrib module. It differs in two ways that may matter. Its slider options are stored per field formatter and per view rather than in a shared entity, so the same carousel settings are re-entered at each display instead of being defined once. And the library it wraps, tiny-slider 2.9.4, was last published to npm in October 2021, where Keen Slider is still receiving releases. Tiny Slider 2 also ships more built in, including autoplay and lazy loading, where this module supplies those itself.
• Swiper integrations: Swiper is a considerably larger library with a much broader feature set, including 3D effects and virtual slides. Worth it if you need those; heavier than necessary if you do not.
• Views Slideshow: mature and flexible, but Views-only. This module treats Views as one of four surfaces rather than the only one.

The distinguishing choices here are the reusable optionset as a config entity shared across field displays, views, blocks and custom code; a dependency-free library at roughly 6 KB gzipped, around half the size of tiny-slider's minified build; and no dependency on any other contributed module.

All of the above was accurate in August 2026. Slider modules and the libraries behind them move at different speeds, so check the current state of any project before choosing on the strength of a comparison here.

Supporting this Module

This module is maintained on a volunteer basis. The most useful ways to help are filing clear issues with steps to reproduce, reviewing patches and merge requests in the issue queue, and testing release candidates against your own site's content.

Community Documentation

The module's README.md covers installation, the render element and service API, the template structure and the accessibility behaviour in more detail.

• Keen Slider library documentation: the option reference behind the optionset form.
• Keen Slider on GitHub

A note on version numbers

The module is written against Keen Slider 6.8.6. The library follows semantic versioning and the module reads options rather than internals, so other 6.x releases are expected to work. Version 5 and earlier are not supported, because the file names differ as described above; install one and the status report will say so rather than leaving you with a slider that quietly does nothing.

The version is read from the library's package.json. The browser build carries no version banner, so that file is the only thing that identifies a local copy. drush keen-slider:download fetches it, and a Composer install of the npm tarball includes it. If you copied the library in by hand and left it out, sliders still work; the status report simply reports the version as unknown until you add it.