WebGL Carousel - High-Performance Image Carousel Library

Key Features

⚡

High Performance

GPU-accelerated rendering with WebGL delivers 60fps smooth animations

🎨

Rich Effects

20+ built-in effects with custom shader support for creative transitions

📱

Responsive Design

Mobile-friendly with touch gesture support for seamless user experience

🔧

Framework Support

Native components for React, Vue, and Svelte frameworks

🎯

Customizable

Create unique effects with custom GLSL shaders

🔄

Fallback Support

Automatic Canvas 2D fallback for non-WebGL environments

Live Demo

Experience all WebGL Carousel features in our interactive demo. Try various transition effects and custom shaders in real-time.

▶ Launch Interactive Demo

Installation

npm

npm install webgl-carousel

yarn

yarn add webgl-carousel

CDN

<script src="https://unpkg.com/webgl-carousel/dist/webgl-carousel.umd.js"></script>

Usage

Basic Usage

import { WebGLCarousel } from 'webgl-carousel';

const carousel = new WebGLCarousel.WebGLCarousel({
  container: '#carousel',
  images: [
    'path/to/image1.jpg',
    'path/to/image2.jpg',
    'path/to/image3.jpg'
  ],
  effect: 'fade',
  autoplay: true,
  transitionDuration: 2000
});

React Usage

import { ReactCarousel } from 'webgl-carousel/react';

function App() {
  const images = [
    'path/to/image1.jpg',
    'path/to/image2.jpg',
    'path/to/image3.jpg'
  ];

  return (
    <ReactCarousel
      images={images}
      effect="slideLeft"
      autoplay
      transitionDuration={1500}
      style={{ width: '100%', height: '400px' }}
    />
  );
}

Vue Usage

<template>
  <VueCarousel
    :images="images"
    effect="wave"
    :autoplay="true"
    :transition-duration="2000"
    style="width: 100%; height: 400px;"
  />
</template>

<script setup>
import { VueCarousel } from 'webgl-carousel/vue';

const images = [
  'path/to/image1.jpg',
  'path/to/image2.jpg',
  'path/to/image3.jpg'
];
</script>

Svelte Usage

<script>
  import { SvelteCarousel } from 'webgl-carousel/svelte';
  
  const images = [
    'path/to/image1.jpg',
    'path/to/image2.jpg',
    'path/to/image3.jpg'
  ];
</script>

<SvelteCarousel
  {images}
  effect="flip"
  autoplay={true}
  transitionDuration={1800}
  style="width: 100%; height: 400px;"
/>

Available Effects

fade

Simple fade transition

slideLeft / slideRight

Horizontal slide transitions

slideUp / slideDown

Vertical slide transitions

flipHorizontal / flipVertical

3D rotation effects

wave

Wave animation effect

distortion

Lens distortion effect

dissolve

Dissolve transition

pixelDissolve

Pixelated dissolve effect

circle

Circular reveal transition

morph

Morphing effect

glitch

Digital glitch effect

API Reference

Constructor Options

Option	Type	Default	Description
container	string \| HTMLElement	required	Container element or selector
images	string[]	[]	Array of image URLs
effect	string	'fade'	Transition effect name
autoplay	boolean	false	Enable automatic playback
interval	number	3000	Autoplay interval in milliseconds
transitionDuration	number	1000	Transition duration in milliseconds
loop	boolean	true	Loop back to first image after last
showControls	boolean	true	Show navigation controls
showIndicators	boolean	true	Show position indicators

Methods

// Navigate to next image
carousel.next();

// Navigate to previous image
carousel.previous();

// Jump to specific index
carousel.goTo(2);

// Start/stop autoplay
carousel.play();
carousel.pause();

// Change effect
carousel.setEffect('wave');

// Handle resize
carousel.resize();

// Cleanup
carousel.dispose();

Events

// Image change event
carousel.on('change', (index) => {
  console.log('Current image:', index);
});

// Transition start event
carousel.on('transitionStart', (from, to) => {
  console.log(`Transitioning from ${from} to ${to}`);
});

// Transition end event
carousel.on('transitionEnd', (index) => {
  console.log('Transition completed:', index);
});

// Error event
carousel.on('error', (error) => {
  console.error('Carousel error:', error);
});

Creating Custom Effects

Create unique transition effects using custom GLSL shaders.

import { createCustomEffect } from 'webgl-carousel';

const myEffect = createCustomEffect(
  'myCustomEffect',
  // Vertex shader (optional)
  `
  attribute vec2 aPosition;
  attribute vec2 aTexCoord;
  varying vec2 vTexCoord;
  
  void main() {
    gl_Position = vec4(aPosition, 0.0, 1.0);
    vTexCoord = aTexCoord;
  }
  `,
  // Fragment shader
  `
  precision mediump float;
  
  uniform sampler2D uTexture0;
  uniform sampler2D uTexture1;
  uniform float uProgress;
  uniform vec2 uResolution;
  
  varying vec2 vTexCoord;
  
  void main() {
    vec2 uv = vTexCoord;
    
    // Custom effect logic
    float wave = sin(uv.y * 10.0 + uProgress * 3.14159) * 0.05;
    vec2 distortedUV = vec2(uv.x + wave * uProgress, uv.y);
    
    vec4 color0 = texture2D(uTexture0, distortedUV);
    vec4 color1 = texture2D(uTexture1, uv);
    
    gl_FragColor = mix(color0, color1, uProgress);
  }
  `
);

// Register custom effect
carousel.registerEffect(myEffect);
carousel.setEffect('myCustomEffect');