Glidejs is not loading on mobile

Question

I'm trying to add glidejs to a wordpress site, it's working perfectly on desktop, but on mobile, it's not loading, seems that the JS files aren't being executed. I don't see a single error in the console. This the codepen. On mobile I see 3 pictures on top of each other.

the template

<section id="Glide" class="glide banner_desktop">

    <!-- ARROWS -->
      <div class="glide__arrows">
        <button class="glide__arrow prev" data-glide-dir="<"><i class="fa fa-chevron-left fa-2x" aria-hidden="true"></i>
</button>
        <button class="glide__arrow next" data-glide-dir=">"><i class="fa fa-chevron-right fa-2x" aria-hidden="true"></i>
</button>
      </div>

     <div class="glide__wrapper">
        <ul class="glide__track">

<?php if ( have_rows( 'banner_desktop', 'option' ) ) : ?>
    <?php while ( have_rows( 'banner_desktop', 'option' ) ) : the_row(); ?>
    <?php if ( get_sub_field( 'image' ) ) { ?>

          <li class="glide__slide">

    <a href="<?php the_sub_field( 'link' ); ?>">
                    <img src="<?php the_sub_field( 'image' );?>" />
                </a>                
                </li>

        <?php
    }
         endwhile; endif;
         ?>

        </ul>
      </div>
      <!-- CAROUSEL DOTS -->
      <div class="glide__bullets"></div>

</section>

functions.php

wp_enqueue_script( 'glide', get_bloginfo( 'stylesheet_directory' ) . '/js/glide/glide.js', array('jQuery') );
wp_enqueue_script( 'glide_Js', get_bloginfo( 'stylesheet_directory' ) . '/js/glide/glide_JS.js', array('jQuery') );

wp_enqueue_style( 'glide_css', get_bloginfo( 'stylesheet_directory' ) . '/js/glide/glide.css');
wp_enqueue_style( 'glide_theme', get_bloginfo( 'stylesheet_directory' ) . '/js/glide/glide_theme.css');

glide.js is

var glide = function () {
// glide.min.js code which is on codepen 
//   https://cdn.jsdelivr.net/npm/glidejs@2/dist/glide.min.js 
}();

score 1 · Accepted Answer · answered Jul 06 '19 at 23:26

1- Create a glide folder at the root of your theme, same level as style.css
2- In this folder put glide.min.js, glide.core.css, glide.theme.css and Create my.glide.js
3- In functions.php of your theme add :

/**
 * Enqueue Glide.js scripts and styles.
 */
function glide_js_scripts_styles() {
    wp_enqueue_style( 'glide-core', get_theme_file_uri( '/glide/glide.core.css' ), array(), filemtime( get_theme_file_path( '/glide/glide.core.css' ) ) );

    wp_enqueue_style( 'glide-theme', get_theme_file_uri( '/glide/glide.theme.css' ), array(), filemtime( get_theme_file_path( '/glide/glide.theme.css' ) ) );

    wp_enqueue_script( 'glide', get_theme_file_uri( '/glide/glide.min.js' ), array(), filemtime( get_theme_file_path( '/glide/glide.min.js' ) ), true );

    wp_enqueue_script( 'my-glide', get_theme_file_uri( '/glide/my.glide.js' ), array('jquery'), filemtime( get_theme_file_path( '/glide/my.glide.js' ) ), true );
}
add_action( 'wp_enqueue_scripts', 'glide_js_scripts_styles' );

Since Glide has no dependency, you leave the dependency array() empty for glide.min.js, but you add it to you personal one my.glide.js
4- In your my.glide.js, fire the script :

(function ($) {
    new Glide('.glide', {
        type: 'carousel',
        startAt: 0,
        perView: 3
    });

    // OR

    $('.glide').glide({
        type: 'carousel',
        startAt: 0,
        perView: 3
    });

})(jQuery);

Please, note that you should use a child theme for your customization or all your changes will be removed in the next update of the theme that you are using.
So use a child theme and make the same steps in the child theme.

Thanks for answering my fellow Lebanese :) Once in a lifetime I encounter people from my country here. Should I use the latest version of glide? I'm using 2.x, strangely 3.x didn't work at all, maybe I'm doing something wrong. I'll test your answer tomorrow and let you know if it worked. — Lynob, Jul 06 '19 at 23:44
Hello :) Generally speaking, it's better to use the last build of a script. You where not correctly calling the files. Their is no `jQuery` handle dependency in [wp_enqueue_script](https://developer.wordpress.org/reference/functions/wp_enqueue_script/) but a `jquery` one. And some script are dependency free, so we leave the `array()` empty. Finally, always refer to the [Code Reference](https://developer.wordpress.org/reference/) you'll find in depth documentation, best practice of use and examples. Please, let me know when you try :) — LebCit, Jul 07 '19 at 00:00

Glidejs is not loading on mobile

1 Answers1