Glidejs没有在移动上加载

Question

我试图在wordpress站点上添加滑翔器，它在桌面上运行得很好，但是在移动平台上，它没有加载，似乎JS文件没有被执行。我在控制台中没有看到一个错误。这就是密码。在手机上，我看到了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-在主题根目录创建一个滑动文件夹，与style.css级别相同。

2-在这个文件夹中放置glide.min.js、glide.core.css、glide.theme.css和Create 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' );

由于幻灯片没有依赖项，所以将dependency 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);

请注意，您应该使用 儿童主题进行自定义，否则在您使用的主题的下一次更新中将删除所有更改。

因此，使用子主题并在子主题中执行相同的步骤。