Released!

Splide Premium

Enrich your next project with impressive transition effects by Splide and WebGL (three.js).

Available in the sponsor-only repository!

Fiber Mask

Radial Gradient Mask

Wave Mask

Cloud Mask

Dissolve

Splide Shader Carousel

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.

Place the canvas behind the main carousel

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

Caveats

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.

Terms

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 tier below. However, you may not make other files public, such as source code, examples, documents etc., since it would counteract the sponsorware strategy.

Personal Developer$10~
Organization$100~

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

Be A Sponsor

Please read caveats and terms above. Thank you!

Go to Sponsor Page