我正在尝试将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
}();
最佳答案
1-在主题的根目录创建一个滑动文件夹,与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进行自定义,否则所有更改将在您使用的主题的下一次更新中被删除。
因此,请使用子主题,并在子主题中执行相同的步骤。