Uncaught TypeError: jQuery(...).slickLightbox is not a function

[julinator04]

Hello, Just created an account for this issue, because I seem not to make any progress in solving this issue. I'm learning programming atm but asked two friends who study IT but they couldn't find the mistake either.

I'm trying to add a Lightbox to my slider. But when I implement it. Console puts out that there is no function slickLightbox.

Uncaught TypeError: jQuery(...).slickLightbox is not a function

How can I solve this? Please see my Code below. I'm using shopify btw. The CSS files are included in the

and should be fine

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.css"/>
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-lightbox/0.2.12/slick-lightbox.css"/>
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.css"  />

<div class="slider-for" style="margin-bottom: 30px;">
    {% for image in product.images %}
      <div>
        <img class="mySlides" src="{{ image | img_url: 'master' }}" style="width:90%; margin-left: auto;
  margin-right: auto; " >
      </div>
	{% endfor %}
  </div>

<div class="slider-nav" style="margin-bottom: 30px; margin-left: auto;
  margin-right: auto; width: 90%" >
    {% for image in product.images %}
      <div>
        <img class="mySlides" src="{{ image | img_url: 'master' }}" style="width:90%; margin-left: auto;
  margin-right: auto;" >
      </div>
	{% endfor %}
  </div>

<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js"></script>
<script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/slick-lightbox/0.2.12/slick-lightbox.js"></script>


<script type="text/javascript">
    jQuery(document).ready(function(){
      jQuery(".slider-for").slick({
  slidesToShow: 1,
  slidesToScroll: 1,
  arrows: false,
  fade: true,
  asNavFor: '.slider-nav',
        {% comment %}
  adaptiveHeight: true,
        {% endcomment %}
});
      jQuery(".slider-for").slickLightbox();
    });
  </script>

<script type="text/javascript">
    jQuery(document).ready(function(){
      jQuery(".slider-nav").slick({
  slidesToShow: 5,
  slidesToScroll: 1,
  asNavFor: '.slider-for',
  dots: true,
  centerMode: true,
  focusOnSelect: true
		});
    });
  </script>

I'm ready to learn if you help me!