Ultra Slider TS

React + TypeScript + Vite + Swiper + Three.js + DaisyUI
A futuristic full-screen slider with WebGL particle background, smooth Swiper transitions, and fully themeable UI.

Features

• Fully responsive full-screen Swiper slider
• Multiple effects: Slide, Fade, Cube, Coverflow, Flip, Creative
• Autoplay support with pause/resume controls
• DaisyUI styled arrows, pagination, and toolbar
• WebGL particle background using Three.js
• Theme switching (light/dark)
• Fully commented TypeScript + React code
• Zero-config setup for rapid development

Tech Stack

• React + Vite + TypeScript
• Swiper.js (carousel/slider)
• Three.js (WebGL background/particles)
• DaisyUI (UI components & styling)
• Tailwind CSS v4 (utility-first styling)

Project Setup

Install dependencies:

npm install

Development

Start development server with hot reload:

npm run dev

Production

Build the project for production:

npm run build

Lint

Run ESLint to check code quality:

npm run lint

File Structure Highlights

• src/App.tsx – main app with Swiper slider and toolbar
• src/components/Slide.tsx – slide component with cover-fit background
• src/components/Toolbar.tsx – effect/speed/theme controls
• src/components/WebGLBackground.tsx – Three.js WebGL particle background
• src/types/types.ts – TypeScript types for slider effects

Notes

• Swiper effects are fully customizable via toolbar
• Active slide is highlighted in DaisyUI pagination
• WebGL background auto-resizes on window resize
• All components are fully typed for TypeScript safety