glidejs - Glide JS data-glide-dir next 未正确呈现

Question

我将 Glide JS 用于我使用 ACF 和 Gutenberg Blocks 构建的幻灯片。

但是下一个按钮有问题。 ">"无法正确呈现 - 它会破坏整个 DOM。 “data-glide-dir”下一个命令有替代方法吗？当我删除 data-glide-dir=">"时，一切正常。

下面是我使用的代码——屏幕截图显示了它最终是如何在浏览器中呈现的。

screenshot

<?php $gallery = get_field('images'); ?>
<?php if( $gallery ) : ?>

    <div class="gcont">

        <div class="glide">

            <div class="glide__track" data-glide-el="track">
                <ul class="glide__slides">
                <?php foreach( $gallery as $image ) : ?>
                    <li class="glide__slide"><img class="full-width-image" src="<?php echo esc_url($image['sizes']['large']); ?>" alt="<?php echo esc_attr($image['alt']); ?>"></li>
                <?php endforeach; ?>
                </ul>
            </div>

            <div class="glide__arrows" data-glide-el="controls">
                <button class="glide__arrow glide__arrow--prev" data-glide-dir="<">prev</button>
                <button class="glide__arrow glide__arrow--next" data-glide-dir=">">next</button>
            </div>

        </div>

    </div>

<?php endif; ?>

Answer 1

对我来说诀窍是用 < 编码 <和 > 与 >
另见:HTML: Should I encode greater than or not? ( > &gt; )