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

问题

I'm trying to add a Lightbox to my slick 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. The CSS files are included in the <head> 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>

来源：https://stackoverflow.com/questions/59041159/uncaught-typeerror-jquery-slicklightbox-is-not-a-function

标签

javascript

jquery

html

slick.js