swiper-plugin-shaders

Usage

import Shaders, { installShaders, configDefault } from "swiper-plugin-shaders"
import "swiper-plugin-shaders/style"

import AllShaders from "swiper-plugin-shaders/dist/loaders"
installShaders(AllShaders)

new Swiper(".swiper", {
  modules: [Shaders, configDefault],
  speed: 1e3,
  effect: "gl",
  loop: !0,
  gl: { shader: "random" },
  navigation: { prevEl: ".swiper-button-prev", nextEl: ".swiper-button-next" },
})

or if not use all shaders

import Shaders, { installShaders, configDefault } from "swiper-plugin-shaders"
import "swiper-plugin-shaders/style"

import Dots from "swiper-plugin-shaders/dist/loaders/dots"
installShaders(Dots)

new Swiper(".swiper", {
  modules: [Shaders, configDefault],
  speed: 1e3,
  effect: "gl",
  loop: !0,
  gl: { shader: "dots" },
  navigation: { prevEl: ".swiper-button-prev", nextEl: ".swiper-button-next" },
})

List shaders:

• dots
• flyeye
• morph-x
• morph-y
• page-curl
• peel-x
• peel-y
• pixelize
• polygons-fall
• polygons-morph
• polygons-wind
• ripple
• shutters
• slices
• squares
• stretch
• wave-x
• wind