Splide

Provides integration with Splide, the vanilla JavaScript Slider.

Versions

• Splide:2.x requires Splide library v4.
• Splide:1.x requires Splide library v3 since 1.0.1, obsolete.

Requirements

1. Splide:
   • /libraries/splide/dist/css/splide-core.css
   • /libraries/splide/dist/css/splide.min.css (optional)
   • /libraries/splide/dist/js/splide.min.js

   Or any path supported by core library finder. The folder splidejs--splide via Composer asset-packagist takes precedence over splide. Be sure versions are expected.

2. Blazy 2.18+ || 3.x since Splide:1.0.9, including splide:2.x.
3. field_image and field_images for the provided samples, Splide X.

How to use

Check out the provided docs at /admin/help/splide_ui and /admin/help/splide_x after installations. Or here:

• https://git.drupalcode.org/project/splide/-/tree/1.0.x/docs
• https://git.drupalcode.org/project/splide/-/blob/1.0.x/modules/splide_x/...

How to migrate Slick to Splide

• Download the relevant Splide library.
• Change Slick formatters or Views styles to Splide's, including optionsets. Splide has what Slick has plus some betterment at some levels.
• If using navigation, update Thumbnail navigation options to Splide Nav relevant options. These are the only different namings including optionset stuffs, the rest are identical.
• If using Slick example, find the relevant samples via the included Splide X.
• Replace any custom Slick's references with Splide's as outlined here.
• Watch out the difference between Splide's HTML structure versus Slick's. Press F12, and Inspect elements for more accurate DOM hierarchy normally affected/generated by JavaScript and options like skins, arrows, navs, extra wrapper divs, etc.
• Clear caches as usual, or drush cr.

Modules which require, or work with Splide

• Splidebox
• ElevateZoom Plus

FAQs

Q: What values does this module add over existing solutions?
A:

• Vanilla JavaScript, no jQuery, inline with core direction.
• Absurdly small size, half of Slick minified js, non-gzip (Splide 27KB vs. Slick 42KB + 89KB jQuery, roughly). Still smaller than Colorbox 11Kb + 89KB jQuery to be fair.
• Plugin system, like Drupal core plugin system. It is trivial and cleaner to add custom or advanced needs.
• Vanilla with navigation supports, and a few more betterment.

Q: Caveats?
A:
It uses flexbox, meaning great for modern-oriented sites, but likely not for old IEs (<=IE9). Sticking to Slick is recommended if you want to support oldies. Check out stats here against your visitors. Splide inherited Slick's battles, but not its scars. Aside from a few obvious improvements, a few issues might or might not be resolved, or inherited.

Q: Why another carousel?
A:
Slick 2.x as vanilla JavaScript was out 9/21/15, 6 years ago from 2021, and hadn't been officially supported so far. How much I love Slick, unfortunately Slick library as the vanilla one appeared to no longer be developed in the last 6 years, if not ceased. People got priorities, of course . The new Splide library which was inspired by Slick can be considered as its successor for future betterment and development, hopefully. Rest assured credit where credit's due to Slick contributors either as the library, or the module.

Q: The library appears to be dead in 2024?
A:
IMHO, dead or alive, no problems. Most libraries, even commercial ones, are dead at one point in time anyway. What matters is functionality and very minimum unresolved bugs. If any standing bugs, at least workarounds would do.

Sponsors/ backers

Thank you for supporting the project!

• Karl Shea backed Splide v4 migration.
• Become a sponsor or a backer if you are interested in fostering the project development.