https://github.com/ndiego/carousel-block-speed-build
A custom carousel block plugin built during the Speed Build Challenge at WordCamp Asia 2025.
https://github.com/ndiego/carousel-block-speed-build
carousel-slider wordpress wordpress-plugin
Last synced: 3 months ago
JSON representation
A custom carousel block plugin built during the Speed Build Challenge at WordCamp Asia 2025.
- Host: GitHub
- URL: https://github.com/ndiego/carousel-block-speed-build
- Owner: ndiego
- Created: 2025-02-21T23:10:30.000Z (over 1 year ago)
- Default Branch: master
- Last Pushed: 2025-02-22T01:02:18.000Z (over 1 year ago)
- Last Synced: 2025-02-22T02:21:52.059Z (over 1 year ago)
- Topics: carousel-slider, wordpress, wordpress-plugin
- Language: JavaScript
- Homepage:
- Size: 248 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Carousel Block - WordCamp Asia 2025 Speed Build Challenge
This block was initially created during the [Speed Build Challenge](https://asia.wordcamp.org/2025/session/wordpress-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](https://cursor.sh/).
## 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](https://cursor.sh/)
- Uses [Splide.js](https://splidejs.com/) for carousel functionality
## License
GPLv2 or later