PHPackages humanmade/hm-carousel-block - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [Utility & Helpers](/categories/utility) 4. / 5. humanmade/hm-carousel-block ActiveWordpress-plugin[Utility & Helpers](/categories/utility) humanmade/hm-carousel-block =========================== Lightweight carousel block using SplideJS v1.3.0(1w ago)94.3k↑100%2[1 issues](https://github.com/humanmade/hm-carousel-block/issues)GPL-2.0-or-laterJavaScriptPHP >=8.0CI passing Since Feb 13Pushed 1w ago2 watchersCompare [ Source](https://github.com/humanmade/hm-carousel-block)[ Packagist](https://packagist.org/packages/humanmade/hm-carousel-block)[ RSS](/packages/humanmade-hm-carousel-block/feed)WikiDiscussions main Synced yesterday READMEChangelog (8)DependenciesVersions (21)Used By (0) HM Carousel Block ================= [](#hm-carousel-block) HM Carousel Block is a lightweight WordPress plugin designed to add a carousel block to modern WordPress sites. It uses the Splide library, which is lightweight (12kB gzipped) and accessible. Features -------- [](#features) - Lightweight with no dependencies - Uses Splide library for carousel functionality - Accessible and responsive design - Easy to use and customize - Allows you to put any blocks or patterns in carousel slides - Supports using the Query Loop block to create a carousel of posts - Supports various navigation types (button, pagination, and thumbnails) - Bring your own styles. We only load the minimal core splide CSS needed to function. You can style everything else as you wish. More info below. Installation ------------ [](#installation) 1. Download the plugin zip file. 2. In your WordPress admin panel, go to Plugins > Add New. 3. Click "Upload Plugin" and choose the downloaded zip file. 4. Click "Install Now" and then "Activate" the plugin. Usage ----- [](#usage) 1. In the WordPress editor, add a new block. 2. Search for "Carousel" and add it to your page or post. 3. Note that the view in the editor is a simplified version for ease of managing the content. 4. Add Carousel Slide blocks to the carousel. You can then add whatever content you wish to these. 5. Customize the carousel settings as needed. Using with Query Loop & Arrow Position ------------------------------------------ [](#using-with-query-loop--arrow-position) You can use the Carousel block to display posts from a Query Loop. To do this: 1. Add the Carousel block to your page or post. 2. Select the "Articles Carousel" variation when inserting the block, or add a Query Loop block inside the carousel manually. 3. The carousel will automatically detect the number of columns set in the Query Loop (e.g., columns-2, columns-3) and use that as the number of slides per page. 4. To set the arrow position, open the block settings sidebar, enable navigation buttons, and choose the desired Arrow Position (Default, Top Left, Top Right, Bottom Left, Bottom Right). The arrows will be positioned accordingly. ### Articles Carousel Variation [](#articles-carousel-variation) The block provides a variation called "Articles Carousel" for quickly creating a carousel of posts using the Query Loop. This variation is optimized for displaying articles and automatically configures the Query Loop inside the carousel. Responsive Direction and Auto-scroll ------------------------------------ [](#responsive-direction-and-auto-scroll) The carousel supports separate desktop, tablet, and mobile settings for direction, slides per page, height, and fixed slide height. Use `Top to bottom` direction for vertical carousels. Splide requires a carousel height or fixed slide height for vertical tracks, so set `Carousel height` or `Fixed slide height` when a breakpoint uses `Top to bottom`. Blank vertical breakpoint heights inherit the nearest earlier height value. When a later breakpoint switches back to a horizontal direction, inherited vertical height is cleared for that breakpoint. Track padding follows the active axis. Horizontal carousels use left/right padding, and vertical carousels use top/bottom padding. Auto-scroll applies across all breakpoints when enabled. It uses loop mode and disables autoplay, arrows, and pagination. Horizontal Auto-scroll breakpoints use content-width slide sizing unless a fixed slide width is configured, while vertical Auto-scroll breakpoints use the configured vertical height and slide sizing. Styling ------- [](#styling) The recommended approach is to register a new block stylesheet with your custom CSS. This ensures it is only loaded when the block is on the page. This code demnstrates how to do this for a CSS file build using `@wordpress/scripts`. ``` $filename = 'custom-carousel-styles'; $asset = require get_stylesheet_directory() . "/build/css/{$filename}.css.asset.php"; wp_enqueue_block_style( 'hm/carousel, [ 'handle' => "my-project-{$filename}", 'src' => get_theme_file_uri( "build/css/{$filename}.css.css" ), 'path' => get_theme_file_path( "build/css/{$filename}.css.css" ), 'ver' => $asset['version'], 'deps' => $asset['dependencies'], ] ); ``` Release Process --------------- [](#release-process) Merges to `main` will automatically [build](https://github.com/humanmade/hm-carousel-block/actions/workflows/build-release-branch.yml) to the `release` branch. A project may be set up to track the `release` branch using [composer](http://getcomposer.org/) to pull in the latest built beta version. Commits on the `release` branch may be tagged for installation via [packagist](https://packagist.org/packages/humanmade/hm-carousel-block) and marked as releases in GitHub for manual download using a [manually-dispatched "Tag and Release" GH Actions workflow](https://github.com/humanmade/hm-carousel-block/actions/workflows/tag-and-release.yml). To tag a new release, 1. Review the unreleased features in the [Changelog](./CHANGELOG.md) and choose the target version number for the next release using [semantic versioning](https://semver.org/) 2. Checkout a `prepare-v#.#.#` branch. In that branch, - Add a new header into [CHANGELOG.md](./CHANGELOG.md) for any unreleased features - Bump the version number in the [hm-carousel-block.php](./hm-carousel-block.php) file's PHPDoc header 3. Open a pull request from your branch titled "Prepare release v#.#.#" 4. Review and merge your "Prepare release" pull request 5. Wait for the `release` branch to [update](https://github.com/humanmade/hm-carousel-block/actions/workflows/build-release-branch.yml) with the build that includes the new version number 6. On the ["Tag and Release" GH Action page](https://github.com/humanmade/hm-carousel-block/actions/workflows/tag-and-release.yml)\], - Click the "Run workflow" button in the "workflow\_dispatch" notification banner (see screenshot below) - Fill out the "Version tag" field with your target version number - This version must match the version in `hm-carousel-block.php` and your newest Changelog section - Use the format `v#.#.#` for your version tag - Leave the "Branch to tag" field as `release` (we will add the tag on the release branch containing the latest built code) - Click "Run workflow" [![Screenshot of Run workflow dropdown form being filled out](./.github/docs/release-tagging-action.jpg)](./.github/docs/release-tagging-action.jpg) Once the workflow completes, your new version should be [tagged](https://github.com/humanmade/hm-carousel-block/tags) and available in the list of [releases](https://github.com/humanmade/hm-carousel-block/releases) Local Development ----------------- [](#local-development) We recommend cloning this repository into your active project (or installing the repository via composer with `composer update humanmade/hm-carousel-block --prefer-source`) so that feature development can be tested in the context of full applications, but this repository does support a lightweight [wp-env](https://developer.wordpress.org/block-editor/reference-guides/packages/packages-env/) development environment for testing within a vanilla, un-customized WordPress installation. After running the `env:start` script, your site will start at [localhost:2001](http://localhost:2001). Log in with `admin` / `password` at [localhost:2001/wp-admin](http://localhost:2001/wp-admin). CommandDescriptionnpm run env:startStart a local docker-based WordPress environmentnpm run env:stopTurn off the WordPress environmentnpm run env:cli -- wp ...Run any WP-CLI command within your environmentnpm run env:destroyDelete the local wp-env docker environment and clean images and containersLicense ------- [](#license) This plugin is licensed under the GPL v2 or later. The Splide library used in this plugin is licensed under the MIT License. Credits ------- [](#credits) - [Splide](https://splidejs.com/) - A lightweight, flexible, and accessible slider/carousel library. ### Health Score 51 — FairBetter than 95% of packages Maintenance96 Actively maintained with recent releases Popularity30 Limited adoption so far Community15 Small or concentrated contributor base Maturity52 Maturing project, gaining track record Bus Factor2 2 contributors hold 50%+ of commits How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Every ~70 days Recently: every ~21 days Total 8 Last Release 9d ago ### Community Maintainers ![](https://avatars.githubusercontent.com/u/494927?v=4)[Matthew Haines-Young](/maintainers/mattheu)[@mattheu](https://github.com/mattheu) --- Top Contributors [![pamprn09](https://avatars.githubusercontent.com/u/55361215?v=4)](https://github.com/pamprn09 "pamprn09 (45 commits)")[![mattheu](https://avatars.githubusercontent.com/u/494927?v=4)](https://github.com/mattheu "mattheu (19 commits)")[![kadamwhite](https://avatars.githubusercontent.com/u/442115?v=4)](https://github.com/kadamwhite "kadamwhite (15 commits)")[![goldenapples](https://avatars.githubusercontent.com/u/665992?v=4)](https://github.com/goldenapples "goldenapples (12 commits)")[![alexstandiford](https://avatars.githubusercontent.com/u/8210827?v=4)](https://github.com/alexstandiford "alexstandiford (8 commits)") ### Embed Badge ![Health badge](/badges/humanmade-hm-carousel-block/health.svg) ``` [![Health](https://phpackages.com/badges/humanmade-hm-carousel-block/health.svg)](https://phpackages.com/packages/humanmade-hm-carousel-block) ``` ### Alternatives [assisted-mindfulness/naive-bayes Naive Bayes classifier algorithm 45536.2k](/packages/assisted-mindfulness-naive-bayes)[bobey/geoip2-geolite2-composer This tiny repository aims to provide an easy solution to require GeoIP2 / GeoLite2 databases inside your project using composer. 17896.8k1](/packages/bobey-geoip2-geolite2-composer)[sniccowp/php-scoper-wordpress-excludes A list of all WordPress core classes, functions and constants. Meant to be used with the PHP-Scoper exclusion functionality. 16179.2k6](/packages/sniccowp-php-scoper-wordpress-excludes)[mage-os/mageos-async-events An event-driven flexible async events module that allows you to process any event asynchronously. 3223.5k5](/packages/mage-os-mageos-async-events)[that0n3guy/transliteration Transliteration provides one-way string transliteration (romanization) and cleans text by replacing unwanted characters. 12101.6k4](/packages/that0n3guy-transliteration) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)