Question

我知道与此有关的问题很多，尤其是this one。但是，该问题中的答案无法为我解决问题，因此我打开了一个新问题。

我试图通过滑动创建滑块并收到两个错误：

未捕获的TypeError：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(...)向我暗示找不到光滑的文件吗？

光滑标记+ 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;
?>

Answer 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);

希望这会让您步入正轨;）

Slick Uncaught TypeError：e（...）。slick不是函数

1 个答案: