Slick slider is not a function how to fix?

Question

Slick

Good afternoon! Please tell me the error, I do not understand what the problem is. I need to make a slider for a page, everything works fine on the local machine, as soon as I try to transfer the code to the page on which it is needed, it breaks and gives the following error:

I do everything right, first I include the jQuery library and slick styles, then I write a div with the necessary classes and content, and then I connect the slick library and insert the slider code
, I tried it in a different order, it doesn’t help, the non-conflict mod also doesn’t work
, the site itself doesn’t work, it has two sliders, one working (not slick), and the second not working,
tell me please, what's wrong? https://simplechopper.net/product/lushful-lash-mas...

Answer 1

I solved the mistake! The simplest solution, if it doesn't work for you the same way as it did for me, even though you only have one version of jQuery connected, then include the script in a non-conflict mode. In fact, I saw such a solution, but for some reason that script did not suit me.
Let's say I have the usual slider code inserted

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

and just add instead of (document).ready(function() - $.noConflict();
jQuery(document).ready(function($)
comes out like this

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

  ]
});
    });

And it starts working :)
PS it also starts working without conflicts if you put jQuery(document).ready(function($) in all scripts where there is jQuery, that is, indicate that $ is a function, and you can not use non-conflict.