colorful-tones / acf-slider-block

A slider carousel block with ACF Blocks and SwiperJS

ACF Slider Block plugin

Fork it, or download the latest release, and make it your own!

This is a demonstration of how you might create a custom ACF Block, which is a slider carousel UI. We're using SwiperJS (3rd-party dependency) for the slider JavaScript and CSS (mostly).

Installation

Required You must have ACF PRO installed and activated in order to use the ACF Slider Block plugin.

Manual

1. Upload the acf-slider-block folder to the plugins directory (typically wp-content/plugins) in your WordPress installation.
2. Activate the ACF Slider Block plugin.
3. Create a new post or page, and insert the Slider block.
4. That's it.

Changelog

0.1.2 – 2023-11-15

Squash the bugs 🐛

• Adjust z-index for 'Add Slide' button in editor for easier clicking.
• Adjust placeholder, default image paths for resilience.
• Remove unnecessary console.log()

0.1.1 – 2023-11-15

Initial release, which includes:

• Slider Block which uses SwiperJS (v11.0.4)
  • Two style variations: "Default" and "Complex" - examples of how you might have different variations. Feel free to fork and modify!

Resources

• Need help converting your block markup to PHP nested arrays or JS objects? Check out WPHTML Converter
• Download and include the latest SwiperJS from JSDelivr.com.
• Developer.WordPress.org - 'Metadata in block.json'
• Developer.WordPress.org - 'Supports'