Carousel Block - WordCamp Asia 2025 Speed Build Challenge

This block was initially created during the Speed Build Challenge at WordCamp Asia 2025, with approximately an additional hour of refinement work afterward. Total development time was about 1.5 hours, built using Cursor.

Description

A WordPress block that creates a responsive, customizable carousel/slider using cover blocks as slides. Built with modern WordPress development practices and the Splide.js library.

Features

• Supports multiple slides with configurable number of visible slides (1-3)
• Adjustable gap between slides
• Customizable minimum height for slides
• Optional infinite loop functionality
• Interactive floating arrows for navigation
• Color customization through WordPress color palette
• Full support for WordPress block alignment (full-width, wide, and default)
• Fully responsive with mobile optimization
• Compatible with WordPress block themes
• Built using modern WordPress block development practices

Technical Details

• Built using @wordpress/create-block
• Uses Splide.js for carousel functionality
• Follows WordPress coding standards
• Implements modern React patterns
• Supports WordPress color system integration
• Uses CSS custom properties for dynamic styling

Installation

1. Download or clone this repository
2. Run npm install to install dependencies
3. Run npm run build to build the block
4. Activate the plugin in WordPress

Usage

1. Add the Carousel block to your page/post
2. Add Cover blocks as slides
3. Customize the carousel settings in the block sidebar:
   • Number of slides to show
   • Gap between slides
   • Minimum height
   • Loop functionality
   • Arrow color

Development

• npm start - Starts the development environment
• npm run build - Builds the production version
• npm run format - Formats code according to WordPress standards

Credits

• Built during WordCamp Asia 2024 Speed Build Challenge
• Additional development using Cursor
• Uses Splide.js for carousel functionality

License

GPLv2 or later