Glidejs 未在移动设备上加载

Question

我正在尝试将 glidejs 添加到 wordpress 网站，它在桌面上运行良好，但在移动设备上，它没有加载，似乎 JS 文件没有被执行。我在控制台中没有看到任何错误。 This the codepen。在移动设备上，我看到 3 张图片相互重叠。

模板

<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 是

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

Answer 1

1- 在主题的根目录下创建一个 glide 文件夹，与style.css 相同级别
2- 在此文件夹中放入 glide.min.js、glide.core.css、glide.theme.css 并创建 my.glide.js
3-在你的主题的functions.php中添加：

/**
 * 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' );

由于 Glide 没有依赖项，因此您将 array() 的依赖项留空为 glide.min.js，但将其添加到您的个人 my.glide.js
4- 在您的my.glide.js 中，触发脚本：

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

    // OR

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

})(jQuery);

请注意，您应该使用 child theme 进行自定义，否则您所做的所有更改都将在您使用的主题的下一次更新中被删除。
所以使用子主题并在子主题中执行相同的步骤。