Slick slider ().slick 不是 Wordpress PHP 的函数

Posted 2023-05-09

【中文标题】Slick slider ().slick 不是 Wordpress PHP 的函数

【英文标题】：Slick slider ().slick not a function with Wordpress PHP

【发布时间】：2021-10-23 09:23:49

【问题描述】：

我对这个错误的原因感到困惑。使用 Slick Slider 时，我收到“未捕获的 TypeError: $(...).slick is not a function”。我正在使用 WordPress 中的代码并将其添加为带有 php 生成数据的插件。在我将 WordPress 更新到 5.8 版之前，滑块一直运行良好。似乎没有找到 slick.js，但据我所知，脚本被正确调用。我猜这与 WordPress PHP 有关，而不是与滑块的 jQuery 有关？我不太确定。如果您有任何想法，我将不胜感激！

$(document).ready(function()
    $('.center').slick(
  centerMode: true,
  centerPadding: '60px',
  slidesToShow: 3,
  responsive: [
    
      breakpoint: 768,
      settings: 
        arrows: false,
        centerMode: true,
        centerPadding: '40px',
        slidesToShow: 3
      
    ,
    
      breakpoint: 480,
      settings: 
        arrows: false,
        centerMode: true,
        centerPadding: '40px',
        slidesToShow: 1
      ,
    ,
    
        lazyLoad: 'ondemand',
        slidesToShow: 3,
        slidesToScroll: 1
      
  ]
);

);

      <link rel="stylesheet" type="text/css" href="wp-content/plugins/custom-carousel/slick.css"/>
      <link rel="stylesheet" type="text/css" href="wp-content/plugins/custom-carousel/slick-theme.css"/>
      <link rel="stylesheet" type="text/css" href="wp-content/plugins/custom-carousel/custom-carousel.css"/>
    
        <div class="center">
    
         <?php if ($wc_query->have_posts()) : ?>
         <?php while ($wc_query->have_posts()) : $wc_query->the_post(); ?>
    
        
           <div class="prodcut_wrapper">            
             <a class="product_link" href="<?php the_permalink(); ?>">
                 <?php the_post_thumbnail(); ?>
                 <?php the_title(); ?>
              </a>
            </div>
              
    
    
         <?php endwhile; ?>
         <?php wp_reset_postdata(); ?>
         <?php else:  ?>

         <h3><?php _e( 'No Products' ); ?></h3>

         <?php endif; ?>

         </div>
         
    
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
        <script type="text/javascript" src="wp-content/plugins/custom-carousel/slick.min.js"></script>
        <script type="text/javascript" src="wp-content/plugins/custom-carousel/custom-slick.js"></script>

【问题讨论】：

您可能应该register your scripts 而不是将它们加载为<script> 标签（您这样做的方式，WP 不知道它们）。这也可能是相关/有用的：make.wordpress.org/support/2020/12/…

我遇到了同样的问题。原因 - 同一页面上有多个版本的 jQuery。我删除了第二个 jQuery，它解决了问题。

【参考方案1】：

试试这个：

jQuery(document).ready(function()
jQuery('.center').slick(
   centerMode: true,
   centerPadding: '60px',
   slidesToShow: 3,
   responsive: [

  breakpoint: 768,
  settings: 
    arrows: false,
    centerMode: true,
    centerPadding: '40px',
    slidesToShow: 3
  
,

  breakpoint: 480,
  settings: 
    arrows: false,
    centerMode: true,
    centerPadding: '40px',
    slidesToShow: 1
  ,
,

    lazyLoad: 'ondemand',
    slidesToShow: 3,
    slidesToScroll: 1
  
  ]
 );
);

由于 wordpress 使用 jQuery 而不是 $ 如果你想改变，这里有一篇关于它的文章：https://digwp.com/2011/09/using-instead-of-jquery-in-wordpress/