1

I want to use Glide.JS for my Wordpresse Site. I read the doc and i have transposit the explication for WP.

https://glidejs.com/docs/setup/

I have installed with "npm" in my theme folder and i have writing code in my fonction.php folder :

enter image description here

My code in single.php :

                    <div class="glide">
                    <?php 
                        $images = get_field('galery');
                        if( $images ): ?>
                            <div class="glide__track" data-glide-el="track">
                                <ul class="glide__slides">
                                    <?php foreach( $images as $image ): ?>
                                        <li class="glide__slide">
                                            <a href="<?php echo esc_url($image['url']); ?>">
                                                <img src="<?php echo esc_url($image['sizes']['thumbnail']); ?>" alt="<?php echo esc_attr($image['alt']); ?>">
                                            </a>
                                            <p><?php echo esc_html($image['caption']); ?></p>
                                        </li>
                                    <?php endforeach; ?>
                                </ul>
                            </div>
                            <div class="glide__arrows" data-glide-el="controls">
                                <button class="glide__arrow glide__arrow--left" data-glide-dir="<">prev</button>
                                <button class="glide__arrow glide__arrow--right" data-glide-dir=">">next</button>
                            </div>
                            
                        <?php endif; ?>
                    </div>
                    <script>
                        import Glide from '@glidejs/glide'
                        new Glide('.glide').mount()
                    </script>

I have a begin of result but i have this error in my console :

Uncaught SyntaxError: import declarations may only appear at top level of a module

I believe of my problem is in this explication, I don't see how do for Wordpress

Thank's !

enter image description here

d3LTa7
  • 51
  • 7

1 Answers1

2

It's because you're using an import statement in the script tag for single.php. You would only use the import statement in an ES module as shown in your screen capture.

Because you're enqueueing the script in functions.php, glide.js is available globally and you should remove the import statement from the script tag and glide will be initialized.

Alternately, you could take advantage of a CDN as described here https://glidejs.com/docs/setup/ to host the code.

Fettabachi
  • 79
  • 6