PHPackages blackbird/hyva-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. blackbird/hyva-splide-js ActiveMagento2-module[Utility & Helpers](/categories/utility) blackbird/hyva-splide-js ======================== An implementation of SplideJS library in Hyvä Theme for Magento 2 2.0.1(2y ago)2016.7k↓35.7%2MITHTML Since Sep 11Pushed 2y ago1 watchersCompare [ Source](https://github.com/blackbird-agency/hyva-splide-js)[ Packagist](https://packagist.org/packages/blackbird/hyva-splide-js)[ RSS](/packages/blackbird-hyva-splide-js/feed)WikiDiscussions main Synced 1mo ago READMEChangelog (3)Dependencies (2)Versions (4)Used By (0) hyva-splide-js ============== [](#hyva-splide-js) [![Latest Stable Version](https://camo.githubusercontent.com/c83f3d6111a68769ec50c398cd3dc8d321bf562f7e51d86178daf9a2af0566a0/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f76657273696f6e2d322e302e312d626c7565)](https://packagist.org/packages/blackbird/hyva-splide-js)[![SplideJS Version](https://camo.githubusercontent.com/d469f4ad9e7cc0e5657641a32f24b967371d8e85883206a189aee8a257b4e8c8/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f73706c6964656a732d342e312e332d707572706c65)](https://github.com/Splidejs/splide/releases/tag/v4.1.3)[![License: MIT](https://camo.githubusercontent.com/817ed104e259ef6b374380d8edcd335cd48605463825ede349f5ab23d98dc824/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f6c6963656e73652f626c61636b626972642d6167656e63792f687976612d73706c6964652d6a732e737667)](./LICENSE) An implementation of [SplideJS library](https://splidejs.com/) in [Hyvä Theme for Magento 2](https://www.hyva.io/hyva-themes-license.html) You no longer need to worry about how to implement SplideJS in your Magento 2 Hyvä Theme projects. No manipulations required, instant use after installation. Splide is lazily loaded and does not affect performances accoding to [Hyvä documentation](https://docs.hyva.io/hyva-themes/writing-code/patterns/loading-external-javascript.html). [How It Works](#how-it-works) • [Installation](#installation) • [Usage](#usage) • [More modules](#more-modules) How It Works ------------ [](#how-it-works) The module simply loads SplideJS on all pages with at least one element in the DOM bearing the CSS class `splide` (the class required by SplideJS). When the library has been loaded on the page, a state stored in the [Alpine.store](https://alpinejs.dev/globals/alpine-store) is updated, indicating that SplideJS is ready for use. The state can also be used to force the library to be loaded at any time, here is an example using [forceLoad()](#example--usage-of-forceload) Installation ------------ [](#installation) > ### Requirements > > [](#requirements) > > - [Hyvä Magento 2 Theme](https://www.hyva.io/hyva-themes-license.html) ``` composer require blackbird/hyva-splide-js ``` ``` php bin/magento setup:upgrade ``` *In production mode, do not forget to recompile and redeploy the static resources.* Usage ----- [](#usage) Once the module has been installed, simply add the HTML code required to create a slider, as described in the [SplideJS documentation](https://splidejs.com/guides/getting-started/#html) ``` Slide 01 Slide 02 Slide 03 ``` Next, create a function to listen the [Alpine.store](https://alpinejs.dev/globals/alpine-store) state `is_loading` indicating that SplideJS has been loaded, and apply Splide to the HTML elements, as described in the [SplideJS documentation](https://splidejs.com/guides/getting-started/#applying-splide). ``` function myXData () { return { initSlider() { if (Alpine.store('').is_loaded) { new Splide('#my-slider', { ...options }).mount(); } } } } ``` *You can specify any of the SplideJS options as shown [here](https://splidejs.com/guides/options/)* Finally, set up the [x-data](https://alpinejs.dev/directives/data) directive and do not forget to call the previous function in an [x-effect](https://alpinejs.dev/directives/effect), to prevent Splide being applied until the library is loaded, and to allow it to be automatically applied when the library is loaded. ``` ... ``` ### Full example [](#full-example) ``` Slide 01 Slide 02 Slide 03 function myXData () { return { initSlider() { if (Alpine.store('').is_loaded) { new Splide('#my-slider', { ...options }).mount(); } } } } ``` *You can specify any of the SplideJS options as shown [here](https://splidejs.com/guides/options/)* ### Example : usage of `forceLoad()` [](#example--usage-of-forceload) Imagine the following case: you do not have an element with the default `splide` class in your DOM, and you want to add a slider using SplideJS when a user's action is triggered. In this case, Splide won't be loaded by default on the page, you will have to explicitly request that Splide be loaded. ``` Alpine.store('').forceLoad() ``` or ``` $store..forceLoad() ``` *To find out exactly which one to use, please see the official Alpine documentation for [$store](https://alpinejs.dev/magics/store) or for [Alpine.store](https://alpinejs.dev/globals/alpine-store).* This will force the library to load on the page, even if no element has the `splide` class. You can then follow the classic [Usage](#usage) procedure to apply Splide. More modules ------------ [](#more-modules) [hyva-photo-swipe](https://github.com/blackbird-agency/hyva-photo-swipe) : An implementation of PhotoSwipe library in Hyvä Theme for Magento 2, full-screen gallery sliders, zoomable and highly customizable. ### Health Score 31 — LowBetter than 68% of packages Maintenance20 Infrequent updates — may be unmaintained Popularity36 Limited adoption so far Community9 Small or concentrated contributor base Maturity45 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 Every ~8 days Total 3 Last Release 965d ago Major Versions 1.0.0 → 2.0.02023-09-26 ### Community Maintainers ![](https://avatars.githubusercontent.com/u/12445118?v=4)[anthony-blackbird](/maintainers/anthony-blackbird)[@anthony-blackbird](https://github.com/anthony-blackbird) --- Top Contributors [![luderic-blackbird](https://avatars.githubusercontent.com/u/144663333?v=4)](https://github.com/luderic-blackbird "luderic-blackbird (15 commits)") --- Tags hyva-themesslidersplidejs ### Embed Badge ![Health badge](/badges/blackbird-hyva-splide-js/health.svg) ``` [![Health](https://phpackages.com/badges/blackbird-hyva-splide-js/health.svg)](https://phpackages.com/packages/blackbird-hyva-splide-js) ``` ### Alternatives [tig/postnl-magento2 TIG Magento 2 PostNL extension 58544.2k4](/packages/tig-postnl-magento2)[lillik/magento2-price-decimal Magento 2 Price Decimal Precision 111147.5k](/packages/lillik-magento2-price-decimal)[nosto/module-nostotagging Increase your conversion rate and average order value by delivering your customers personalized product recommendations throughout their shopping journey. 27659.1k4](/packages/nosto-module-nostotagging)[doofinder/doofinder-magento2 Doofinder module for Magento 2 13204.0k1](/packages/doofinder-doofinder-magento2)[magepal/magento2-form-field-manager Customer and Address Form Fields Manager for Magento2 293.8k](/packages/magepal-magento2-form-field-manager)[graycore/magento2-graphql-introspection-cache 1015.2k](/packages/graycore-magento2-graphql-introspection-cache) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)