WebGL Carousel - 高性能画像カルーセルライブラリ

主な特徴

⚡

高速パフォーマンス

WebGLによるGPU加速で60fpsの滑らかなアニメーションを実現

🎨

豊富なエフェクト

15種類以上のビルトインエフェクトとカスタムシェーダーサポート

📱

レスポンシブ対応

モバイルデバイスでも快適に動作するタッチジェスチャー対応

🔧

フレームワーク対応

React、Vue、Svelteなど主要フレームワークをサポート

🎯

カスタマイズ可能

独自のGLSLシェーダーを使用してオリジナルエフェクトを作成

🔄

フォールバック

WebGL非対応環境でもCanvas 2Dによる代替表示

デモ

WebGL Carouselの全機能をインタラクティブなデモページでお試しください。様々なトランジションエフェクトやカスタムシェーダーを実際に体験できます。

▶ インタラクティブデモを開く

インストール

npm

npm install webgl-carousel

yarn

yarn add webgl-carousel

CDN

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

使い方

基本的な使い方

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での使い方

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での使い方

<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での使い方

<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;"
/>

利用可能なエフェクト

fade

シンプルなフェード効果

slideLeft / slideRight

左右へのスライド

slideUp / slideDown

上下へのスライド

flipHorizontal / flipVertical

3D回転エフェクト

wave

波形アニメーション

distortion

歪みエフェクト

dissolve

ディゾルブ効果

pixelDissolve

ピクセル単位のディゾルブ

circle

円形トランジション

morph

モーフィング効果

glitch

グリッチエフェクト

API リファレンス

コンストラクタオプション

オプション	型	デフォルト	説明
container	string \| HTMLElement	必須	カルーセルを表示するコンテナ
images	string[]	[]	表示する画像のURL配列
effect	string	'fade'	使用するトランジションエフェクト
autoplay	boolean	false	自動再生の有効/無効
interval	number	3000	自動再生の間隔（ミリ秒）
transitionDuration	number	1000	トランジションの長さ（ミリ秒）
loop	boolean	true	最後の画像の後に最初に戻るか
showControls	boolean	true	ナビゲーションコントロールの表示
showIndicators	boolean	true	インジケーターの表示

メソッド

// 次の画像へ
carousel.next();

// 前の画像へ
carousel.previous();

// 特定のインデックスへ
carousel.goTo(2);

// 自動再生の開始/停止
carousel.play();
carousel.pause();

// エフェクトの変更
carousel.setEffect('wave');

// リサイズ
carousel.resize();

// 破棄
carousel.dispose();

イベント

// 画像変更時
carousel.on('change', (index) => {
  console.log('Current image:', index);
});

// トランジション開始時
carousel.on('transitionStart', (from, to) => {
  console.log(`Transitioning from ${from} to ${to}`);
});

// トランジション完了時
carousel.on('transitionEnd', (index) => {
  console.log('Transition completed:', index);
});

// エラー時
carousel.on('error', (error) => {
  console.error('Carousel error:', error);
});

カスタムエフェクトの作成

独自のGLSLシェーダーを使用してカスタムエフェクトを作成できます。

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;
    
    // カスタムエフェクトロジック
    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);
  }
  `
);

// カスタムエフェクトを登録
carousel.registerEffect(myEffect);
carousel.setEffect('myCustomEffect');