Slick slider ().slick not a function with Wordpress PHP

Question

I am stumped on the cause of this error. I am getting "uncaught TypeError: $(...).slick is not a function" when using Slick Slider. I am using the code in WordPress and have added it as a plugin with PHP generated data. The slider has been working perfectly until I updated WordPress to version 5.8. It seem like slick.js is not being found but from what I can tell the script is being called correctly. I am guessing this has something to do with WordPress PHP more then the jQuery for the slider? I am not quite sure. If you have any ideas I would appreciate hearing it!

$(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>

Answer 1

try this:

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
  }
  ]
 });
});

Since wordpress uses jQuery instead of $ if u would want to change that here is a article about it: https://digwp.com/2011/09/using-instead-of-jquery-in-wordpress/