Splide Premium

Splide Shader Carousel uses three.js for manipulating WebGL. The technology allows us to create a variety of attractive transition effects that can not be done with CSS.

The following image illustrates layers of the carousel. Splide Shader Carousel places a canvas behind a Splide fade carousel, converts images inside slides as textures of a plain mesh, and syncs each other.

Currently, only images are supported as textures, but videos will be in the future.

The SplideShaderCarousel class extends the Splide class, but:

• It only works in the fade type
• It does not support IE
• It is not compatible with some Splide options

These options do not work: type (fade only), perPage, perMove, clones, cloneStatus, focus, gap, padding, easingFunc, lazyLoad and cover.

Also, three.js is kind of a large library (500kB+). It would worsen the Lighthouse score on your site.

This package is provided based on the MIT License, but do not use it for distribution purpose. You may deploy "dist" files, including files built with them, to your server or repository for integrating Splide Shader Carousel into your project. You may freely use them for public, private, or commercial use, once you become a sponsor with the specified monthly tier below. However, you may not make other files public, such as source code, examples, documents etc., since it would counteract the sponsorware strategy.

If you quit a sponsor, GitHub will remove you as a collaborator, but you may keep using those files as long as you like.

Please read caveats and terms above. Thank you!