Shaders plugin for Swiper
npm install swiper-plugin-shadersts
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
`ts
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`