README

TWS Block Slider Carousel

将 WORDPRESS GUTENBERG 块转换为轮播图

将符合条件的 WordPress 块转换为轮播图作为 swiper 实例。符合条件的块包括：

• 可以包含内嵌块（例如 Group 块 core/group）的块，它具有父/子 DOM 元素。例如，在 Group 块中
  • 父元素是具有类 wp-block-group 的外部 <div> 元素，并且
  • 子元素是具有类 wp-block-group__inner-container 的内部 <div> 元素。

安装（通过 Composer）

要安装此插件，请编辑您的 composer.json 文件

"require": {
	"thewebsolver/tws-block-slider-carousel": "dev-master"
}

然后在终端中运行

$ composer install

用法

添加自定义块的支持

如果您想将任何其他块转换为轮播图，这些块实现与核心 Group 块类似父/子 DOM 元素，您可以使用过滤器钩子添加它们。

<?php // Filename: functions.php

/**
 * Make custom block eligible for converting to slider carousel.
 *
 * @param string[] $blocks The eligible blocks to convert to slider carousel.
 * @return string[] The modified eligible block names.
 */
function add_eligible_block_for_slider( array $blocks ): array {
	$blocks[] = 'namespace/custom-block';

	return $blocks;
}
add_filter( 'hzfex_eligible_slider_carousel_blocks', 'add_eligible_block_for_slider' );

/**
 * Make above block converted to slider on frontend.
 *
 * @param string[] $elements The custom block's outer & inner container classnames.
 * @return string[] The modified block element classes.
 */
function convert_block_to_slider( array $elements ): array {
	$elements[] = array(
		'parent'  => 'parent-block-classname',
		'child'   => 'parent-block-inner-container-classname'
	);

	return $elements;
}
add_filter( 'hzfex_slider_carousel_container_element', 'convert_block_to_slider' );

在块编辑器检查器中

一旦设置符合条件的块，轮播图就可以通过检查器控制面板启用和配置选项。

过滤器钩子

所有 PHP 代码 （包括过滤器） 都在主插件文件 tws-block-slider-carousel.php 中。

屏幕截图

核心选项

常规选项

子弹选项

响应式选项

支持

-----------------------------------
 * DEVELOPED-MAINTAINED-SUPPPORTED BY
 * -----------------------------------
 * ███║     ███╗   ████████████████
 * ███║     ███║   ═════════██████╗
 * ███║     ███║        ╔══█████═╝
 *  ████████████║      ╚═█████
 * ███║═════███║      █████╗
 * ███║     ███║    █████═╝
 * ███║     ███║   ████████████████╗
 * ╚═╝      ╚═╝    ═══════════════╝