PHPackages                             hryvinskyi/magento2-splide-js - 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. hryvinskyi/magento2-splide-js

ActiveMagento2-module[Utility & Helpers](/categories/utility)

hryvinskyi/magento2-splide-js
=============================

Magento 2 base module for Splide.js slider library

1.0.0(4mo ago)083↓33.3%1MITPHPPHP ^8.1

Since Jan 30Pushed 4mo agoCompare

[ Source](https://github.com/hryvinskyi/magento2-splide-js)[ Packagist](https://packagist.org/packages/hryvinskyi/magento2-splide-js)[ RSS](/packages/hryvinskyi-magento2-splide-js/feed)WikiDiscussions main Synced 3w ago

READMEChangelog (1)Dependencies (2)Versions (2)Used By (1)

Magento 2 / Adobe Commerce SplideJs
===================================

[](#magento-2--adobe-commerce-splidejs)

Magento 2 base module for [Splide.js](https://splidejs.com/) - a lightweight, flexible slider/carousel library.

Installation
------------

[](#installation)

### Manual Installation

[](#manual-installation)

1. Copy the module files to `app/code/Hryvinskyi/SplideJs/`
2. Run: ```
    bin/magento setup:upgrade
    bin/magento setup:di:compile
    bin/magento cache:flush
    ```

### Composer Installation

[](#composer-installation)

```
composer require hryvinskyi/magento2-splide-js
bin/magento setup:upgrade
bin/magento setup:di:compile
bin/magento cache:flush
```

Usage
-----

[](#usage)

### Basic Usage with data-mage-init

[](#basic-usage-with-data-mage-init)

```

            Slide 1
            Slide 2
            Slide 3

```

### Using in RequireJS Module

[](#using-in-requirejs-module)

```
define(['splide'], function (Splide) {
    'use strict';

    var splide = new Splide('.my-slider', {
        type: 'loop',
        perPage: 3,
        gap: '1rem',
        autoplay: true
    });

    splide.mount();
});
```

### Using the Widget Component

[](#using-the-widget-component)

```
define(['splideWidget'], function (splideWidget) {
    'use strict';

    var element = document.querySelector('.my-slider');
    var config = {
        type: 'loop',
        perPage: 3,
        gap: '1rem'
    };

    var slider = splideWidget(config, element);
});
```

Configuration Options
---------------------

[](#configuration-options)

OptionTypeDefaultDescription`type`string`slide`Slider type: `slide`, `loop`, or `fade``perPage`int`1`Number of slides to display`perMove`int`1`Number of slides to move at once`gap`string`1rem`Gap between slides`arrows`bool`true`Show navigation arrows`pagination`bool`true`Show pagination dots`autoplay`bool`false`Enable autoplay`interval`int`5000`Autoplay interval in milliseconds`speed`int`400`Transition speed in milliseconds`rewind`bool`false`Rewind to first slide at end`direction`string`ltr`Direction: `ltr`, `rtl`, or `ttb``lazyLoad`string/bool`nearby`Lazy load: `nearby`, `sequential`, or `false``breakpoints`object`{}`Responsive breakpoints configuration### Breakpoints Example

[](#breakpoints-example)

```
{
    "breakpoints": {
        "1024": {
            "perPage": 3
        },
        "768": {
            "perPage": 2
        },
        "480": {
            "perPage": 1
        }
    }
}
```

Splide.js Documentation
-----------------------

[](#splidejs-documentation)

For complete Splide.js options and API documentation, visit:

Requirements
------------

[](#requirements)

- PHP 8.1+
- Magento 2.4.x

License
-------

[](#license)

MIT License

Author
------

[](#author)

Volodymyr Hryvinskyi

###  Health Score

36

—

LowBetter than 79% of packages

Maintenance74

Regular maintenance activity

Popularity11

Limited adoption so far

Community8

Small or concentrated contributor base

Maturity43

Maturing project, gaining track record

 Bus Factor1

Top contributor holds 100% 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

Unknown

Total

1

Last Release

147d ago

### Community

Maintainers

![](https://avatars.githubusercontent.com/u/9294098?v=4)[Volodymyr Hryvinskyi](/maintainers/hryvinskyi)[@hryvinskyi](https://github.com/hryvinskyi)

---

Top Contributors

[![hryvinskyi](https://avatars.githubusercontent.com/u/9294098?v=4)](https://github.com/hryvinskyi "hryvinskyi (2 commits)")

### Embed Badge

![Health badge](/badges/hryvinskyi-magento2-splide-js/health.svg)

```
[![Health](https://phpackages.com/badges/hryvinskyi-magento2-splide-js/health.svg)](https://phpackages.com/packages/hryvinskyi-magento2-splide-js)
```

###  Alternatives

[elgentos/regenerate-catalog-urls

Regenerate Catalog URL Rewrites (products, categories, cms pages)

2842.6M](/packages/elgentos-regenerate-catalog-urls)[run-as-root/magento2-prometheus-exporter

Magento2 Prometheus Exporter

68353.9k](/packages/run-as-root-magento2-prometheus-exporter)[myparcelnl/magento

A Magento 2 module that creates MyParcel labels

1859.0k](/packages/myparcelnl-magento)[loki/magento2-components

Core module for defining Alpine.js components with advanced AJAX features

1010.0k22](/packages/loki-magento2-components)[magepal/magento2-form-field-manager

Customer and Address Form Fields Manager for Magento2

273.9k](/packages/magepal-magento2-form-field-manager)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)