Slick Uncaught TypeError: e(...).slick is not a function答案

【问题标题】：Slick Uncaught TypeError: e(...).slick is not a functionSlick Uncaught TypeError: e(...).slick is not a function
【发布时间】：2019-08-01 10:37:34
【问题描述】：

我知道有很多关于此的问题，特别是 this one。但是，该问题中的答案并不能解决我的问题，因此我要提出一个新问题。

我正在尝试通过 slick 创建一个滑块并收到两个错误：

未捕获的类型错误：e(...).slick 不是函数
jQuery.Deferred 异常：e(...).slick 不是函数 TypeError: e(...).slick 不是函数

我已经通过 npm (/node_modules/slick-slider/slick/) 安装了 slick。

这就是我将脚本排入队列的方式：

function enqueue_styles() {
    wp_enqueue_style( 'slick-slider-theme-styles', get_stylesheet_directory_uri() . '/node_modules/slick-slider/slick/slick-theme.css' );  
}
add_action( 'wp_enqueue_scripts', 'enqueue_styles');

function enqueue_scripts() {
    wp_enqueue_script('slick-slider-js', get_stylesheet_directory_uri() . '/node_modules/slick-slider/slick/slick.min.js', array('jquery'), '', true );
}
add_action( 'wp_enqueue_scripts', 'enqueue_scripts');

function replace_core_jquery_version() {
    wp_deregister_script( 'jquery-core' );
    wp_register_script( 'jquery-core', "https://code.jquery.com/jquery-3.1.1.min.js", array(), '3.1.1' );
    wp_deregister_script( 'jquery-migrate' );
    wp_register_script( 'jquery-migrate', "https://code.jquery.com/jquery-migrate-3.0.0.min.js", array(), '3.0.0' );
}
add_action( 'wp_enqueue_scripts', 'replace_core_jquery_version' );

JQuery 在 slick.js 之前加载。但是e(...) 向我暗示找不到光滑的文件？

Slick 标记 + JS：

jQuery(document).ready(function( $ ) {
	$('.imageCarousel__ul').slick({
	  dots: true,
	  infinite: false,
	  speed: 300,
	  slidesToShow: 4,
	  slidesToScroll: 4,
	  responsive: [
	    {
	      breakpoint: 1024,
	      settings: {
	        slidesToShow: 3,
	        slidesToScroll: 3,
	        infinite: true,
	        dots: true
	      }
	    },
	    {
	      breakpoint: 600,
	      settings: {
	        slidesToShow: 2,
	        slidesToScroll: 2
	      }
	    },
	    {
	      breakpoint: 480,
	      settings: {
	        slidesToShow: 1,
	        slidesToScroll: 1
	      }
	    }
	});

});

<?php 
 $image = shortcode_atts(
			array(
				'image' => 'image',
			), 
			$atts 
		);

		$image_ids = explode(',',$image['image']);

		$result = "<div class='imageCarousel'>";
		$result .= "<div class='imageCarousel__container justify-content-center'>";
		$result .= "<ul class='imageCarousel__ul d-flex flex-row'>";

		foreach( $image_ids as $image_id ){
			$result .='<li class="align-items-center">';
			$result .='<img src=';
		    $attachmentImage = wp_get_attachment_image_src( $image_id, 'full' );
		    $result .= $attachmentImage ? $attachmentImage['0'] : '';
		    $result .='>';
		    $result .='</li>';
		}

		$result .= "</ul>";
		$result .= "</div>";
		$result .= "</div>";

		return $result;
?>

【问题讨论】：

JQuery is loaded before slick.js 情况似乎并非如此。你打电话给wp_enqueue_scripts 然后replace_core_jquery_version
嗯，没错，但是在查看我页面的源代码时，slick 在 JQuery 下面？我已将replace_core_jquery_version 移至enqueue_styles 上方，但仍然导致错误
你的js文件是如何开始和结束的？！您触发 slick 的文件。
@RoryMcCrossan - wp_enqueue_script() 在代码中的哪个位置并不重要，只要第三个参数包含它应该出现的句柄即可。在这种情况下，slick-slider-js 在数组中没有 jquery-core（jQuery 的句柄），只有 jquery。这可能是个问题——如果没有带有 jquery 句柄的脚本，那么 slick-slider-js 就会等待，等待，等待......
@LebCit - 我在问题中添加了标记 + JS :)

标签： javascript php jquery wordpress slick.js

【解决方案1】：

你在放

wp_enqueue_script('slick-slider-js', get_stylesheet_directory_uri() . '/node_modules/slick-slider/slick/slick.min.js', array('jquery'), '', true );

之后js 文件触发光滑！

你应该这样做：

/**
 * Enqueue scripts and styles.
 */
function original_scripts() {
    wp_enqueue_style( 'default', get_theme_file_uri( '/css/default.css' ), array(), filemtime( get_theme_file_path( '/css/default.css' ) ) );

    wp_enqueue_style( 'slick', get_theme_file_uri( '/css/slick.css' ), array(), filemtime( get_theme_file_path( '/css/slick.css' ) ) );

    wp_enqueue_script( 'slick-js', get_theme_file_uri( '/js/slick.min.js' ), array( 'jquery' ), filemtime( get_theme_file_path( '/js/slick.min.js' ) ), true );

    wp_enqueue_script( 'main-js', get_theme_file_uri( '/js/main.js' ), array( 'jquery' ), filemtime( get_theme_file_path( '/js/main.js' ) ), true );


}
add_action( 'wp_enqueue_scripts', 'original_scripts' );

slick.min.js 必须在触发它的js 文件之前！

现在在main.js：

(function ($) {
    $('.your-class').slick({
    });
})(jQuery);

希望这会让你走上正轨；）

【讨论】：