PHPackages mably/pm-carousel - 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. mably/pm-carousel ActiveDrupal-library mably/pm-carousel ================= Mirror of the pm-carousel javascript library tagged as a Drupal library (patched). v0.1.9-p1(1y ago)1733GPL-3.0-or-laterJavaScript Since Dec 18Pushed 1y agoCompare [ Source](https://github.com/mably/pm-carousel)[ Packagist](https://packagist.org/packages/mably/pm-carousel)[ Docs](https://github.com/lordfpx/pm-carousel)[ RSS](/packages/mably-pm-carousel/feed)WikiDiscussions drupal Synced 1mo ago READMEChangelog (7)DependenciesVersions (12)Used By (0) pm-carousel =========== [](#pm-carousel) Accessible carousel plugin written in JS with no dependencies. Examples here: Features -------- [](#features) - Fully accessible (if you respect HTML order) - Keyboard navigation (keyboard arrows, Home and End keys) - Touch swipe - Responsive carousel settings - No dependencies - Vanilla JS - Pretty small (about 3.5Kb gzip) HTML markup ----------- [](#html-markup) The HTML order is very important to be fully accessible. You will notice strings like `{text}` or `{nbr}`. They are mandatory and will be replaced by the script. Full HTML example to use `pm-carousel`: ``` {text} Slide {nbr} ... {text} {text} ``` ### Play and Stop button (optional) [](#play-and-stop-button-optional) This is the most basic button example. You can **add** any HTML markup that will not break this base. `{text}` will be replaced by the right value defined inside the `data-pm-carousel-playstop` attribute. ``` {text} ``` ### Paging (optional) [](#paging-optional) The HTML inside the button can be freely personalized. `{nbr}` is mandatory and will be replaced by the slide number. ``` Slide {nbr} ``` ### The slides [](#the-slides) ``` ... ... ... ``` ### Previous and next buttons [](#previous-and-next-buttons) This is the most basic button example. You can **add** any HTML markup that will not break this base. Labels inside `data-pm-carousel-prev` and `data-pm-carousel-next` attributes are used to dynamize `{text}`. ``` {text} {text} ``` Settings -------- [](#settings) Default settings: ``` { loop: true, // Will loop group: 1, // nbr of slides per page spaceAround: 0, // centered mode with partial view of surrounding slides (express in %) noStartSpace: false, // in combinaison with "spaceAround" option, but align left the carousel autoplay: 0, // speed of the autoplay (0 for disabled) fullScroll: false, // Enables full scroll on the last slide to display only the remaining items transition: "transform .5s ease-in-out", // CSS transition applied when navigating via buttons transitionSwipe: "transform .2s ease-out", // CSS transition applied when navigating via swipe gestures slideMinRatio: 6, // The swipe must cover at least 1/6 of the slide’s width to trigger a slide change } ``` Usage ----- [](#usage) ``` npm i pm-carousel --save ``` In your script: ``` import pmCarousel from "pm-carousel" ``` If you need to load the script directly on your page, or to import it the "old-fashion way" (see ), you can find the `umd` version inside the `dist` folder: `pm-carousel.umd.js`. Initialize ---------- [](#initialize) 2 ways to initialize `pm-carousel`: - For all carousels with default options: ``` pmCarousel() ``` - For specified carousels only (with default options): ``` const myCarousels = document.querySelectorAll(".my-class") pmCarousel({}, myCarousels) ``` Both methods can be called again when new carousels are injected into the DOM. Settings -------- [](#settings-1) 2 methods: - When calling `pmCarousel` function: ``` pmCarousel({ default: { group: 1, }, responsive: [ { minWidth: "800px", group: 4, }, { minWidth: "400px", group: 2, }, { minWidth: "600px", disable: true, }, ], }) ``` - Inside the `data-pm-carousel` (the JSON must be valid!): ``` ... ``` Responsive settings ------------------- [](#responsive-settings) Have you noticed the `reponsive` key in the above example? That's the way to make your carousel fully responsive. You can use whatever unit you want for the `minWidth` setting. The `disable` setting will deactivate the carousel. If set to `auto`, the carousel will only be enabled when the total number of items is greater than the group size. API --- [](#api) The instance of `pm-carousel` can be reached from nodes with `data-pm-carousel` attribute. ### Play and Stop [](#play-and-stop) Only available when Play/Pause button is present. ``` const myCarousel = document.querySelector(".class-of-a-carousel"); // Start playing myCarousels.pmCarousel.play() // Stop playing myCarousels.pmCarousel.stop() // Toggle Play or Stop myCarousels.pmCarousel.toggleAutoplay() ``` ### Change current page [](#change-current-page) ``` const myCarousel = document.querySelector(".class-of-a-carousel"); myCarousels.pmCarousel.changeActive(2) ``` ### Disable and reinit [](#disable-and-reinit) ``` const myCarousel = document.querySelector(".class-of-a-carousel"); // Disable Carousel myCarousels.pmCarousel.disable() // Reinit the Carousel again myCarousels.pmCarousel.reinit() ``` ### Health Score 30 — LowBetter than 64% of packages Maintenance50 Moderate activity, may be stable Popularity20 Limited adoption so far Community9 Small or concentrated contributor base Maturity35 Early-stage or recently created project Bus Factor1 Top contributor holds 75% of commits — single point of failure 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 ~22 days Recently: every ~29 days Total 7 Last Release 365d ago ### Community Maintainers ![](https://www.gravatar.com/avatar/50adb591a0b201918bd150eff0cd4e536907b07a8a3b05afcc1993802b5bb139?d=identicon)[mably](/maintainers/mably) --- Top Contributors [![lordfpx](https://avatars.githubusercontent.com/u/1095121?v=4)](https://github.com/lordfpx "lordfpx (57 commits)")[![mably](https://avatars.githubusercontent.com/u/385653?v=4)](https://github.com/mably "mably (18 commits)")[![Funstenolf](https://avatars.githubusercontent.com/u/7912771?v=4)](https://github.com/Funstenolf "Funstenolf (1 commits)") ### Embed Badge ![Health badge](/badges/mably-pm-carousel/health.svg) ``` [![Health](https://phpackages.com/badges/mably-pm-carousel/health.svg)](https://phpackages.com/packages/mably-pm-carousel) ``` PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)