README

Magento 2 base module for Splide.js - a lightweight, flexible slider/carousel library.

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 require hryvinskyi/magento2-splide-js
bin/magento setup:upgrade
bin/magento setup:di:compile
bin/magento cache:flush

Usage

Basic Usage with data-mage-init

<div class="splide" data-mage-init='{"splideWidget": {"perPage": 3, "gap": "1rem"}}'>
    <div class="splide__track">
        <ul class="splide__list">
            <li class="splide__slide">Slide 1</li>
            <li class="splide__slide">Slide 2</li>
            <li class="splide__slide">Slide 3</li>
        </ul>
    </div>
</div>

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

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

Breakpoints Example

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

Splide.js Documentation

For complete Splide.js options and API documentation, visit: https://splidejs.com/documents/

Requirements

• PHP 8.1+
• Magento 2.4.x

License

MIT License

Author

Volodymyr Hryvinskyi volodymyr@hryvinskyi.com