Slick slider clicks not working please help

I’m using slick slider here and this error happens every time I click on the thumbnails… Checked that jquery was properly loaded before but other than that the slider works, I’m afraid I’m not expert on JS yet… this is what the console outputs

Uncaught TypeError: jQuery(...).slick is not a function
    <anonymous> https://www.tomastestart.cl/portafolio/:500
    jQuery 8
    <anonymous> https://www.tomastestart.cl/portafolio/:491

Edit: this is the code: I should had posted this for starters

<script defer type="text/javascript">
// Slick Slider

jQuery('.center').slick({
    centerMode: true,
    centerPadding: '0px',
    slidesToShow: 5,
    arrows: false,
    dots: true,
    //adaptiveHeight: true,
    responsive: [
        {
            breakpoint: 1308,
            settings: {
                arrows: false,
                centerMode: true,
                centerPadding: '0px',
                slidesToShow: 3
            }
        },
        {
            breakpoint: 731,
            settings: "unslick"
        }
    ]
});


// Para clicks/hover
jQuery(document).on("mouseenter", ".slick-current", function(e) {
  jQuery('.slick-current').addClass('current-hover');
});
jQuery(document).on("mouseleave", ".slick-current", function(e) {
    jQuery('.slick-current').removeClass('current-hover');
});  

// Para Touch 

jQuery(document).on("touchstart", ".slide", function(e) {
  e.stopPropagation();   
  if(jQuery(this).hasClass('current-hoverv2')){
          jQuery(this).removeClass('current-hoverv2');
    }
    else{
         jQuery(this).addClass('current-hoverv2');
    } 
});



 jQuery('.slick-slider').on('click', '.slick-slide', function (e) {
    e.stopPropagation();

   const canHover = window.matchMedia('(hover: hover)').matches;
  if ( canHover == true) {
        jQuery('.slick-current').toggleClass('current-hover');  
    };

    var index = jQuery(this).data("slick-index");
    if (jQuery('.slick-slider').slick('slickCurrentSlide') !== index) {
        setTimeout(function(){
  jQuery('.slick-current').removeClass('current-hover');
}, 100);
      jQuery('.slick-current').removeClass('current-hover');
      //$('.slick-active .imagen-principal-portafolio').css({ 'height': '230px' });          
         event.preventDefault()
      jQuery('.slick-slider').slick('slickGoTo', index);
      jQuery('.slick-current').removeClass('current-hover');
      // redimension imagen central del height basadao en width mas offset 
      //var customWidthv = $('.slick-current img').width();
      //$('.slick-current .imagen-principal-portafolio').css({ 'height': 'calc(' + customWidthv+ 'px * 0.7 + 11px)' });
      //$('.slick-current .imagen-principal-portafolio').css({ 'margin-bottom': '0px' });
     
    }

  });  

</script>

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.