3

I use Glide JS for a Slideshow that I built with ACF and Gutenberg Blocks.

But there is an issue with the next button. The ">" does not get rendered correctly – and it destroyes the whole DOM. Is there an alternative for the "data-glide-dir" next command? When i remove the data-glide-dir=">" everything works just fine.

Below is the code I use – the screenshot shows how it finally gets rendered in the browser.

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; ?>
blockundstift
  • 31
  • 2

1 Answers1

3

What did the trick for me was encoding < with &lt; and > with &gt;

See also: HTML: Should I encode greater than or not? ( > &gt; )

Robin Stickel
  • 163
  • 1
  • 10