SplideJS Configuration Generator

A powerful and intuitive visual configuration generator for SplideJS carousels. This tool helps developers quickly create and customize SplideJS configurations with real-time preview.

Features

• 🎯 Visual Configuration: Intuitive interface to customize all SplideJS options
• 🖥️ Real-time Preview: See your changes instantly with a live carousel preview
• 📱 Responsive Testing: Test your configuration across different breakpoints
• 📋 JSON Export: Copy the generated configuration with one click
• 🎨 Beautiful UI: Clean and modern interface built with React and Tailwind CSS
• 🔧 Advanced Options: Full access to all SplideJS configuration options

Configuration Options

Basic Options

• Type (Slide/Loop/Fade)
• Width and Height
• Items per page
• Gap between slides
• And more...

Advanced Features

• Responsive breakpoints
• Autoplay settings
• Navigation controls
• Keyboard navigation
• Padding configuration
• Timing and animation

Tech Stack

• ⚛️ React
• 🎨 Tailwind CSS
• 🛠️ Vite
• 📦 SplideJS
• 🎭 Radix UI
• ⚡ Lucide Icons

Development

To run this project locally:

# Clone the repository
git clone https://github.com/yourusername/splidejs-config-generator.git

# Navigate to the project directory
cd splidejs-config-generator

# Install dependencies
npm install

# Start the development server
npm run dev

Contributing

Contributions are welcome! Feel free to submit issues and pull requests.

License

MIT License - feel free to use this project for your own purposes.

Credits

• SplideJS - The core carousel library
• Unsplash - Demo images
• shadcn/ui - UI components
• Lucide - Icons