Glidejs is not loading on mobile

admin

Administrator
Staff member
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. <a href="https://codepen.io/usmonovsardor7770/pen/WEqjMa" rel="nofollow noreferrer">This the codepen</a>. On mobile I see 3 pictures on top of each other.

the template

Code:
&lt;section id="Glide" class="glide banner_desktop"&gt;

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

     &lt;div class="glide__wrapper"&gt;
        &lt;ul class="glide__track"&gt;

&lt;?php if ( have_rows( 'banner_desktop', 'option' ) ) : ?&gt;
    &lt;?php while ( have_rows( 'banner_desktop', 'option' ) ) : the_row(); ?&gt;
    &lt;?php if ( get_sub_field( 'image' ) ) { ?&gt;

          &lt;li class="glide__slide"&gt;

    &lt;a href="&lt;?php the_sub_field( 'link' ); ?&gt;"&gt;
                    &lt;img src="&lt;?php the_sub_field( 'image' );?&gt;" /&gt;
                &lt;/a&gt;                
                &lt;/li&gt;

        &lt;?php
    }
         endwhile; endif;
         ?&gt;

        &lt;/ul&gt;
      &lt;/div&gt;
      &lt;!-- CAROUSEL DOTS --&gt;
      &lt;div class="glide__bullets"&gt;&lt;/div&gt;

&lt;/section&gt;

functions.php

Code:
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

Code:
var glide = function () {
// glide.min.js code which is on codepen 
//   https://cdn.jsdelivr.net/npm/[email protected]/dist/glide.min.js 
}();