Download the PHP package mably/pm-carousel without Composer
On this page you can find all versions of the php package mably/pm-carousel. It is possible to download/install these versions without Composer. Possible dependencies are resolved automatically.
Download mably/pm-carousel
More information about mably/pm-carousel
Files in mably/pm-carousel
Package pm-carousel
Short Description Mirror of the pm-carousel javascript library tagged as a Drupal library (patched).
License GPL-3.0-or-later
Homepage https://github.com/lordfpx/pm-carousel
Informations about the package pm-carousel
pm-carousel
Accessible carousel plugin written in JS with no dependencies.
Examples here: https://lordfpx.github.io/pm-carousel/
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
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
:
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.
Paging (optional)
The HTML inside the button can be freely personalized. {nbr}
is mandatory and will be replaced by the slide number.
The slides
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}
.
Settings
Default settings:
Usage
In your script:
If you need to load the script directly on your page, or to import it the "old-fashion way" (see https://github.com/umdjs/umd), you can find the umd
version inside the dist
folder: pm-carousel.umd.js
.
Initialize
2 ways to initialize pm-carousel
:
-
For all carousels with default options:
- For specified carousels only (with default options):
Both methods can be called again when new carousels are injected into the DOM.
Settings
2 methods:
-
When calling
pmCarousel
function: - Inside the
data-pm-carousel
(the JSON must be valid!):
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
The instance of pm-carousel
can be reached from nodes with data-pm-carousel
attribute.
Play and Stop
Only available when Play/Pause button is present.