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 没有依赖项，您将 glide.min.js 的依赖项 array() 留空，但将其添加到您的个人 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 进行自定义，否则您所做的所有更改将在您正在使用的主题的下一次更新中被删除。
所以使用子主题，在子主题中做同样的步骤。

Glidejs 未在移动设备上加载

Glidejs is not loading on mobile

javascript

wordpress

jquery

glidejs