未捕获的类型错误：jQuery(...).amazingslider 不是函数

问题描述

我已经使用惊人的滑块 javascript 创建了一个视频灯箱滑块，并且代码在本地运行良好，但是当我在我的模板上实现它时，发生了一个非常奇怪的错误。但是，添加了所有必需的 CDN

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

这是我正在使用的完整代码

<script type='text/javascript' src='https://amazingslider.com/wp-includes/js/jquery/jquery.min.js?ver=3.5.1' id='jquery-core-js'></script>
<script type='text/javascript' src='https://amazingslider.com/wp-content/uploads/amazingslider/sharedengine/amazingslider.js?ver=4.2' id='amazingslider-script-js'></script>
<script src="https://amazingslider.com/wp-content/uploads/amazingslider/19/sliderengine/initslider.js"></script>
<style type="text/css">
    .demo-slider-3 {
        margin: 0em auto 8em;
        max-width: 600px;
        text-align: center;
    }
    .amazingslider-bottom-shadow-0 {
        display: none !important;
    }
</style>

<div class="demo-slider-3">
    <div id="amazingslider-19" style="display:block;position:relative;margin:15px auto 30px;">
        <ul class="amazingslider-slides" style="display:none;">

            <li>
                <a href="#videolink" class="html5lightBox">
                    <img src="#imagelink"/>
                </a>
            </li>
            <li>
                <a href="#videolink" class="html5lightBox">
                    <img src="#imagelink"/>
                </a>
            </li>
            <li>
                <a href="#videolink" class="html5lightBox">
                    <img src="#imagelink"/>
                </a>
            </li>
        </ul>
        <ul class="amazingslider-thumbnails" style="display:none;">
            <li><img src="#imagelink"/></li>
            <li><img src="#imagelink"/></li>
            <li><img src="#imagelink"/></li>
        </ul>
    </div>

</div>  

    

解决方法

<script language="JavaScript">
  function insertToHead(src) {
    var head = document.getElementsByTagName("head")[0];
    var script = document.createElement('script');
    script.setAttribute('type','text/javascript');
    script.setAttribute('src',src);
    head.appendChild(script);
  };
  var jQueryLoaded = setInterval(function(){
    if (typeof jQuery !== 'undefined')
    {
      clearInterval(jQueryLoaded);
      insertToHead('http://yourwebsite.com/myslider/amazingslider.js');
    }
  },500);
  var AmazingSliderLoaded = setInterval(function(){
    if ((typeof jQuery !== 'undefined') && jQuery.fn.amazingslider)
    {
      clearInterval(AmazingSliderLoaded);
      insertToHead('http://yourwebsite.com/myslider/initslider-1.js');
    }
  },500);
</script>

通过使用这个脚本，我可以在我的网站上运行它