Question

我为一个客户端继承了一个未完成的WordPress开发，以前在此page上设置了带有Carousel的Flexslider，但它没有在前端显示。我已经搜索并发现了类似的example，据我所知它设置相同。正在调用Flexslider，但检查控制台它会抛出'Uncaught TypeError：$不是函数'。

这是有问题的代码块;

            <!-- FlexSlider -->
    <script defer src="http://109.199.123.244/~gravenhi/wp-content/themes/bamfordrose/js/jquery.flexslider-min.js"></script>

    <script type="text/javascript">
    $(window).load(function(){
      $('#carousel').flexslider({
        animation: "slide",
        controlNav: false,
        animationLoop: false,
        slideshow: false,
        itemWidth: 136,
        itemMargin: 0,
        asNavFor: '#slider'
      });

      $('#slider').flexslider({
        animation: "slide",
        controlNav: false,
        animationLoop: false,
        slideshow: false,
        sync: "#carousel",
        start: function(slider){
          $('body').removeClass('loading');
        }
      });
    });
    </script>

我也尝试过WordPress没有冲突模式如下，但无济于事。

    (function($) {
// Inside of this function, $() will work as an alias for jQuery()
// and other libraries also using $ will not be accessible under this shortcut})(jQuery);

Answer 1

看起来jQuery在页面上被调用两次，一次来自Google，一次来自本地WordPress副本，这将导致意外问题。

flexSlider脚本也被调用两次，只需调用一次，首先加载jQuery，然后加载flexslider.js，然后然后初始化滑块，如下所示：

<script src="jquery.min.js"></script>  
<script src='/js/jquery.flexslider-min.js'></script>

<script type="text/javascript">
$(window).load(function(){
  $('#carousel').flexslider({
    animation: "slide",
    controlNav: false,
    animationLoop: false,
    slideshow: false,
    itemWidth: 136,
    itemMargin: 0,
    asNavFor: '#slider'
  });
</script>

查看页面的来源，您将看到上述脚本的多个实例，修复这些，我认为您的问题将被消除。

Flexslider旋转木马/滑块未显示 - 可能发生冲突？

1 个答案: